Bootstrap
文章目录
1.Bootstrap
1.1.概述
Bootstrap 来自 Twitter，是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
1.2.Bootstrap 包含的内容
- 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
- CSS：Bootstrap 自带以下特性
1.全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，
2.一个先进的网格系统- 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
- JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件
- 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
1.3.官网&下载
根据需求下载对应的源码
Sass 和 Less 是升级版的CSS
1.4.文件结构
1.4.1.源码目录
less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。
dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。
docs/ 包含了所有文档的源码文件，
examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。
1.4.2.预编译版
下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构
预编译文件可以直接使用到任何 web 项目中。
并且提供了编译好的 CSS 和 JS (bootstrap.) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.) 文件。
同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。
1.5.环境配置
想要使用Bootstrap，必须引入三个文件
- Bootstrap核心文件
- Bootstrap核心JavaScript文件
- jQuery 库
以下代码为Bootstrap最基本的模板
bootstrap的css、jquery、bootstrap的js
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">-->
<script src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>-->
</head>
<body>
<h1>你好，世界</h1>
</body>
</html>
1.5.1.CDN 方式引入
传统引入方式有个缺点，就是必须要拷贝源文件，CDN方式有点如下：
站点安全得到有效保障
用户集中访问时，会减轻服务器压力
内集中放置，方便管理。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link
rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link
rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
2.Bootstrap使用
2.1.Bootstrap中的排版
Bootstrap对默认的排版方式进行了CSS样式定义，使得各种基本结构套用出来的HTML页面更加美观。
2.1.1.标题
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式，如下代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
</body>
</html>
运行结果
图一：无使用Bootstrap样式
图二：使用Bootstrap样式
2.1.2.文本
Bootstrap 可以控制文本的显示方式，比如
- 段落
- 对其方式
- 文本标记等
代码
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 强调</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
</body>
</html>
2.2.Bootstrap中的表格
2.2.1.基本实例
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/bootstrap.css" />
</head>
<body>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李四</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
2.2.2.条纹表格（隔行换色）
通过 .table-striped 类可
；以给 <tbody>之内的每一行增加斑马条纹样式。
主要代码
<table class="table table-striped">
2.2.3.带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-striped table-bordered">
2.2.4.鼠标悬停（悬停变色）
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
2.2.5.表格状态
通过这些状态类可以为行或单元格设置颜色。
主要代码
<tbody>
<tr >
<td>1</td>
<td>李四</td>
</tr>
<tr class="active">
<td>2</td>
<td>王五</td>
</tr>
<tr class="success">
<td>3</td>
<td>赵六</td>
</tr>
<tr class="info">
<td>4</td>
<td>田七</td>
</tr>
<tr class="warning">
<td>5</td>
<td>小李</td>
</tr>
<tr class="danger">
<td>6</td>
<td>大帝</td>
</tr>
</tbody>
2.3.Bootstrap 中的表单
2.3.1.基本格式表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动应用一些全局样式。下面列出了创建基本表单的步骤：
将 label 元素和前面提到的控件包裹在 .form-group 的<div>中。
所有设置了 .form-control 类的<input>、<textarea>和 <select>元素都将被默认设置宽度属性为 width: 100%;
主要代码
<body>
<form>
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
2.4.Bootstrap 中的按钮
代码示例
<!-- 标准的按钮 -->
<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>
2.5.Bootstrap 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统(Grid System)，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
工作原理
1.数据行（.row）必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding）
2.在行（.row）中可以添加列（.column），但列数之和不能超过平分的总列数（如：12），内容应该放在列内，并且唯有列可以是行的直接子元素
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">
...
</div>
注意：列 <div class="col-*-*"></div>必须放在<div class="row">行元素下，且行元素里边只能包含列子元素，不能跟其他的子标签元素，否则，布局样式会乱掉。
2.5.1.网格系统常见的参数
2.5.2.网格示例代码
2.5.2.1.示例一，简单使用
包含两个列，每个列包含两个段落。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是第一个DIV的第一个P标签，我是第一个DIV的第一个P标签</p>
<p>我是第一个DIV的第二个P标签，我是第一个DIV的第二个P标签</p>
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是第二个DIV的第一个P标签，我是第二个DIV的第一个P标签</p>
<p>我是第二个DIV的第二个P标签，我是第二个DIV的第二个P标签</p>
</div>
</div>
</div>
</body>
</html>
效果如图
<div class="container">...</div> 元素被添加，确保居中和最大宽度。
一旦添加了容器，接下来需要考虑以行为单位。添加<div class="row">...</div>，并在行内添加列 <div class="col-md-6"></div>。
网格中的每一行是由 12 个单元组成的，可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。
您可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。但要确保总和总是 12。
2.5.2.2.示例二：中大型设备
上一个示例，我们的两个DIV总是平分浏览器宽度
有时候我们希望根据屏幕大小不同来设置DIV的宽度，那么可以写为
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
注意：
1.在中型的设备中，会查找带有md的类，并使用它们
2.在大型设备中，会查找带有lg的类，并使用它们
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/bootstrap.css" />
</head>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是第一个DIV的第一个P标签，我是第一个DIV的第一个P标签</p>
<p>我是第一个DIV的第二个P标签，我是第一个DIV的第二个P标签</p>
</div>
<div class="col-md-6 col-lg-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是第二个DIV的第一个P标签，我是第二个DIV的第一个P标签</p>
<p>我是第二个DIV的第二个P标签，我是第二个DIV的第二个P标签</p>
</div>
</div>
</div>
</html>
效果如下所示，调整浏览器的窗口大小，两个div宽高就会发生改变
大屏幕
小屏幕
2.5.2.3.示例三：手机、平板、电脑
现在，给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 3 右边 9 的布局。在平板电脑上，它将是 6 、6 的布局。在大型视口的设备上，它将是 4 、8 的布局。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/bootstrap.css" />
</head>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是第一个DIV的第一个P标签，我是第一个DIV的第一个P标签</p>
<p>我是第一个DIV的第二个P标签，我是第一个DIV的第二个P标签</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是第二个DIV的第一个P标签，我是第二个DIV的第一个P标签</p>
<p>我是第二个DIV的第二个P标签，我是第二个DIV的第二个P标签</p>
</div>
</div>
</div>
</html>
2.6.Bootstrap响应式布局
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
对应的属性如图所示：
代码示例
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/bootstrap.css" />
<style>
.row div {
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
</style>
</head>
<body>
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs" style="background: red;">✔ 在特别小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-sm">小型</span>
<span class="visible-sm" style="background: red;">✔ 在小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-md">中型</span>
<span class="visible-md" style="background: red;">✔ 在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-lg">大型</span>
<span class="visible-lg" style="background: red;">✔ 在大型设备上可见</span>
</div>
</div>
</div>
</body>
</html>
效果图
2.7.Bootstrap布局组件
Bootstrap 提供了很多可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
2.7.1.字体图标
Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
效果图
示例代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/bootstrap.css" />
</head>
<body>
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>
</body>
</html>
2.7.2.下拉菜单
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
代码示例
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
计算机语言
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">iOS</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Android</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Python</a>
</li>
</ul>
</div>
</body>
2.7.3.Bootstrap 按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
2.7.3.1.基本的按钮组
代码示例
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/bootstrap.css" />
<script type="text/javascript" src="../../../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../../../js/bootstrap.js" ></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
</body>
</html>
2.7.3.2.嵌套下拉菜单
可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当您想让下拉菜单与一系列按钮组合使用时，就会用到这个。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/bootstrap.css" />
<script type="text/javascript" src="../../../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../../../js/bootstrap.js" ></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">下拉链接 1</a>
</li>
<li>
<a href="#">下拉链接 2</a>
</li>
</ul>
</div>
</div>
</body>
</html>
2.7.3.3.输入框组
输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
代码示例
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="请输入邮箱">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="请输入">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>
2.7.3.4.Bootstrap 导航元素
代码示例
<html>
<head>
<meta charset="utf-8">
<title>带有下拉菜单的导航元素</title>
<link rel="stylesheet" href="../../../css/bootstrap.css" />
<script type="text/javascript" src="../../../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
</head>
<body>
<p>带有下拉菜单的导航元素</p>
<ul class="nav nav-pills">
<li class="active">
<a href="#">JavaSE</a>
</li>
<li>
<a href="#">iOS</a>
</li>
<li>
<a href="#">Android</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
JavaWeb <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">SQL</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</li>
<li>
<a href="#">PHP</a>
</li>
</ul>
</body>
</html>
2.7.3.5.分页
分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><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="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
3.BootstrapJavaScript插件
Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。
3.1.概述
3.1.1.引入方式
JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。
建议使用压缩版的JavaScript文件
bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。
插件之间的依赖关系
某些插件和CSS组件依赖于其它插件，如果你是单个引入没个插件的，请确保在文档中检查插件之间的依赖关系，注意，所欲的插件都依赖于jQuery（也就是说，jQuery是必须在所有的插件之前引入页面中），bower.json 文件中列出了Bootstrap所支持的jQuery版本。
3.1.2.过渡效果
过渡效果（Transition）插件提供了简单的过渡效果。
注意：如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。或者，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js
3.1.2.1.模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
注意：如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
代码示例
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
3.1.3.轮播图
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
代码示例
<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" style="text-align: center;">
<div class="item active">
<img src="http://www.7lizhi.com/uploads/allimg/140807/1-140PH33153157.jpg" alt="First slide">
</div>
<div class="item">
<img src="http://www.7lizhi.com/uploads/allimg/140807/1-140PH3343a04.jpg" alt="Second slide">
</div>
<div class="item">
<img src="http://www.7lizhi.com/uploads/allimg/140807/1-140PH3345LO.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
4.案例
4.1.登陆界面
布局
1.左右各一半（col-md-6）
2.右侧是登录系统的注意事项
3.输入框使用输入框组
实现代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").click(function () {
window.location.href="";
});
});
</script>
</head>
<body>
<div class="container" style="height: 500px;width: 500px;margin: 50px auto 50px">
<div class="col-md-12 well" style="border-right:1px solid #ddd;">
<h3>用户登录</h3>
<div style="background-color: #d5d5d5;width: 100%;height: 1px"></div>
<form action="" method="post">
<div class="input-group" style="margin-top: 10px">
<span class="input-group-addon" ><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="请输入用户名/手机号/电子邮箱">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" ><span class="glyphicon glyphicon-lock"></span></span>
<input type="text" class="form-control" placeholder="请输入密码">
</div>
<br>
<div class="table-bordered text-center" style="height: 35px;padding-top: 5px">
<input type="radio" name="profession" id="p1" value="老师"/>老师
<input type="radio" name="profession" id="p2" value="学生"/>学生
<input type="radio" name="profession" id="p3" value="管理员"/>管理员
</div>
<br>
<input type="submit" value="登录" id="login" class="btn btn-success" style="width: 100%"/>
</form>
<br>
<button id="register" class="btn btn-success" style="width: 100%">注册</button>
</div>
</div>
</body>
</html>
