目录
Bootstrap 网格系统（Grid System）的工作原理
创建一个可取消的警告（Dismissal Alert）步骤如下：
1.什么是 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
可以帮助我们快速布局和美化页面
2.为什么使用 Bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
3.Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
4.Bootstrap的安装与使用
1.官网下载安装包，解压后，打开dist文件，将css、fonts、js文件导入项目
css中其实只要引入bootstrap.css、bootstrap-theme.css文件即可，其它的都是映射文件和压缩文件。
fonts文件直接复制
js文件只要bootstrap.js
另外还需要JQuery的jar包，Bootstrap是依据JQuery编写的。
2.在html文档中引入三个外部文件
或者引用网络上的
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>5.Bootstarp Css
5.1.Bootstrap-按钮
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。
注意;不管什么按钮，什么样式，class属性中开头都要是btn这个基本样式，后面再根据需求添加样式。
5.1.1.按钮样式
5.1.2.按钮大小
5.1.3.按钮状态
5.1.4.按钮标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--上面两个引入后才可以引入自己的js文件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<!--上面引入后才可以引入自己的css文件-->
</head>
<body>
<!--各种按钮-->
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
<!--按钮大小-->
<p>
<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
<button type="button" class="btn btn-default btn-lg"> 大的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">默认大小的原始按钮</button>
<button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
<button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block"> 块级的原始按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>
<!--按钮状态-->
<p>
<button type="button" class="btn btn-default btn-lg ">默认按钮</button>
<button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>
<p>
<button type="button" class="btn btn-default btn-lg">默认按钮</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">链接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>
<!--按钮标签-->
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">
</body>
</html>5.2.Bootstrap-表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
5.2.1.表格类
下表样式可用于表格<table>标签中：
5.2.2.<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
5.2.3.基本的表格
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示
<body>
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</body>可选的表格类
除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
5.2.4.条纹表格
通过添加 .table-striped class，您将在 <tbody> 内的行上看到条纹，如下面的实例所示
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>5.2.5.边框表格
通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
<table class="table table-bordered">
5.2.6.悬停表格
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
<table class="table table-hover">
5.2.7.精简表格
通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
<table class="table table-condensed">
5.2.8.上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
5.2.9.响应式表格
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
5.3.Bootstrap 图片
Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：
响应式图片
通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
修改Bootstrap中css样式表
如下图，通过点击右上角定位到当前样式在css文件中具体位置，可以复制当前元素的css样式到html文档中，使用内部样式按照自己要求进行修改(覆盖原有样式)，而不是修改bootstrap中的css文件中的样式。
若需要修改Bootstrap的css样式比较多，可以自己创建一个css文件写自己自定义的css样式，然后在完档中引入
5.4.bootstrap 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
Bootstrap 网格系统（Grid System）的工作原理
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
网格选项
基本的网格结构
先用容器包裹所有行，在行中定义列
- <div class="container">
- <div class="row">
- <div class="col-*-*"></div>
- <div class="col-*-*"></div>
- </div>
- <div class="row">...</div>
- </div>
- <div class="container">....
5.5.bootstrap 表单
表单布局
Bootstrap 提供了下列类型的表单布局：
垂直或基本表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
水平表单
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
col-sm-2表示基于栅格系统占据2列，表单的form-group中label和div一般栅格正好满12列
支持的表单控件
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
文本框（Textarea）
当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。
复选框（（Checkbox）和单选框（Radio）
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
下面的实例演示了这两种类型（默认和内联）：
6.Bootstrap 布局组件
6.1.Bootstrap 导航栏
默认的导航栏
创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">jianzhan</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
给导航栏添加容器div使导航栏不支撑整行<div class="container">
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">jianzhan</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>响应式的导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">jianzhan</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>6.2.警告框
本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件
您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。下面的实例演示了这点：
基本的警告框
给它加了container容器，让警告框在这个容器中，不支撑整个行、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>
</div>
</body>
</html>可取消的警告（Dismissal Alerts）
创建一个可取消的警告（Dismissal Alert）步骤如下：
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
同时向上面的 <div> class 添加可选的 .alert-dismissable。
添加一个关闭按钮。
<!--可取消的警告框-->
<div class="container">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×<!--转义成×-->
</button>
成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×<!--转义成×-->
</button>
信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×<!--转义成×-->
</button>
警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×<!--转义成×-->
</button>
错误！请进行一些更改。
</div>
</div>警告（Alerts）中的链接
在警告（Alerts）中创建链接的步骤如下：
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。
<!--警告框中的链接-->
<div class="container">
<div class="alert alert-success">
<a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">信息！请注意这个信息。</a>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">警告！请不要提交。</a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">错误！请进行一些更改。</a>
</div>
</div>6.3.bootstrap进度条
您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。
默认的进度条
创建一个基本的进度条的步骤如下：
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
success info warning danger的进度条颜色不同
<div class="container">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</div>条纹的进度条
创建一个条纹的进度条的步骤如下：
添加一个带有 class .progress 和 .progress-striped 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
就是在基本进度条的<div class="progress">修改为<div class="progress progress-striped">其它不变
<!--条纹的进度条-->
<div class="container">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</div>动画的进度条
创建一个动画的进度条的步骤如下：
添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
就是在条纹进度条基础上添加class .active。即<div class="progress progress-striped active">
堆叠的进度条
您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：
<!--堆叠进度条-->
<div class="container">
<div class="progress progress-striped active ">
<div class="progress-bar progress-bar-success " role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</div>
6.4.
6.4.bootstrap分页
本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表
分页（Pagination）
下表列出了 Bootstrap 提供的处理分页的 class
默认的分页
在ul上添加pagination的class
<ul class="pagination">
分页的状态
class .disabled、.active 的用法：
<li class="active">
<li class="disabled">分页的大小
class .pagination-* 的用法
<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">翻页（Pager）
如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。
默认的翻页
在ul上使用class .pager
<ul class="pager">
对齐的链接
在li上使用class .previous、.next
<li class="previous">
<li class="next">翻页的状态
在li上使用class .disabled
<body>
<div class="container">
<ul class="pagination">
<li class="disabled"><a href="">上一页</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">下一页</a></li>
</ul><br />
<ul class="pagination pagination-sm">
<li class="disabled"><a href="">上一页</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li ><a href="">下一页</a></li>
</ul><br />
<ul class="pagination pagination-lg">
<li class="disabled"><a href="">上一页</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">下一页</a></li>
</ul><br />
<ul class="pager">
<li class="previous"><a href="">Previous</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="next"><a href="">next</a></li>
</ul><br />
</div>
</body>6.5.字体图标(Glyphicons)
什么是字体图标？
字体图标是在 Web 项目中使用的图标字体。可以通过基于项目的 Bootstrap 来免费使用这些图标
获取字体图标
在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
用法
如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
<span class="glyphicon glyphicon-search"></span>常用的字体图标
.glyphicon-search
.glyphicon-home
.glyphicon-file
.glyphicon-film
.glyphicon-trash垃圾桶
.glyphicon-plus加号
.glyphicon-user
<body>
<div class="container">
<span class="glyphicon glyphicon-search"></span> search
<span class="glyphicon glyphicon-home"></span> home
<span class="glyphicon glyphicon-file"></span> file
<span class="glyphicon glyphicon-film"></span> film
<span class="glyphicon glyphicon-trash"></span> trash
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-plus"></span> plus
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-user"></span> 用户
</button>
</div>
</body>7.bootstrap插件
7.1.bootstrap轮播图（Carousel）
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
简单的轮播图
使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。
可选的标题
您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。
用法
通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
$('.carousel').carousel()选项
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
方法
下面是一些轮播（Carousel）插件中有用的方法：
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/pic1.jpg" title="第1张图"/>
<div class="carousel-caption">第1张图</div>
</div>
<div class="item">
<img src="img/pic2.jpg" title="第2张图"/>
<div class="carousel-caption">第2张图</div>
</div>
<div class="item">
<img src="img/pic3.jpg" title="第3张图"/>
<div class="carousel-caption">第3张图</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a href="#myCarousel" class="carousel-control left" data-slide="prev"><</a>
<a href="#myCarousel" class="carousel-control right" data-slide="next">></a>
</div>
</body>7.2.模态对话框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
用法
通过 data 属性：
在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：
使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框$('#identifier').modal(options)
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--触发模态对话框的按钮-->
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">
添加学生信息
</button>
<!--模态对话框-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">添加学生信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="stuId" class="col-sm-2 control-label">学号：</label>
<div class="col-sm-10">
<input name="stuId" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="stuName" class="col-sm-2 control-label">姓名：</label>
<div class="col-sm-10">
<input name="stuName" class="form-control" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">提交</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
代码讲解
使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
在模态框中需要注意两点：
第一是 .modal，用来把 <div> 的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出，就是没触发时要隐藏模态框
<div id="myModal" class="modal fade">
下面是常用属性data和类class
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
选项
有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项
方法
下面是一些可与 modal() 一起使用的有用的方法
只需要点击 ESC 键，模态窗口即会退出。
事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
