一、什么是Bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 是一个流行的开源前端框架，用于快速构建响应式和移动优先的网站和 Web 应用程序。它由 Twitter 的开发人员创建，旨在帮助开发人员快速搭建现代、具有吸引力的网页设计。
在使用bootstrap的时候所有的页面样式都只需要通过class来调节即可。
二、Bootstrap 的关键特点：
-
响应式设计：Bootstrap 提供了针对不同设备尺寸（如桌面、平板和手机）的响应式网格系统，使得网站能够自动适应不同屏幕尺寸，提供更好的用户体验。
-
预定义的样式：Bootstrap 包含了大量预定义的 CSS 样式和组件，如按钮、表单、导航栏、模态框等，开发人员可以通过简单地添加 CSS 类来快速构建页面。
-
JavaScript 插件：Bootstrap 提供了一系列的 JavaScript 插件，如模态框、标签页、下拉菜单等，使得开发人员可以轻松地添加交互功能而无需从头编写代码。
-
定制化：Bootstrap 允许开发人员根据项目需求定制化样式，通过使用 Sass 变量和 mixin，开发人员可以轻松定制颜色、字体等样式。
-
社区支持：由于 Bootstrap 是一个流行的框架，拥有庞大的社区支持，开发人员可以在社区中找到大量的文档、教程和资源，帮助解决问题和加快开发速度。
通过使用 Bootstrap，开发人员可以快速构建具有现代设计和良好用户体验的网站和 Web 应用程序，同时减少了开发时间和成本。
注意：bootstap的js代码是依赖于jQuery的，也就一位着你在使用bootstrap动态效果的时候一定要导入jQuery
三、Bootstrap引入
中文文档查询：https://www.bootcss.com/
1、CDN加速链接
- 压缩文档链接引入
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js
2、下载本地文档
v3版本下载地址：https://v3.bootcss.com/getting-started/#download
Bootstrap 包的内容
-
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
-
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
-
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
-
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
-
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
3、注意
- 网络连接引入在本地不会提示相关的补充
- 下载本地文档较为友好
Bootstrap的js代码是基于jQuery的
在使用bootstrap做动态效果时一定要引入jQuery!!!
4、Bootstrap包的文件结构
（1）预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.css/js），以及已编译压缩的 CSS 和 JS（bootstrap.min.css/js）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
（2）Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
-
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
-
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
-
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
三、Bootstrap使用
1、布局容器
（1）块儿级布局容器
块级布局容器在网页设计中起着重要作用，用于组织和布局页面内容。这些容器通常以块级元素的形式出现，可以帮助开发人员实现各种复杂的页面布局效果。以下是一些常见的块级布局容器：
-
<div>元素：<div>元素是最通用的块级容器，用于将页面内容分组并应用样式。开发人员可以利用<div>元素创建不同区块，如导航栏、侧边栏、内容区域等，从而实现灵活的页面布局结构。 -
<section>元素：<section>元素用于标识文档中的一个区块或部分，通常包含相关内容的一个独立部分。<section>元素可以帮助组织页面内容，使其更具结构性。 -
<header>、<footer>、<main>元素：这些元素分别用于定义页面的页眉、页脚和主要内容区域。它们可以作为块级布局容器，帮助将页面内容分割和组织，使页面结构更清晰。 -
<article>元素：<article>元素用于表示文档中独立的、完整的内容，如一篇博客文章或新闻报道。开发人员可以将每篇文章包裹在一个<article>元素中，从而实现文章级的布局效果。 -
<aside>元素：<aside>元素用于表示与页面内容相关但不是主要内容的部分，如侧边栏、广告等。开发人员可以使用<aside>元素作为块级布局容器，实现与主要内容分离但又相关联的布局效果。
这些块级布局容器可以根据需要组合和嵌套，结合 CSS 样式和布局技术（如网格布局、Flexbox 布局）来实现各种复杂的页面布局效果。通过合理地使用块级布局容器，开发人员可以实现页面内容的结构化布局，提升用户体验并简化页面维护工作。
（2）行内布局容器
行内布局容器在网页设计中也扮演着重要的角色，用于组织和布局页面内容，通常以行内元素的形式出现。以下是一些常见的行内布局容器：
-
<span>元素：<span>元素是最通用的行内容器，用于对文本或其他行内元素进行分组并应用样式。开发人员可以利用<span>元素实现对文本的局部样式设置，或者对行内元素进行包裹。 -
<a>元素：<a>元素用于创建超链接，通常用于链接到其他页面或资源。除了作为超链接外，<a>元素也可以作为行内容器，将其他行内元素包裹在其中。 -
<strong>、<em>元素：<strong>和<em>元素分别用于表示强调内容和斜体内容。它们可以作为行内容器，用于包裹需要强调或斜体显示的文本内容。 -
<label>元素：<label>元素通常用于标签文本，与表单控件关联。它可以作为行内容器，帮助将标签文本与表单控件进行关联。 -
<abbr>、<acronym>元素：<abbr>和<acronym>元素分别用于表示缩写词和首字母缩略词。它们可以作为行内容器，用于标记文本中的缩写词或首字母缩略词。
这些行内布局容器可以帮助开发人员实现对文本和行内元素的精细控制和布局。
（3）弹性布局容器
弹性布局（Flexbox）是一种用于设计网页布局的现代 CSS 技术，它提供了一种灵活的方式来排列、对齐和分布元素，特别适用于构建响应式设计。在 Flexbox 中，容器内的子元素可以根据需要自动调整大小，以填充可用空间。以下是 Flexbox 中的一些重要概念：
-
Flex 容器：要创建一个弹性布局，首先需要将一个容器设置为 Flex 容器。通过将容器的
display属性设置为flex或inline-flex来实现。Flex 容器的子元素称为 Flex 项目。 -
主轴和交叉轴：在 Flexbox 布局中，存在主轴和交叉轴两个概念。主轴是 Flex 容器的主要方向，Flex 项目沿着主轴排列。交叉轴则垂直于主轴。
-
Flex 项目：Flex 容器内的子元素称为 Flex 项目。每个 Flex 项目可以具有自己的属性，如
flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础大小）等。 -
主轴对齐和交叉轴对齐：通过设置
justify-content属性可以控制 Flex 项目在主轴上的对齐方式，而通过设置align-items和align-self属性可以控制项目在交叉轴上的对齐方式。 -
弹性增长和缩小：Flexbox 允许 Flex 项目根据剩余空间自动增长或缩小。这是通过
flex-grow和flex-shrink属性来实现的。
Flexbox 提供了一种强大而灵活的方式来设计网页布局，使得开发人员能够更轻松地实现复杂的布局效果，同时确保页面在不同设备上都能够良好地响应。
（4）常用Container容器
Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。
① .container类
可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅）：
<div class="container c1">
左右两侧有留白
</div>
② .container-fluid 类
可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）：
<div class="container-fluid c1">
左右两侧没有留白
</div>
2、栅格系统
Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。
(分界点大小：576px、768px、992px、1200px)
Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的，完全支持响应式标准。
<div class="row"></div>
写一个row就是将所在的区域分成12份
<div class="col-md-6 c1"></div>
# 在使用bootstrap的时候，脑子里一定要做12的加减法
@media screen and (max-width: 600px){
.c1 {
background-color: greenyellow;
height: 100px;
border: 5px solid black;
}
}
一旦屏幕小于600px变为其他颜色
（1）栅格参数
.col-xs- .col-sm- .col-md- .col-lg-
# 针对不同的显示器，bootstrap会自动选择相对应的参数
# 如果你想要兼容所有的显示器，全部加上即可
（2）列偏移
- 使用
.col-md-offset-*类可以将列向右侧偏移。 - 这些类实际是通过使用
*选择器为当前元素增加了左侧的边距（margin）。 - 例如，
.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列（column）的宽度。
# 在一行如何移动位置
<div class="col-md-8 col-md-offset-2 c1"></div>
col-md-offset-2 表示从左向右偏移2个位置
4、排版
（1）标题
兼容所有HTML标题集，涵括从 <h1> 到 <h6>,的六种标题展现。
CSS选择器也支持以.h1 -- .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感）。
（2）自定义标题备注
使用附带的实用类从Bootstrap 重新创建小的辅助标题文本。
<h3>主标题主标题
<small class="text-muted">副标题副标题</small>
</h3>
（3）显式标题
bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式。
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
（4）Lead中心内容
通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。
<p>苹果苹果苹果苹果</p>
<p class="lead">香蕉香蕉香蕉香蕉</p>
<p>橘子橘子橘子橘子</p>
<p>梨子梨子梨子梨子</p>
（5）文本内联元素
- del能更形象的描述意思
- ins 代表被插入的文字
- u 代表有下划线
- strong、em等有强调作用，有利于seo(搜索引擎优化)。
<p>看看我是不是<mark>高亮</mark>文本</p>
<p>看看我是不是<span class="mark">高亮</span>文本</p>
<p><small>小号字小号字小号字</small></p>
<p><span class="small">小号字小号字小号字</span></p>
<p><del>删除线删除线删除线</del></p>
<p><s>删除线删除线删除线</s></p>
<p><ins>下划线下划线下划线</ins></p>
<p><u>下划线下划线下划线</u></p>
<p><strong>粗体粗体粗体</strong></p>
<p><b>粗体粗体粗体</b></p>
<p><em>斜体斜体斜体</em></p>
<p><i>斜体斜体斜体</i></p>
（6）abbr缩略语
<p>
<abbr title="请填写您的邮箱" class="initialism">email</abbr></p>
5、表格
Bootstrap 是一个流行的前端框架，提供了丰富的组件和样式，其中包括表格（Table）组件。在 Bootstrap 中，可以通过添加不同的类来定制表格的外观和行为。下面是一些常用的 Bootstrap 表格类及其功能：
（1）表格类
-
.table：基本表格样式，添加在<table>元素上。 -
.table-striped：为表格的奇数行添加斑马纹样式。 -
.table-bordered：为表格添加边框。 -
.table-hover：鼠标悬停时高亮当前行。 -
.table-responsive：使表格在小屏幕上水平滚动以确保可见性。
（2）单元格类
-
.table-active：激活单元格的背景颜色。 -
.table-primary：定义单元格的主题颜色为蓝色。 -
.table-success：定义单元格的主题颜色为绿色。 -
.table-info：定义单元格的主题颜色为浅蓝色。 -
.table-warning：定义单元格的主题颜色为黄色。 -
.table-danger：定义单元格的主题颜色为红色。
（3）示例代码
下面是一个简单的示例代码，展示了如何使用 Bootstrap 的表格类和单元格类：
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>Jane</td>
<td>Smith</td>
</tr>
<tr class="table-danger">
<td>3</td>
<td>Mike</td>
<td>Johnson</td>
</tr>
</tbody>
</table>
在上面的示例中，表格应用了.table、.table-striped和.table-bordered类，以及.table-success和.table-danger类来定制单元格的样式。你可以根据需要添加或修改这些类来满足你的设计要求。
6、表单
在 Bootstrap 中，表单（Form）是常见的用户输入界面元素，用于收集用户输入数据。Bootstrap 提供了一系列类和组件来创建漂亮且响应式的表单。以下是一些常用的 Bootstrap 表单类和组件：
表单类
-
.form-control：用于输入元素（input、textarea、select）的类，使其具有完全宽度和一致的外观。 -
.form-group：用于包装表单控件和标签的类，用于创建更好的排列和间距。 -
.form-check：用于包装复选框（checkbox）和单选框（radio）的类，使其更易于布局。 -
.form-check-input：用于复选框和单选框的输入部分。 -
.form-check-label：用于复选框和单选框的标签部分。 -
.form-text：用于添加辅助文本（如提示信息、错误信息）的类。
表单组件
-
文本框（Text Input）：
<input type="text" class="form-control"> -
密码框（Password Input）：
<input type="password" class="form-control"> -
文本域（Textarea）：
<textarea class="form-control"></textarea> -
下拉菜单（Select）：
<select class="form-control"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> -
复选框（Checkbox）：
<div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> Checkbox 和 radio一般不加form-control，不然会非常的丑陋
- 另外，针对报错信息，可以加has-error（input的父标签加）
<p class="has-error">
username: <input type="text" class="form-control">
</p>
示例代码
下面是一个简单的示例代码，展示了如何使用 Bootstrap 的表单类和组件创建一个基本的表单：
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
在上面的示例中，我们使用了.form-group类来包装表单元素，.form-control类用于输入框和下拉菜单，.form-check类用于复选框，以及.btn和.btn-primary类用于创建提交按钮。你可以根据需要添加或修改这些类来定制你的表单。
7、按钮
在 Bootstrap 中，按钮是网页中常见的交互元素，用于触发特定操作或事件。Bootstrap 提供了一系列类和样式，可以帮助你创建各种不同样式的按钮。以下是一些常用的 Bootstrap 按钮类和样式：
按钮类
-
.btn：基本按钮类，用于创建按钮样式。 -
.btn-primary：用于创建主要操作按钮，通常表示最重要的操作。 -
.btn-secondary：用于创建次要操作按钮，通常表示次要的操作。 -
.btn-success：用于创建成功操作按钮，通常表示成功或通过的操作。 -
.btn-danger：用于创建危险操作按钮，通常表示删除或危险的操作。 -
.btn-warning：用于创建警告操作按钮，通常表示警告或需要注意的操作。 -
.btn-info：用于创建信息操作按钮，通常表示提供额外信息的操作。 -
.btn-light：用于创建浅色按钮。 -
.btn-dark：用于创建深色按钮。
按钮样式
- 实心按钮：默认为实心按钮样式。
- 轮廓按钮：通过添加
.btn-outline-*类可以创建轮廓按钮样式，如.btn-outline-primary、.btn-outline-secondary等。 - 块级按钮：
.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<input type="submit" class="btn btn-primary btn-block">
按钮大小
.btn-sm：用于创建小尺寸按钮。.btn-lg：用于创建大尺寸按钮。
示例代码
下面是一个简单的示例代码，展示了如何使用 Bootstrap 的按钮类和样式创建不同类型的按钮：
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-outline-primary">Outline Primary Button</button>
<button type="button" class="btn btn-outline-secondary">Outline Secondary Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
在上面的示例中，我们展示了如何创建不同样式、大小和类型的按钮。你可以根据需要选择合适的按钮类和样式来定制你的按钮。
8、图标
在 Bootstrap 中，图标通常使用 Font Awesome 或者 Bootstrap Icons 这样的图标库来实现。这些图标库提供了大量的矢量图标，可以通过简单的类名来使用。
（1）使用 Font Awesome 图标
Font Awesome：https://fontawesome.com.cn/
- 首先，在
<head>标签中引入 Font Awesome 的 CSS 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- 然后，通过在元素中添加 Font Awesome 的类名来显示相应的图标，例如：
<i class="fas fa-home"></i> <!-- 使用实心风格的房子图标 -->
<i class="far fa-envelope"></i> <!-- 使用空心风格的邮箱图标 -->
（2）使用 Bootstrap Icons
如果你想使用 Bootstrap Icons，首先需要引入 Bootstrap 的 CSS 文件：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap.css" rel="stylesheet">
然后，你可以在元素中使用 Bootstrap Icons 的类名来显示相应的图标，例如：
<i class="bi bi-heart"></i> <!-- 使用心形图标 -->
<i class="bi bi-star-fill"></i> <!-- 使用填充的星形图标 -->
这些图标库提供了丰富的图标选项，你可以根据自己的需求选择合适的图标并将其应用到项目中。
9、导航条
在 Bootstrap 中，导航条（Navbar）是一个常用的组件，用于创建响应式的导航栏。下面是一些常用的导航条参数及其介绍：
（1）常用参数介绍：
.navbar：导航条的基本样式类。.navbar-expand-{breakpoint}：定义在何处导航条将折叠为移动设备的折叠按钮。{breakpoint}可以是sm、md、lg或xl。.navbar-dark或.navbar-light：定义导航条的颜色主题为深色或浅色。.bg-{color}：定义导航条的背景颜色，如.bg-primary、.bg-secondary等。.navbar-brand：定义导航条的品牌区域。.navbar-nav：定义导航条的菜单项列表。.nav-item和.nav-link：定义导航条中的菜单项和链接。.dropdown和.dropdown-menu：定义下拉菜单及其菜单项。
（2）示例代码：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Service 1</a>
<a class="dropdown-item" href="#">Service 2</a>
</div>
</li>
</ul>
</div>
</nav>
在这个示例中，我们创建了一个响应式的导航条，其中包含了品牌区域、菜单项、下拉菜单等内容。你可以根据自己的需求和设计风格来调整导航条的样式和结构。
<nav class="navbar navbar-inverse"> 反转颜色
<nav class="navbar navbar-default"> 默认颜色
10、图片
在 Bootstrap 中，图片（Images）是网页设计中常用的元素之一，Bootstrap 提供了一些类和参数来帮助控制图片的样式和响应性。以下是一些常用的 Bootstrap 图片参数及其介绍：
（1）常用参数介绍：
.img-fluid：使图片响应式，根据容器大小自动调整图片大小。.img-thumbnail：为图片添加边框和圆角，使其看起来像缩略图。.rounded和.rounded-{size}：为图片添加圆角边框，{size}可以是sm、md或lg。.rounded-circle：将图片剪裁为圆形。.img-thumbnail：为图片添加缩略图样式。.img-thumbnail：为图片添加缩略图样式。.float-left和.float-right：使图片浮动到左侧或右侧。
（2）示例代码：
<img src="image.jpg" class="img-fluid" alt="Responsive image">
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail image">
<img src="image.jpg" class="rounded" alt="Rounded image">
<img src="image.jpg" class="rounded-circle" alt="Rounded circle image">
<img src="image.jpg" class="img-thumbnail float-left" alt="Float left image">
<img src="image.jpg" class="img-thumbnail float-right" alt="Float right image">
在这个示例中，我们展示了如何使用 Bootstrap 类来控制图片的样式，包括使图片响应式、添加边框、圆角、浮动等。你可以根据需要选择合适的类来美化和定制你的图片。
11、弹出框
弹框参考网站：SweetAlert for Bootstrap (lipis.github.io)
swal('下一位')
undefined
swal('下一位','这批不行，换一批')
undefined
swal('下一位','这批不行，换一批','success')
undefined
swal('下一位','这批不行，换一批','warning')
undefined
swal('下一位','这批不行，换一批','error')
undefined
swal('下一位','这批不行，换一批','info')
undefined