Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】

bootstrap框架

下载bootstrap：
在项目中使用bootstrap：
Bootstrap3.0（基于jQuery）
- 1、表单
- 2、按钮、
- 10、网格系统
- - 10.1
  - 10.2偏移列
  - 10.3嵌套列
  - 10.4列排序
- 3、输入框组、
- 4、导航栏、
- 5、下拉菜单、
- 6、滚动监听、
- 7、提示工具、
- 8、折叠、
- 9、轮播
- 10、UI编辑器

下载bootstrap：

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

Bootstrap 下载
您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本教程编写时，使用的是最新版（Bootstrap 3）。

文件结构
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

已编译的 Bootstrap 文件结构
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

Bootstrap 源代码结构
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

在项目中使用bootstrap：

<!DOCTYPE html>
<html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --><!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="https://code.jquery.com/jquery.js"></script><!-- 包括所有已编译的插件 --><script src="js/bootstrap.min.js"></script></body>
</html>

或者

国内推荐使用 Staticfile CDN 上的库：<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

总结：bootstrap的使用有两种方式，一是官网下载bootstrap把文件放到项目中，二是用CDN的方式引入

Bootstrap3.0（基于jQuery）

1、表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父 <form> 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class =“form-control” 。

<form role="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>

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

<form class="form-inline" role="form"><div class="form-group"><label class="sr-only" for="name">名称</label><input type="text" class="form-control" id="name" placeholder="请输入名称"></div><div class="form-group"><label class="sr-only" for="inputfile">文件输入</label><input type="file" id="inputfile"></div><div class="checkbox"><label><input type="checkbox">请打勾</label></div><button type="submit" class="btn btn-default">提交</button>
</form>

2、按钮、

您可以 通过 JavaScript 启用按钮（Button）插件，如下所示： $(‘.btn’).button()

方法

下面是一些按钮（Button）插件中有用的方法：

方法	描述	实例
button(‘toggle’)	切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。	$().button(‘toggle’)
.button(‘loading’)	当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。	$().button(‘loading’)
.button(‘reset’)	重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。	$().button(‘reset’)
.button(string)	该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。	$().button(string)

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example"><button type="button" class="btn btn-primary">原始</button>
</div><h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example"><button type="button" class="btn btn-primary" data-loading-text="Loading...">原始</button>
</div><h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example"><button type="button" class="btn btn-primary" data-loading-text="Loading...">原始</button>
</div><h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">请点击我
</button>
<script>
$(function () {$("#myButtons1 .btn").click(function(){$(this).button('toggle');});});$(function() { $("#myButtons2 .btn").click(function(){$(this).button('loading').delay(1000).queue(function() {});        });});   $(function() { $("#myButtons3 .btn").click(function(){$(this).button('loading').delay(1000).queue(function() {$(this).button('reset');});        });});  $(function() { $("#myButton4").click(function(){$(this).button('loading').delay(1000).queue(function() {$(this).button('complete');});        });});
</script>

10、网格系统

10.1

响应式、移动设备优先，一般分为12列

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

/* 以下在less条件下使用*/
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） */
/*CSS中的media查询 @media screen (max-width:960px){....}*/
@media (min-width: @screen-sm-min) { ... }/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px
（一个列的每边分别 15px）	30px
（一个列的每边分别 15px）	30px
（一个列的每边分别 15px）	30px
（一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-sm-3 col-md-6 col-lg-8"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p></div><div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p><p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p></div></div>
</div>

10.2偏移列

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。

<div class="container"><h1>Hello, world!</h1><div class="row" ><div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div></div>
</div>

10.3嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第一列</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第二列 - 分为四个盒子</h4><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p></div></div></div></div>
</div>

10.4列排序

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

<div class="container"><h1>Hello, world!</h1><div class="row"><p>排序前</p><div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在左边</div><div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在右边</div></div><br><div class="row"><p>排序后</p><div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在左边</div><div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在右边</div></div>
</div>

css组件

3、输入框组、

输入框组。输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

向 .form-control 添加前缀或后缀元素的步骤如下：

把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
把该 <span> 放置在 <input> 元素的前面或者后面。

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可

<div style="padding: 100px 100px 10px;"><form class="bs-example bs-example-form" role="form"><div class="row"><div class="col-lg-6"><div class="input-group"><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">功能</a></li><li><a href="#">另一个功能</a></li><li><a href="#">其他</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></div><!-- /btn-group --><input type="text" class="form-control"></div><!-- /input-group --></div><!-- /.col-lg-6 --><br><div class="col-lg-6"><div class="input-group"><input type="text" class="form-control"><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu pull-right"><li><a href="#">功能</a></li><li><a href="#">另一个功能</a></li><li><a href="#">其他</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></div><!-- /btn-group --></div><!-- /input-group --></div><!-- /.col-lg-6 --></div><!-- /.row --></form>
</div>

4、导航栏、

创建一个标签式的导航菜单：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>//如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可
<ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>//class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。
<ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>//两端对齐的导航
<ul class="nav nav-pills nav-justified"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
添加带有 .dropdown-menu class 的无序列表。

<p>带有下拉菜单的标签</p><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li><li><a href="#">PHP</a></li></ul>

（js插件）

5、下拉菜单、

//您可以切换下拉菜单（Dropdown）插件的隐藏内容：//通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：
<div class="dropdown"><a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">...</ul>
</div>
如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：<div class="dropdown"><a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">下拉菜单（Dropdown） <span class="caret"></span></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">...</ul>
</div>
//通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：
$('.dropdown-toggle').dropdown()

<nav class="navbar navbar-default" role="navigation"><div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand" href="#">菜鸟教程</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></div>
</nav>

6、滚动监听、

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example"><ul class="nav nav-tabs">...</ul>
</div>
...
</body>
通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：
$('body').scrollspy({ target: '.navbar-example' })

.scrollspy(‘refresh’)：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法。

$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })


activate.bs.scrollspy	每当一个新项目被滚动监听激活时，触发该事件。	$(‘#myScrollspy’).on(‘activate.bs.scrollspy’, function () { // 执行一些动作… })

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation"><div class="container-fluid"> <div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><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="#">教程名称</a></div><div class="collapse navbar-collapse bs-js-navbar-scrollspy"><ul class="nav navbar-nav"><li class="active"><a href="#ios">iOS</a></li><li><a href="#svn">SVN</a></li><li class="dropdown"><a href="#" id="navbarDrop1" class="dropdown-toggle"data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu" role="menu"aria-labelledby="navbarDrop1"><li><a href="#jmeter" tabindex="-1">jmeter</a></li><li><a href="#ejb" tabindex="-1">ejb</a></li><li class="divider"></li><li><a href="#spring" tabindex="-1">spring</a></li></ul></li></ul></div></div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"style="height:200px;overflow:auto; position: relative;"><div class="section"><h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">&times; 删除该部分</a></small></h4><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 AppleTV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p></div><div class="section"><h4 id="svn">SVN<small></small></h4><p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p></div><div class="section"><h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">&times; 删除该部分</a></small></h4><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p></div><div class="section"><h4 id="ejb">EJB</h4><p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p></div><div class="section"><h4 id="spring">Spring</h4><p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p><p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p></div>
</div>
<span id="activeitem" style="color:red;"></span>
<script>$(function(){removeSection = function(e) {$(e).parents(".section").remove();$('[data-spy="scroll"]').each(function () {var $spy = $(this).scrollspy('refresh')});}$("#myScrollspy").scrollspy();$('#myScrollspy').on('activate.bs.scrollspy', function () {var currentItem = $(".nav li.active > a").text();$("#activeitem").html("目前您正在查看 - " + currentItem);})});
</script>

//水平监听
<!-- The navbar: used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...<ul class="nav navbar-nav"><li><a href="#section1">Section 1</a></li>...
</nav><!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12"><!-- Section 1 --><div id="section1"><h1>Section 1</h1><p>Try to scroll this page and look at the navigation bar while scrolling!</p></div>...
</div>//垂直监听
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"><div class="container"><div class="row"><nav class="col-sm-3" id="myScrollspy"><ul class="nav nav-pills nav-stacked"><li><a href="#section1">Section 1</a></li>...</ul></nav><div class="col-sm-9"><div id="section1"><h1>Section 1</h1><p>Try to scroll this page and look at the navigation list while scrolling!</p></div>...</div></div></div></body>

7、提示工具、

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
```
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
```
通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$(‘#identifier’).tooltip(options)

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

选项名称	类型/默认值	Data 属性名称	描述
animation	boolean默认值：true	data-animation	提示工具使用 CSS 渐变滤镜效果。
html	boolean默认值：false	data-html	向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string	function默认值：top	data-placement
selector	string默认值：false	data-selector	如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title	string	function默认值：‘’	data-title
trigger	string默认值：‘hover focus’	data-trigger	定义如何触发提示工具： **click
delay	number	object默认值：0	data-delay

delay: { show: 500, hide: 100 } |
| container | string | false默认值：false | data-container | 向指定元素追加提示工具。
实例： container: ‘body’ |

<div style="padding: 100px 100px 10px;">这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"title="show">Tooltip 方法 show</a>.这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"data-placement="left" title="hide">Tooltip 方法 hide</a>.这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"data-placement="top" title="destroy">Tooltip 方法 destroy</a>.这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"data-placement="bottom" title="toggle">Tooltip 方法 toggle</a>.<br><br><br><br><br><br><p class="tooltip-options" >这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2</h2>">Tooltip 方法 options</a>.</p><script>
$(function () { $('.tooltip-show').tooltip('show');});$(function () { $('.tooltip-hide').tooltip('hide');});$(function () { $('.tooltip-destroy').tooltip('destroy');});$(function () { $('.tooltip-toggle').tooltip('toggle');});$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>

8、折叠、

Class	描述
.collapse	隐藏内容。
.collapse.in	显示内容。
.collapsing	当过渡效果开始时被添加，当过渡效果完成时被移除。

通过 data 属性：向元素添加 data-toggle=“collapse” 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent=“#selector”。
通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

$(‘.collapse’).collapse()

选项名称	类型/默认值	Data 属性名称	描述
parent	selector默认值：false	data-parent	如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggle	boolean默认值：true

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><div class="panel panel-success"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><div class="panel panel-info"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><div class="panel panel-warning"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法</a></h4></div><div id="collapseFour" class="panel-collapse collapse"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div>
</div>
<script>
$(function () { $('#collapseFour').collapse({toggle: false})});$(function () { $('#collapseTwo').collapse('show')});$(function () { $('#collapseThree').collapse('toggle')});$(function () { $('#collapseOne').collapse('hide')});
</script>

9、轮播

Bootstrap 轮播**（Carousel）**插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
- 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
- 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=“2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。
- data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放。
通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
```
$('.carousel').carousel()
```

选项名称	类型/默认值	Data 属性名称	描述
interval	number默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string默认值：“hover”	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean默认值：true	data-wrap	轮播是否连续循环。

下面是一些轮播（Carousel）插件中有用的方法：

方法	描述	实例
.carousel(options)	初始化轮播为可选的 options 对象，并开始循环项目。	$(‘#identifier’).carousel({ interval: 2000 })
.carousel(‘cycle’)	从左到右循环轮播项目。	$(‘#identifier’).carousel(‘cycle’)
.carousel(‘pause’)	停止轮播循环项目。	$(‘#identifier’).carousel(‘pause’)
.carousel(number)	循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。	$(‘#identifier’).carousel(number)
.carousel(‘prev’)	循环轮播到上一个项目。	$(‘#identifier’).carousel(‘prev’)
.carousel(‘next’)	循环轮播到下一个项目。	$(‘#identifier’).carousel(‘next’)

<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="/wp-content/uploads/2014/07/slide1.png" alt="First slide"></div><div class="item"><img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"></div><div class="item"><img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a><!-- 控制按钮 --><div style="text-align:center;"><input type="button" class="btn start-slide" value="Start"><input type="button" class="btn pause-slide" value="Pause"><input type="button" class="btn prev-slide" value="Previous Slide"><input type="button" class="btn next-slide" value="Next Slide"><input type="button" class="btn slide-one" value="Slide 1"><input type="button" class="btn slide-two" value="Slide 2">            <input type="button" class="btn slide-three" value="Slide 3"></div>
</div>
<script>
$(function(){// 初始化轮播$(".start-slide").click(function(){$("#myCarousel").carousel('cycle');});// 停止轮播$(".pause-slide").click(function(){$("#myCarousel").carousel('pause');});// 循环轮播到上一个项目$(".prev-slide").click(function(){$("#myCarousel").carousel('prev');});// 循环轮播到下一个项目$(".next-slide").click(function(){$("#myCarousel").carousel('next');});// 循环轮播到某个特定的帧 $(".slide-one").click(function(){$("#myCarousel").carousel(0);});$(".slide-two").click(function(){$("#myCarousel").carousel(1);});$(".slide-three").click(function(){$("#myCarousel").carousel(2);});});
</script>

事件	描述	实例
slide.bs.carousel	当调用 slide 实例方法时立即触发该事件。	$(‘#identifier’).on(‘slide.bs.carousel’, function () { // 执行一些动作… })
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件。	$(‘#identifier’).on(‘slid.bs.carousel’, function () { // 执行一些动作… })

10、UI编辑器

https://www.runoob.com/bootstrap/bootstrap-ui-editor.html