BootStrap 教程

查看目录版

查看原版

BootStrap 简介

BootStrap 最大的优势是响应式布局，发展至今，最新的版本是 BootStrap 4 版本。

BootStrap 通过一系列 .css ，即可完成对页面样式的设置。

BootStrap 自带12种插件，调用插件有2种方式：

  • 通过 data 属性 API ： 

  • <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-meun" role="menu" aria-labelledby="dLabel">
      ...
  </ul>
</div>

  • 通过 JavaScript ：

  • $('.dropdown-toggle').dropdown();

所以， BootStrap 非常容易上手，你只需使用 .CSS 即可完成大部分功能，而不用编写 JS 代码。

BootStrap 环境安装

HTML 模板结构

BootStrap 是基于 jQuery 的插件，所以，在使用 BootStrap 之前，必须先添加对 jQuery 的引用，页面布局如下：

  • <!DOCTYPE html>
<html>
  <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim 和 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>

注意 ： 未来 BootStrap 5 将会删除对 jQuery 依赖，这项工作也正在进行中 (https://github.com/twbs/bootstrap/pull/23586)；

安装方式

和 jQuery 类似， BootStrap 提供了2种安装方式；

  • 下载 BootStrap ；

    Download BootStrap ： 包含 BootStrap CSS，JavaScritp 和 字体 的预编译的压缩版本，不包含文档和最初的源代码；

    Download Source ： 下载源代码； - 如果使用的是未编译的源代码，需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件， BootStrap 官方只支持 Recess，这是 Twitter 基于 less.js 的演示；

  • BootStrap CDN ；

  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- 可选的Bootstrap主题文件（一般不使用） -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>

BootStrap CSS

BootStrap CSS 概览

HTML 5 文档类型(Doctype)

BootStrap 使用了一些 HTML5 元素 和 CSS 属性，所以必须使用 HTML5 文档类型；

  • html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html>

移动设备优先

BootStrap 3 开始，默认的 CSS 就是移动设备优先，然后才是桌面设备。

  • html <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 或者 只能1.0，并禁止缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

响应式图像

  • html <img src="..." class="img-responsive" alt="响应式图像">
  • css .img-responsive { display: inline-block; height: auto; max-width: 100%; }

全局显示，排版和链接

基本的全局显示

BootStrap 3 使用 body {margin: 0} 来移除 body 的边框；

body 的设置：

  • css body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; }
排版

使用 @font-family-base，@font-size-base 和 @line-height-base 属性作为排版样式；

链接样式

通过属性 @link-color 设置全局链接的颜色；

链接的默认样式，如下：

  • css a:hover,a:focus { color: #2a6494; text-decoration: underline; } a:focus: { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

避免跨浏览器的不一致

BoooStrap 使用 Normalize 来建立跨浏览器的一致性；

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性；

容器

  • BootStrap 3 使用 .container class 来包裹页面的内容；

  • BootStrap 4 新增了 .container-fluid class 来包裹页面内容；

  • 区别：

    • container - 固定宽度(有内边距)，响应式；
    • container-fluid - 100%宽度，占据全部视口(viewport)的容器；
    • html <div class="container"> ... </div>
  • css /* .container 默认样式 */ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

BootStrap 浏览器/设备支持

下表为 BootStrap 支持的最新版本的浏览器和平台：

Chrome Firefox IE Opera Safari
Android YES YES 不适用 NO 不适用
iOS YES 不适用 不适用 NO YES
Mac OS X YES YES 不适用 YES YES
Windows YES YES YES* YES NO
  • * ：BootStrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器；
  • 注意 ： BootStrap 4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器；

BootStrap 统一的规则

BootStrap 中有很多标签和控件，使用相同的后缀来表示相同的颜色，比如：

  • 标签： text，button，a，tr，input，bg 等；
  • 颜色 ： default，primary，success，info，warning，danger；

BootStrap 中大部分插件的事件，都使用了 过去式 和 过去分词 的命名规则，表示 刚调用A方法时触发 和 A方法执行完后触发，比如：

事件 描述 实例
show.bs.modal 在调用show方法后触发。 $("#identifier").on('show.bs.modal',function(){
// 执行一些动作...})
shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过度效果完成)。 $("#identifier").on('shown.bs.modal',function(){
// 执行一些动作...})

BootStrap 网格系统

  • BootStrap 网格系统把页面分成12列，然后重新排列页面；

  • BootStrap 3 是移动设备优先，然后扩展到大屏幕设备(笔记本电脑，台式电脑)， BootStrap 4 网格系统是响应式的，列会根据屏幕大小自动重新排列；

  • 网格系统必须放在 .container / .container-fluid ， .row ， .col-**-* class内；

  <div class="container">
      <div class="row">
          <div class="col-xs-4 col-sm-6">111</div>
          <div class="col-xs-4 col-sm-6">222</div>
          <div class="col-xs-4 col-sm-12">333</div>
      </div>
  </div>
  • 下表总结了 BootStrap 网格系统如何跨多个设备工作：

| | 超小设备手机(<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 |

响应式的列重置

  • 使用 .clearfix class 和 响应式实用工具 来解决，如下：

  • <div class="container">
  <div class="row">
      <div class="col-xs-6 col-sm-3">...</div>
      <div class="col-xs-6 col-sm-3">...</div>
      <!-- .clearfix class -->
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3">...</div>
      <div class="col-xs-6 col-sm-3">...</div>
  </div>
</div>

列偏移

  • 在列的左边增加 n 列，使整体往右偏移 n 列， n 的范围是 1 到 11；

  • 使用 .col-*-offset-* class；

  • <div class="container">
  <div class="row">
      <div class="col-xs-6 col-xs-offset-3">
          1234
      </div>
  </div>
</div>

列排序

  • .col-*-push-* ： 从左 往右 推 n 列；

  • .col-*-pull-* ： 从右 往左 拉 n 列；

  • <div class="container">
  <div class="row">
      <p>排序前</p>
      <div class="col-md-4">我在左边</div>
      <div class="col-md-8">我在右边</div>
  </div>
  <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8">我在右边</div>
      <div class="col-md-8 col-md-pull-4">我在左边</div>
  </div>
</div>
push 与 offset 的不同
  • offset 是左侧 补充 n 列，右边的 会 自动往右推后 ；
  • push 是从左往右 推 n 列，右边的 不会 动；
  • 所以：
    • 如果作用于最后一列，效果一样；
    • 如果右侧还有列：offset 整体往右推，push 会与右边的列 重叠 (右侧列不动)；

列嵌套

  • 在要嵌套的网格内，添加一个新的 .row，并在一个已有的 .col-*-* 列内添加一组 .col-*-* 列。新行重新分隔的列数不超过12(但没要求必须占满12列)；

  • <div class="container">
  <div class="row">
      <div class="col-md-4">第一列</div>
      <div class="col-md-8">
          <p>第二列</p>
          <div class="row">
              <div class="col-md-3">2.1列</div>
              <div class="col-md-6">2.2列</div>
          </div>
      </div>
  </div>
</div>

BootStrap 排版

使用 BootStrap 的排版特性，可以创建标题，段落，列表及其他内联元素。

标题

  • h1 ~ h6 ；
  • 内联子标题 ： small ；

引导主题副本

  • lead ： 更大更粗，行高更高的文本；

强调

  • HTML 默认强调标签：small ，strong ， em ；

  • BootStrap 强调文本的类：

  • <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>

缩写

  • abbr ： title 为缩写内容(描述)；
  • 使用 .initialism class，得到更小字体的文本(不是描述)；

地址

  • address ： 默认为 display:block ；

引用

  • blockquote ；
  • 使用 small 标签来标识引用的来源；
  • 使用 .pull-right class 来向右对齐；

列表

  • 有序列表；
  • 无序列表；
    • 使用 .list-unstyled class 来移除样式；
    • 使用 .list-inline class 来把所有列表项放在同一行中；
  • 自定义列表：dl，dt，dd；
    • 使用 .dl-horizontal 可以把 dt 和 dd 并排显示；

更多实例

  • | 类 | 描述 | | ------------------- | ------------------------------------------------------------ | | .lead | 使段落突出显示 | | .small | 设置小本文(为父文本的 85% 大小) | | .text-left | 设置文本左对齐 | | .text-center | 设置文本居中对齐 | | .text-right | 设置文本右对齐 | | .text-justify | 设置文本，段落中超出屏幕部分文字 自动换行 | | .text-nowrap | 设置文本，段落中超出屏幕部分文字 不自动换行 | | .text-lowercase | 设置文本小写 | | .text-uppercase | 设置文本大写 | | .text-capitalize | 设置单词首字母大写 | | .initialism | 显示在 <abbr> 元素中的文本以 小号字体展示 | | .blockquote-reverse | 设置引用右对齐 | | .list-unstyled | 移除默认的列表样式，使列表项左对齐(仅适用于直接子列表项，若要移除嵌套列表项，需在嵌套的列表中使用该样式) | | .list-inline | 将所有列表项放置在同一行 | | .dl-horizontal | 设置了浮动和偏移，使 <dt> 和 <dd> 并排显示 | | .pre-scrollable | 使 <pre> 元素可以滚动 |

BootStrap 代码

BootStrap 有 2 种方式显示代码：

  • code 标签 ： 内联显示代码；
  • pre 标签 ： 独立的块元素显示代码，或者代码有多行；

注意 ： 请确保使用 pre 和 code 标签时， 开始和结束标签使用了 unicode 变体 ： < 和 *> * 。

  • html <p> <code>&lt;header&gt;</code> 作为内联元素被包围。 </p> <p> 如果需要把代码显示为一个独立的块元素，请使用<pre>标签：</pre> </p> <pre> &lt;article&gt; &lt;h1&gt;Article Heading&lt;/h1&gt; &lt;/article&gt; </pre>

BootStrap 表格

表格布局

  • | 标签 | 描述 | | ----------- | ------------------------------------------------------------ | | <table> | 为表格添加基础样式 | | <thead> | 表格标题行的容器元素（<tr>），用来标识表格列 | | <tbody> | 表格主体中的表格行的容器元素（<tr>） | | <tr> | 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>） | | <td> | 默认的表格单元格 | | <th> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 | | <caption> | 关于表格存储内容的描述或总结 |

表格类

  • 下表样式用于表格中：

| 类 | 描述 | | ---------------- | ----------------------------------------------- | | .table | 为任意 <table> 添加基本样式(只有横向分隔线) | | .table-striped | 在 <tbody> 内添加斑马线形式的条纹(IE8 不支持) | | .table-bordered | 为所有表格的单元格添加边框 | | .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 | | .table-condensed | 让表格更加紧凑 |

<tr>，<th> 和 <td> 类

  • 下表样式用于表格的行或者单元格：

| 类 | 描述 | | -------- | --------------------------------- | | .active | 将悬停的颜色应用在 行或者单元格上 | | .success | 表示成功的操作 | | .info | 表示信息变化的操作 | | .warning | 表示警告的操作 | | .danger | 表示危险的操作 |

响应式表格

  • 通过把任意的 .table class 包在 .table-responsive class 内，可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时，将没有任何差别；

  • <div class="table-responsive">
  <div class="table">
      <caption>响应式表格布局</caption>
      <thead>
          <tr>
              <th>产品</th>
              <th>付款日期</th>
              <th>状态</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>产品1</td>
              <td>日期1</td>
              <td>状态1</td>
          </tr>
          <tr>
              <td>产品2</td>
              <td>日期2</td>
              <td>状态2</td>
          </tr>
      </tbody>
  </div>
</div>

BootStrap 表单

表单布局

BootStrap 提供了下列类型的表单布局：

  • 垂直表单（默认）- 竖排列；
  • 内联表单 - 水平排列；
  • 水平表单 - label + 控件，竖排列；
垂直或基本表单

创建步骤：

  • 向父 <form> 元素添加 role="form" ；

  • 把标签和空间放在一个带有 .form-group class 的 <div> 中。这是获取最佳间距所必须的；

  • 向所有的文本元素 <input>，<textarea> 和 <select> 添加 .form-control class；

  • <body>
  <form role="form">
      <div class="form-group">
          <label for="name">名称</label>
          <input type="text" class="form-control" id="name" placeholder="请输入名称">
      </div>
      <button type="submit" class="btn btn-defalut">
        提交     
      </button>
  </form>
</body>
内联表单

创建步骤：

  • 向父 <form> 标签添加 .form-inline class ；
水平表单

创建步骤：

  • 向父 <form> 元素添加 .form-horizontal class ；

  • 把标签和控件放在一个带有 .form-group class 的 <div> 中；

  • 向标签添加 .control-label class ；

  • <body>
  <form class="form-horizontal" role="form">
      <div class="form-group">
          <label for="firstname" class="col-sm-2 control-label">名字</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">登录</button>
          </div>
      </div>
  </form>
</body>

支持的表单控件

输入框（Input）
  • BootStrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括 text，password，datetime，datetime-local，date，month，time，week，number，email，url，search，tel 和 color，使用 type 声明；
文本框（Textarea）
复选框（Checkbox）和单选框（Radio）
  • 使用 .checkbox-inline 或 .radio-inline class 使它们显示在同一行上；
选择框（Select）
  • 默认只能选这一个选项；
  • 使用 mulitiple="mulitiple" 允许用户选择多个选项；
静态控件
  • 当需要在一个 水平表单 内的表单标签后放置纯文本时，在 <p> 上使用 .form-control-static class ；
表单控件状态
输入框焦点
  • focus ： 输入框的轮廓会被移除，同时应用 box-shadow ；
禁用的输入框 input
  • 使用 disabled 属性；
禁用的字段集 fieldset
  • 使用 disabled 属性，禁用 <fieldset> 内的所有控件；
验证状态

  • 对父元素添加 .has-warning，.has-error 或 .has-success class 即可；

  • <div class="form-group has-success">
  <label class="control-label" for="inputSuccess">输入成功</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>
表单控件大小
  • 使用 .input-lg，input-sm class 来设置表单的高度；
  • 使用 .col-lg-* class 来设置表单的宽度；
表单帮助文本

  • BootStrap 表单控件可以在输入框 input 上有一个块级帮助文档，占用整个宽度；

  • 在 <input> 后使用 .help-block class 即可；

  • <form role="form">
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">一个较长的帮助文档块，超过一行，需要扩展到下一行。本实例中的帮助文档总共有两行。</span>
</form>

BootStrap 按钮

按钮样式

  • 任何带有 .btn class 的元素都会继承 圆角灰色按钮 的默认样式；

  • 以下样式可用于 <a>，<button> 或 <input> 上；

| 类 | 描述 | 按钮类型 | | ------------ | -------------------------------------- | -------- | | .btn | 为按钮添加基本样式 | 基本样式 | | .btn-default | 默认/标准样式 | 按钮样式 | | .btn-primary | 原始按钮样式(未被操作) | 按钮样式 | | .btn-success | 表示成功的操作 | 按钮样式 | | .btn-info | 表示要弹出信息的按钮 | 按钮样式 | | .btn-warning | 表示要谨慎操作的按钮 | 按钮样式 | | .btn-danger | 表示危险操作的按钮 | 按钮样式 | | .btn-link | 让按钮看起来像个链接(仍然保留按钮行为) | 按钮样式 | | .btn-lg | 制作一个大按 | 按钮大小 | | .btn-sm | 制作一个小按钮 | 按钮大小 | | .btn-xs | 制作一个超小按钮 | 按钮大小 | | .btn-block | 块级按钮(拉伸至父元素100%的宽度) | 按钮大小 | | .active | 按钮被点击 | 按钮状态 | | .disabled | 禁用按钮 | 按钮状态 |

按钮标签

  • 可以在 <a>，<button> 或 <input> 元素上使用按钮 class，但建议在 <button> 元素上使用，避免跨浏览器的不一致性问题；

BootStrap 图片

  • BootStrap 为图片添加了 4 种简单的样式：

  • .img-rounded - 添加 border-radius:6px 来获得图片圆角；

  • .img-circle - 添加 border-radius:500px 来让整个图片变成圆形；

  • .img-thumbnail - 添加一些内边距(padding) 和一个灰色的边框；

  • .img-responsive - 响应式图片(将很好的扩展到父元素)；

  • .img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

BootStrap 辅助类

文本

  • 设置不同的文本颜色，如果文本是个链接，鼠标移动到文本上会变暗；

| 类 | 描述 | | ------------- | ------------------------- | | .text-muted | 减弱的文本样式(浅灰色) | | .text-primary | 原始文本样式(浅蓝色) | | .text-success | 成功的文本样式(绿色) | | .text-info | 信息的文本样式(棕蓝色) | | .text-warning | 警告的文本样式(黄色) | | .text-danger | 危险/错误的文本样式(红色) |

背景

  • 设置不同的背景颜色，如果文本是个链接，鼠标移动到文本上会变暗；

| 类 | 描述 | | ----------- | ------------------------- | | .bg-primary | 原始背景颜色(棕蓝色) | | .bg-success | 成功背景颜色(绿色) | | .bg-info | 信息背景颜色(浅蓝色) | | .bg-warning | 警告背景颜色(浅黄色) | | .bg-danger | 危险/错误背景颜色(浅红色) |

其他

  • 其他类

| 类 | 描述 | | ------------------ | ------------------------------------------------------------ | | .pull-left | 元素浮动到左边 | | .pull-right | 元素浮动到右边 | | .center-block | 设置元素为 display:block 并居中显示 | | .clearfix | 清除浮动 | | .show | 强制元素显示 | | .hidden | 强制元素隐藏 | | .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素 | | .sr-only-focusable | 与.sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) | | .text-hide | 将页面元素所包含的文本内容替换为背景图 | | .close | 显示关闭按钮 | | .caret | 显示下拉式功能 |

更多实例

关闭图标

  • 使用 .close class；

  • <body>
  <p>关闭图标实例</p>
  <button type="button" class="close" aria-hidden="true">
      &times;
  </button>
</body>
插入符

  • 使用带 .caret class 的 <span> 元素；

  • <body>
  <p>插入符实例</p>
  <span class="caret"></span>
</body>
快速浮动
  • .pull-left class - 元素向左浮动；
  • .pull-right class - 元素向右浮动；
清除浮动

  • 清除父元素浮动，让里面 浮动的子元素 包含在父元素内 (不清除的话，子元素可能会浮动在父元素上，不包含在父元素内)；

  • 父元素使用 .clearfix class；

  • <body>
  <div class="clearfix">
      <div class="pull-left">向左快速浮动</div>
      <div class="pull-right">向右快速浮动</div>
  </div>
</body>
内容居中
  • 使用 .center-block class 来居中元素；
显示和隐藏元素
  • 使用 .show 和 .hidden 来强制设置元素显示或隐藏(包括屏幕阅读器)；
屏幕阅读器
  • 使用 .sr-only class 来设置元素对 除屏幕阅读器以外 的所有设备隐藏；

BootStrap 响应式实用工具

BootStrap 响应式实用工具

  • 响应式实用工具目前只适用于 块和表切换；

| | 超小屏幕 手机(<768px) | 小屏幕 平板(>=768px) | 中等屏幕 桌面(>=992px) | 大屏幕 桌面(>=1200px) | | ------------- | --------------------- | -------------------- | ---------------------- | --------------------- | | .visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 | | .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 | | .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 | | .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 | | .hidden-xs | 隐藏 | 可见 | 可见 | 可见 | | .hidden-sm | 可见 | 隐藏 | 可见 | 可见 | | .hidden-md | 可见 | 可见 | 隐藏 | 可见 | | .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |

  • 从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了 三种变体，对应如下：

| 类组 | CSS display | | ----------------------- | ---------------------- | | .visible--block | display: block; | | .visible--inline | display: inline; | | .visible-*-inline-block | display: inline-block; |

  • 从 v3.2.0 版本起，.visible-* 不建议使用，因为它们与 .visible-*-block 大体相同；

打印类

  • 下表列出了打印类，使用这些切换打印内容；

| class | 浏览器 | 打印机 | | --------------------------- | ------ | ------ | | .visible-print-block | 隐藏 | 可见 | | .visible-print-inline | 隐藏 | 可见 | | .visible-print-inline-block | 隐藏 | 可见 | | .hidden-print | 可见 | 隐藏 |

BootStrap 布局组件

BootStrap 字体图标

  • 使用 <span> 标签显示图标；

  • <span class="glyphicon glyphicon-search"></span>

BootStrap 下拉菜单

  • 只需要在 .dropdown class 内添加下拉菜单即可；

  • 通过向 .dropdown-menu class 添加 .pull-right 来右对齐下拉菜单；

  • 使用 .dropdown-header class 在下拉菜单的标签区域添加标题；

  • <body>
  <div class="dropdown">
      <botton type="botton" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题    <span class="caret"></span></botton>
      <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation" class="dropdown-header">下拉标题菜单</li>
          <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">Java</a>
          </li>
          <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
          </li>
      </ul>
  </div>
</body>

BootStrap 按钮组

  • 按钮组允许多个按钮堆叠在同一行上，同一列也可；

| Class | 描述 | | ------------------------------------------- | ------------------------------------------------------------ | | .btn-group | 该 class 用于形成基本的按钮组。
在 .btn-group 中放置一系列带有 .btn class 的按钮。 | | .btn-toolbar | 该 class 有助于把几组 .btn-group 结合到一个 .btn-toolbar 中，一般获得更复杂的组件。 | | .btn-group-lg，.btn-group-sm，.btn-group-xs | 这些 class 用于调整整个按钮组的大小，而不是单个按钮的大小。 | | .btn-group-vertical | 该 class 让一组按钮处置堆叠显示，而不是水平显示。 |

  • html <div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div>
  • html <div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
  • html <div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
  • html <div class="btn-group-vertical"> ... </div>

BootStrap 按钮下拉菜单

BootStrap 按钮下拉菜单

  • 只需在一个 .btn-group class 中放置按钮和下拉菜单即可；也可使用 <span class="caret"></span> 来指示按钮作为下拉菜单；

  • <body>
  <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" role="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>
</body>

分割的按钮下拉菜单

  • 左边是普通按钮，右边是下拉菜单；

  • <body>
  <div class="btn-group">
      <!-- 此处增加1个普通按钮 -->
      <button type="button" class="btn btn-default">默认</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          默认 <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="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>
</body>

下拉菜单的大小

  • 在 <button> 的 class 上添加 .btn-lg，.btn-sm，.btn-xs class 来改变下拉菜单(按钮)的大小；

按钮上拉菜单

  • 向父 .btn-group 容器添加 .dropup class 即可；

  • <body>
  <div class="btn-group dropup">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          默认 <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="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>
</body>

BootStrap 输入框组

BootStrap 输入框组描述

  • 扩展自 表单控件；
  • 使用输入框组，可以很容易的向基于文本的输入框添加作为前缀和后缀的文本或按钮；
  • 可以在输入域添加一些公共的元素，比如美元符号 $ ，邮箱标记 @ 等；

输入框组的大小

  • 通过向 .input-group class 添加相对表单大小的 class (比如 .input-group-lg，.input-group-sm，.input-group-xs) 来改变输入框组的大小。输入框中的内容大小会自动调整；

文本输入框组

向 .form-control class 添加前缀或后缀的步骤如下(文本输入框组)：

  • 把前缀或后缀放在一个带有 .input-group class 的 <div> 中；

  • 在相同的 <div> 内，在 .input-group-addon class 的 <span> 内放置额外的内容；

  • 把该 <span> 放置在 <input> 元素的前面或后面；

  • <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="twitterhandle">
  </div>
</form>

按钮输入框组

  • 使用 .input-group-btn 代替 .input-group-addon class，其他类似；
普通按钮 - 输入框组

  • 使用 .input-group-btn 代替 .input-group-addon class；

  • <form class="bs-example bs-example-form" role="form">
  <div class="row">
      <div class="col-lg-6">
          <div class="input-group">
              <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                      Go!
                  </button>
              </span>
              <input type="text" class="form-control">
          </div>
      </div>
      <div class="col-lg-6">
          <div class="input-group">
              <input type="text" class="form-control">
              <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                      Go!
                  </button>
              </span>
          </div>
      </div>
  </div>
</form>
下拉菜单按钮 - 输入框组

  • 只要在 .input-group-btn class 中包裹按钮和下拉菜单即可；

  • <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>
</div>
分割的下拉菜单按钮 - 输入框组

  • 与 下拉菜单按钮 - 输入框组 类似，只是前面加了一个按钮；

  • <div class="input-group">
  <div class="input-group-btn">
      <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
          <span class="caret"></span>
          <span class="sr-only">切换下拉菜单</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>
</div>

单选框和复选框输入框组

  • 可以把单选框或复选框作为输入框组的前缀或后缀，语法和 文本输入框组 一样；

BootStrap 导航元素

表格导航或标签

  • 添加 .nav .nav-tabs ；

  • <body>
  <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>
  </ul>
</body>

胶囊式的导航菜单

  • 用 .nav-pills 替代 .nav-tabs ，其他一样；
  • 在 .nav .nav-pills 的同时添加 .nav-stacked class，让胶囊垂直堆叠；

两端对齐的导航

  • 在 .nav .nav-** 的同时添加 .nav-justified class，让导航菜单与父元素灯框；在更小的屏幕上，导航链接会堆叠；

禁用链接

  • 对 <li> 元素添加 .disabled class，会创建一个灰色的链接，同时禁用了该链接的 :hover 状态；

下拉菜单

下拉菜单 - 标签

导航菜单和下拉菜单类似；

创建步骤：

  • 以一个带有 .nav class 的无序列表开始；

  • 添加 .nav-tabs class；

  • 添加带有 .dropdown-menu class 的无序列表；

  • <body>
  <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 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>
  </ul>
</body>
下拉菜单 - 胶囊
  • 和 下拉菜单 - 标签 类似，只是把 .nav-tabs 改成了 .nav-pills class ；

BootStrap 导航栏

默认的导航栏

创建步骤：

  • 向 <nav> 标签 添加 .navbar ， .navbar-default class；

  • 向上面的元素添加 role="navigation" ，有助于增加可访问性；

  • 向 <div> 元素添加一个 .navbar-header class，内部包含了带有 .navbar-brand 的 <a> 元素。这会让文本看起来更大一号；

  • 为了向导航栏添加链接，只需要简单地添加 .nav .navbar-nav class 的无序列表即可；

  • <body>
  <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
          <a class="navbar-brand" href="#">W3cschool</a>
      </div>
      <div>
          <ul class="nav navbar-nav nav-tabs">
              <li class="active"><a href="#">iOS</a></li>
              <li><a href="#">SVN</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="#">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>
                  </ul>
              </li>
          </ul>
      </div>
  </nav>
</body>

响应式的导航栏

  • 需要使用 BootSTrap 折叠(Collapse)插件 ；

  • 要折叠的 内容 必须包裹在 .collapse .navbar-collapse class 的 <div> 中；

  • 折叠起来的 导航栏 是一个包含 .navbar-toggle 和 2个 data- 元素的按钮；

    • data-toggle ： 告诉 JS 要做什么(collapse)；
    • data-target ： 指示要切换到哪一个元素(折叠的内容)；
    • 3个 .icon-bar class ： 创建 汉堡按钮；
  • <body>
  <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="#">W3Cschool</a>
      </div>
      <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav nav-tabs">
              <li class="active"><a href="#">iOS</a></li>
              <li><a href="#">SVN</a></li>
              <li>
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <span class="caret"></span></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>
                  </ul>
              </li>
          </ul>
      </div>
  </nav>
</body>

导航栏中的表单

  • 在第二个 <div> 中 添加 .navbar-form class 的 <form>；

  • <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
      <a href="#" class="navbar-brand">W3Cschool</a>
  </div>
  <div>
      <!-- 此处 -->
      <form class="navbar-form navbar-left" role="search">
          <div class="for-group">
              ...
          </div>
      </form>
  </div>
</nav>

导航栏中的按钮

  • 使用 .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏中垂直居中；
  • 可以使用在 <a> 和 <input> 元素上；

导航栏中的文本

  • 在 <p> 元素上添加 .navbar-text class；

非导航链接

  • 在 <a> 元素上添加 .navbar-link class；

组件对齐方式

  • 使用 .navbar-left .navbar-right class 来向左或向右对齐导航栏中的 导航链接，表单，按钮，文本 这些组件；
  • 这 2个 class 会在指定的方向上添加 CSS 浮动。

固定到顶部

  • 在 .navbar class 中添加 .navbar-fixed-top class；

  • <body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
  </nav>
</body>

固定到底部

  • 在 .navbar class 中添加 .navbar-fixed-bottom class；

静态的顶部

  • 能随着页面一起滚动的导航栏；
  • 在 .navbar class 中添加 .navbar-static-top class；
  • 该 class 不要求向 <body> 添加内边距(padding)；

倒置的导航栏

  • 一个带有黑色背景白色文字的倒置的导航栏；
  • 在 .navbar class 中添加 .navbar-inverse class；

BootStrap 面包屑导航

  • 效果：AAAA / BBBB / CCCC ；

  • 只需在(有序/无序)列表中添加 breadcrumb class 即可；

  • /* .breadcrumb 会通过以下样式自动调整 */
.breadcrumb > li + li:before {
  color: #CCCCCC;
  content: "/ ";
  padding: 0 5px;
}
  • html <body> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active"><a href="#">十一月</a></li> </ol> </body>

BootStrap 分页

分页(Pagination)

  • 分页是一种无序列表；

| Class | 描述 | | ------------------------------ | ------------------------------------------------------------ | | .pagination | 添加该 class 来在页面上显示分页； | | .disabled，.active | 自定义链接；.disabled 定义不可点击的链接；.active 定义当前的页面； | | .pagination-lg，.pagination-sm | 设置不同大小的项； |

  • html <body> <ul class="pagination pagination-lg"> <li><a href="#">iOS</a></li> <li class="disabled"><a href="#">SVN</a></li> <li class="active"><a href="#">Java</a></li> </ul> </body>

翻页(Pager)

  • 只有前一页，后一页 2个链接；

  • 也是无序列表；

  • 默认居中显示；

| Class | 描述 | | ---------------- | ------------------------------------------------------------ | | .pager | 添加该 class 来显示翻页； | | .previous，.next | (链接不在默认居中)；.previous 把链接向左对齐； .next 把链接向右对齐； | | .disabled | 链接不可点击，颜色变淡； |

  • html <body> <ul class="pager"> <li class="previous disabled"><a href="#">Previous</a></li> <li class="next"><a href="#">next</a></li> </ul> </body>

BootStrap 标签

  • 用于计数，提示或页面上其他的标记显示；

  • 使用 .label class 来显示标签；

  • 可以使用修饰的 class 来改变标签的外观，比如：.label-default，label-primary，label-info，label-success，lable-warning，label-danger ；

  • <body>
  <span class="label label-default">默认标签</span>
  <span class="label label-primary">主要标签</span>
  <span class="label label-success">成功标签</span>
  <span class="label label-info">信息标签</span>
  <span class="label label-warning">警告标签</span>
  <span class="label label-danger">危险标签</span>
</body>

BootStrap 徽章

  • 徽章和标签类似，主要区别是徽章的边角更加圆滑；

  • 徽章的主要作用是用于突出显示 新的 或 未读的项 ；

  • 只需把 <span class="badge"> 添加到链接，导航栏等这些元素上即可；

  • <a href="#">Mailbox <span class="badge">50</span></a>

BootStrap 超大屏幕

  • 用于增加标题的大小，并为登录页面内容添加更多的外边距(margin)。使用步骤如下：
  • 创建一个带有 .jumbotron class 的容器 <div> ；
  • 除了更大的 <h1> ，字体粗细 font-weight 被减为 200px；

普通的 - 超大屏幕

  • 四周圆角，不占整个屏幕宽度( .container class 有 padding: 0 15px )；

  • <body>
  <div class="container">
      <div class="jumbotron">
          <h1>欢迎登陆页面！</h1>
          <p>普通的 - 超大屏幕 实例</p>
          <p>
              <a class="btn btn-primary btn-lg" role="button">学习更多</a>
          </p>
      </div>
  </div>
</body>

更大的 - 超大屏幕

  • 四周直角，占用整个屏幕宽度；

  • 在 .container class 外使用 .jumbotron class 即可；

  • <body>
  <div class="jumbotron">
      <div class="container">
          ...
      </div>
  </div>
</body>

BootStrap 页面标题

  • 它会在网页标题四周添加适当的间距；

  • 把标题放在 .page-header class 的 <div> 中即可；

  • <div class="page-header">
  <h1>
      页面标题实例
      <small>子标题</small>
  </h1>
</div>
<p>文本文本文本文本文本文本文本文本文本文本</p>

BootStrap 缩略图

BootStrap 缩略图

  • 在图像周围添加带有 .thumbnail class 的 <a>标签；

  • 这会添加四个像素的内边距(padding) 和一个灰色的边框；

  • 当鼠标悬停在图像上时，会动画显示出图像的轮廓；

  • <body>
  <div class="row">
      <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
              <img src="img.gif" alt="aaa">
          </a>
      </div>
      <div class="col-sm-6 col-md-3"></div>
      <div class="col-sm-6 col-md-3"></div>
      <div class="col-sm-6 col-md-3"></div>
  </div>
</body>

添加自定义内容

我们可以向缩略图添加各种 HTML 内容，比如标题，段落，按钮等；步骤如下：

  • 把带有 .thumbnail class 的 <a>标签 改为 <div> ；

  • 在该 <div> 内，可以添加任何想要的东西；由于这是一个 <div>，可以使用默认的基于 <span> 的命名规则来调整大小；

  • 如果要给多个图像分组，请把他们放置在一个无序列表中，且每个列表项向左浮动；

  • <body>
  <div class="row">
      <!-- a标签改成div标签 -->
      <div class="col-sm-6 col-md-3">
          <div href="#" class="thumbnail">
              <img src="img.gif" alt="aaa">
          </div>
      </div>
      <!-- 添加想要的东西 -->
      <div class="caption">
          <h3>缩略图标签</h3>
          <p>一些示例文本，一些示例文本</p>
          <p>
              <a href="#" class="btn btn-default" role="button">按钮</a>
              <a href="#" class="btn btn-primary" role="button">按钮</a>
          </p>
      </div>
      <div class="col-sm-6 col-md-3"></div>
      <div class="col-sm-6 col-md-3"></div>
      <div class="col-sm-6 col-md-3"></div>
  </div>
</body>

BootStrap 警告

BootStrap 警告

  • 通过添加 .alert，alert-success，alert-info，alert-warning，alert-danger class 来创建基本的警告；

  • <body>
  <div class="alert alert-success">成功警告！</div>
  <div class="alert alert-info">信息警告！</div>
  <div class="alert alert-warning">警告警告！</div>
  <div class="alert alert-danger">错误警告！</div>
</body>

可取消的警告

  • 创建基本警告；

  • 在基本警告的 <div> class 中添加可选的 .alert-dismissable class；

  • 添加一个关闭按钮；

  • <body>
  <div class="alert alert-success alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
      成功警告！</div>
  <div class="alert alert-info">信息警告！</div>
  <div class="alert alert-warning">警告警告！</div>
  <div class="alert alert-danger">错误警告！</div>
</body>

警告中的链接

  • 创建基本警告；

  • 使用 .alert-link 实体类来快速提供带有匹配颜色的链接；

  • <body>
  <div class="alert alert-success ">
      <a href="#" class="alert-link">成功警告链接！</a>
  </div>
  <div class="alert alert-info">信息警告！</div>
  <div class="alert alert-warning">警告警告！</div>
  <div class="alert alert-danger">错误警告！</div>
</body>

BootStrap 进度条

IE9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画；

默认的进度条

  • 添加一个带有 .progress class 的 <div> ；

  • 在该 <div> 内添加一个带有 .progress-bar class 的空的 <div> ；

  • 添加一个带有百分比表示宽度的 style 属性；

  • <body>
  <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:40%">
          <span class="sr-only">40% 完成</span>
      </div>
  </div>
</body>

交替的进度条

  • 创建一个基本的进度条；
  • 在 .progress-bar class 内添加 .progress-bar-* class，* 可以是 success，info，warning，danger ；

条纹的进度条

  • 创建一个基本的进度条；
  • 在 .progress class 内添加 .progress-striped class；
  • 在 .progress-bar class 内添加 .progress-bar-* class， * 可以是 success，info，warning，danger ；

动画的进度条

  • 创建一个条纹的进度条；
  • 在 .progress .progress-striped class 内添加 .active class；

堆叠的进度条

  • 把多个进度条放在相同的 .progress class 中即可实现堆叠；
  • 总宽度不能超过100%，超过100%的话最后一个进度条不显示；

BootStrap 多媒体对象

  • 用于创建各种类型的组件，可以在组件中使用图文混排，图像可以左对齐或者右对齐，媒体对象可以用更少的代码来实现媒体对象与文字的混排；

  • 有 2种形式来设置媒体对象；

  • .media ： 该 class 允许将媒体对象里的多媒体(图像，视频，音频)浮动到内容区块的左边或者右边；

  • .media-list ： 如果你需要一个列表，各项内容是无序列表中的一部分，可以使用该 class。可用于评论列表和文章列表；

  • <body>
  <div class="media">
      <a class="pull-left" href="#">
          <img class="media-object" src="img.gif" alt="媒体对象">
      </a>
      <div class="media-body">
          <h4 class="media-heading">媒体标题</h4>
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
      </div>
  </div>
</body>

  • <body>
  <ul class="media-list">
      <li class="media">
          <a class="pull-left" href="#">
          <img class="media-object" src="img.gif" alt="媒体对象">
      </a>
      <div class="media-body">
          <h4 class="media-heading">媒体标题</h4>
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          这是一些示例文本。这是一些示例文本。
          <!-- 嵌套的媒体对象 -->
          <div class="media">
              <a class="pull-left" href="#">
                  // img...
              </a>
          </div>
      </div>
      </li>

      <li class="media">...</li>
      <li class="media">...</li>
      <li class="media">...</li>
  </ul>
</body>

BootStrap 列表组

列表组用于以列表形式呈现复杂的和自定义的内容；

BootStrap 列表组

  • 向 <ul> 元素添加 .list-group class；

  • 向 <li> 元素添加 .list-group-item class；

  • <body>
  <ul class="list-group">
      <li class="list-group-item">免费注册域名</li>
      <li class="list-group-item">免费 Window 空间托管</li>
      <li class="list-group-item">图像的数量</li>
      <li class="list-group-item">24*7 支持</li>
  </ul>
</body>

向列表组添加徽章

  • 徽章会自动的定位到右边；

  • 只要在 <li> 元素中添加 <span class="badge"> 即可；

  • <body>
  <ul class="list-group">
      <li class="list-group-item">免费注册域名</li>
      <li class="list-group-item">免费 Window 空间托管</li>
      <li class="list-group-item">图像的数量</li>
      <li class="list-group-item">24*7 支持</li>
      <li class="list-group-item">
          <span class="badge">新</span>
          折扣优惠
      </li>
  </ul>
</body>

向列表组添加链接

  • 使用 <div> 标签代替 <ul> 元素即可；

  • <body>
  <div>
      <a href="#" class="list-group-item active">免费注册域名</a>
      <a href="#" class="list-group-item">免费 Window 空间托管</a>
      <a href="#" class="list-group-item">24*7 支持</a>
  </div>
</body>

向列表组添加自定义内容

  • 添加 .list-group-item-heading class 来显示标题；

  • 添加 .list-group-item-text class 来显示文本内容；

  • <body>
  <div class="list-group">
      <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">
              入门网站包
          </h4>
      </a>
      <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">
              免费域名注册
          </h4>
          <p class="list-group-item-text">
              您将通过网页进行免费域名注册。
          </p>
      </a>
  </div>
</body>

BootStrap 面板

BootStrap 面板

  • 只需向 <div> 元素中添加 .panel panel-default class 即可；

  • <body>
  <div class="panel panel-default">
      <div class="panel-body">
          这是一个基本的面板
      </div>
  </div>
</body>

面板标题

  • 使用 .panel-heading class 向面板添加标题容器；

  • 使用 带 .panel-title class 的 <h1> ~ <h6> 来添加预定义样式的标题；

  • <body>
  <div class="panel panel-default">
      <div class="panel-heading">
          <h3 class="panel-title">
              带有 title 的面板标题(<h3>标签非必须)
          </h3>
      </div>
      <div class="panel-body">
          面板内容
      </div>
  </div>
</body>

面板脚注

  • 把按钮或者副文本放在带有 .panel-footer class 的 <div> 中即可；

  • <body>
  <div class="panel panel-default">
      <div class="panel-body">
          这是一个基本的面板
      </div>
      <div class="panel-footer">
          面板脚注
      </div>
  </div>
</body>

带语境色彩的面板

  • 使用 .panel-primary，panel-success，panel-info，panel-warning，panel-danger 来代替 .panel-default class 即可；

  • <body>
  <div class="panel panel-primary">
      ...
  </div>
</body>

带表格的面板

  • 使用 .table class 的 <table> 元素来创建无边框的表格；

  • 如果面板有包含 .panel-body class 的 <div>，可以向表格顶部添加额外的边框来分隔(好像不用？)；

  • 如果面板没有包含 .panel-body class 的 <div>，则组件会无中断的从面板头部移动到表格；

  • <body>
  <div class="panel panel-default">
      <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
      </div>
      <div class="panel-body">
          有 panel-body 的面板
      </div>
      <table class="table">
          <th>产品</th><th>价格</th>
          <tr><td>产品 A</td><td>200</td></tr>
          <tr><td>产品 B</td><td>400</td></tr>
      </table>
  </div>
  <div class="panel panel-default">
      <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
      </div>
      <table class="table">
          <th>产品</th><th>价格</th>
          <tr><td>产品 A</td><td>200</td></tr>
          <tr><td>产品 B</td><td>400</td></tr>
      </table>
  </div>
</body>

带列表组的面板

  • 在面板内添加列表组即可；

  • <body>
  <div class="panel panel-default">
      <div class="panel-heading">面板标题</div>
      <div class="panel-body">
          这是一个基本的面板内容。
          这是一个基本的面板内容。
          这是一个基本的面板内容。
          这是一个基本的面板内容。
          这是一个基本的面板内容。
      </div>
      <ul class="list-group">
          <li class="list-group-item">AAA</li>
          <li class="list-group-item">BBB</li>
          <li class="list-group-item">CCC</li>
      </ul>
  </div>
</body>

BootStrap Well

  • Well 是一种会引起内容 凹陷显示 或 插图效果 的容器 <div>；

  • 把 .well class 添加到 <div> 中即可；

  • <body>
  <div class="well">
      我在 Well 中！
  </div>
</body>

  • 可以使用 .well-lg，.well-sm 来改变 Well 的尺寸大小；

  • <body>
  <div class="well well-lg">
      我在 大的Well 中！
  </div>
</body>

BootStrap 插件

BootStrap 自带 12种 jQuery 插件，引用方式有 两种：

  • 单独引用 ： 使用 BootStrap 的个别的 *.js 文件 。一些插件和 CSS 组件依赖于其他插件。如果单独引用，请先确保依赖的插件已经引用；
  • 编译(同时)引用 ： 使用 bootstrap.js 或压缩版的 bootstrap.min.js ；

BootStrap 过渡效果（Transition）插件

  • 该插件可以实现过渡效果，动画比较平滑，在其他插件中使用；

BootStrap 模态框（Modal）插件

  • 模态框是覆盖在父窗体上的子窗体。目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息，交互等；

用法

  • 通过 data 属性 ： 在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier"，用 class 等也可)；

  • 通过 JavaScript ： 通过一行 JavaScript 来调用带有 id="identifier" 的模态框；

  $("#identifier").modal(options);
  • html <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"> &times; </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> </div> </div> </body>

选项

  • 用来定制模态窗口 (Modal Window) 的外观和感观，通过 data 属性 或 JavaScript 来传递的；

| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 | | -------- | -------------------------------------------- | ------------- | ------------------------------------------------------------ | | backdrop | boolean 或 string 'static'
默认值：true | data-backdrop | true/static：用户点击模态框外部时会关闭模态框；
false：点击外部时不会关闭； | | keyboard | boolean
默认值：true | data-keyboard | true：按下 Esc 键时关闭模态框；
false：按下不会关闭； | | show | boolean
默认值：true | data-show | 当初始化时显示模态框； | | remote | path
默认值：false | data-remote | 使用 jQuery.load 方法，如果添加了一个有效的 URL 的href，则会加载 URL 中的内容到 模态框的主题内容中； |

方法

  • 与 modal() 一起使用的方法；

| 方法 | 描述 | 实例 | | ---------------------------- | ---------------------------------------------- | ---------------------------------------- | | Options：.modal(options) | 把内容作为模态框激活。接受一个可选的选项对象； | $("#identifier").modal({keyboard:false}) | | Toggle：.modal('toggle') | 手动切换模态框； | $("#identifier")modal('toggle') | | Show：.modal('show') | 手动打开模态框； | $("#identifier").modal('show') | | Hide：.modal('hide') | 手动隐藏模态框； | $("#identifier").modal('hide') |

事件

  • 下表列出了模态框中要用到的事件；

| 事件 | 描述 | 实例 | | --------------- | ------------------------------------------------- | ------------------------------------------------------------ | | show.bs.modal | 在调用 show 方法后触发 | $("#identifier").on('show.bs.modal',function(){
//执行一些操作...
}) | | shown.bs.modal | 在模态框对用户可见时触发(将等待 CSS 过渡效果完成) | $("#identifier").on('shown.bs.modal',function(){
//执行一些操作...
}) | | hide.bs.modal | 在调用 hide 方法后触发 | $("#identifier").on('hide.bs.modal',function(){
//执行一些操作...
}) | | hidden.bs.modal | 当模态框完全对用户隐藏时触发 | $("#identifier").on('hidden.bs.modal',function(){
//执行一些操作...
}) |

BootStrap 下拉菜单（Dropdown）插件

  • 在 BootStrap 下拉菜单 一章中有详细描述；
  • 使用 data-toggle="dropdown" 来切换下拉菜单；
  • 用 data-target="#" 来代替 href="#"，以保持链接的完整性(浏览器不启用 JavaScript 时有用)；

BootStrap 滚动监听（Scrollsyp）插件

  • 滚动监听，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航栏目标；
  • 基本的实现是，随着用户的滚动，基于滚动条位置向导航栏添加 .active class；

用法

两种方法：

  • 通过 data 属性 ： 向你想要监听的元素(通常是 body)添加 data-spy="scroll"，然后添加带有 BootStrap .nav class 组件的父元素的 ID 或 class 的属性 data-target。
  <body data-spy="scroll" data-target=".navbar-example">
      ...
      <div class="navbar-example">
          <div class="nav nav-tabs">
              ...
          </div>
      </div>
      ...
  </body>
  • 通过 JavaScript ： 通过 JavaScript 调用滚动监听。选取要监听的元素，然后调用 .scrollspy() 函数：
  $("body").scrollspy({target:'.navbar-example'});

选项

  • 通过 data 属性 或 JavaScript 来传递。

| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 | | -------- | ---------------------- | ------------- | -------------------------------------- | | offset | number
默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素； |

方法

  • .scrollspy('refresh') ： 当通过 JavaScript 调用 scrollspy 方法时，需要调用 .refresh 方法来更新 DOM；

  • 在 DOM 的任意元素发生改变(添加或删除)时非常有效；

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

  • <body>
  ...
  <script>
      $(function(){
          removeSection = function(e){
              $(e).parents(".section").remove();
              $('[data-spy="scroll"]').each(function(){
                  var $spy=$(this).scrollspy('refresh');
              })
          }
      });

      $('#myScrollspy').scrollspy();
  </script>
</body>

事件

  • 滚动监听的事件；

| 事件 | 描述 | | --------------------- | ------------------------------------------ | | activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件 |

  • js $("#myScrollspy").on('activate.bs.scrollspy',function(){ // 执行一些操作... })

BootStrap 标签页（Tab）插件

  • 在 BootStrap 导航元素 一章中有详细介绍；
  • 通过一些这个插件，可以把内容放置在 标签页 或者是 胶囊式标签页 甚至是 下拉菜单标签页 中；

用法

两种方法：

  • 通过 data 属性 ： 添加 data-toggle="tabs" 或 data-toggle="pills" 到锚文本中；添加 .nav nav-tabs class 到 ul 中，将会应用 BootStrap 标签样式，添加 .nav nav-pills 到 ul 中，将会应用 BootStrap 胶囊式样式；
  <ul class="nav nav-tabs">
      <li><a href="#identifier" data-toggle="tab">Home</a></li>
      <li>...</li>
  </ul>
  • 通过 JavaScript ；
  $("#myTab a").click(function(e){
      e.preventDefault();
      $(this).tab("show")
  })

  // 通过不同方式来激活 各个标签页
  // 通过名称
  $('#myTab a[href="#profile"]').tab("show");
  // 第一个标签页
  $("#myTab a:first").tab("show");
  // 最后一个标签页
  $("myTab a:last").tab("show");
  // 选取第三个标签页(从 0 开始索引)
  $("#myTab li:eq(2)").tab(show");

方法

  • .tab() 方法，见上面示例；

事件

  • 标签页的事件

| 事件 | 描述 | | ------------ | ------------------------------------------------------------ | | show.bs.tab | 该事件在标签页显示时触发，但是必须在新标签页被显示 之前。
分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页； | | shown.bs.tab | 该事件在标签页显示时触发，但是必须在某个标签页已经显示 之后。
分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页； |

  • js $(function(){ // 页面加载完 添加事件 $('a[data-toggle="tab"]').on('shown.bs.tab',function(e){ // 获取已激活的标签页名称 var activeTab = $(e.target).text(); // 获取前一个激活的标签页名称 var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }) });

BootStrap 提示工具（Tooltip）插件

  • 可以在鼠标移动到(或点击) 选定的元素上(锚或按钮)上时，显示出相关的提示语；

用法

默认情况下是把提示工具(tooltip) 放在它们的出发元素后面。有两种方式添加提示工具(tooltip)：

  • 通过 data 属性 ： 向一个锚标签添加 data-toggle="tooltip" 即可；锚的 title 即为提示工具(tooltip)的文本。默认情况下，hover 触发方式，插件把提示工具(显示的文本)设置在顶部；
  <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
  • 通过 JavaScript；
  $("#identifier").tooltip(options);
  • 如需使用该插件，必须使用 jquery 来激活它（读取 javascript）；
  // 该脚本启用页面中所有的 提示工具(tooltip)
  $(function(){
      $("[data-toggle='tooltip']").tooltip();
  });

选项

  • 可通过 Data API 或 JavaScript 来调用；

| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 | | --------- | ----------------------------------- | -------------- | ------------------------------------------------------------ | | animation | boolean
默认值：true | data-animation | 提示工具使用 CSS 渐变滤镜效果； | | html | boolean
默认值：false | data-html | 向提示工具插入 HTML；
true：.html();
false：.text(); | | placement | string | function
默认值：top | data-placement | 规定如何定位提示工具(top | bottom | left | right | auto) | | selector | string
默认值：false | data-selector | 如果提供了一个选择器，提示工具对象将被委派到指定的目标； | | title | string | function
默认值：'' | data-title | 如果未指定 title 属性，则 title 选项是默认的 title 值； | | trigger | string
默认值：'hover focus' | data-trigger | 定义如何触发提示工具(click | hover | focus | manual)
可传递多个触发器，用空格分隔； | | content | string | function | data-content | 如果为指定 data-content 属性，则使用默认的 content 值； | | delay | number | object
默认值：0 | data-delay | 延迟显示和隐藏提示工具的毫秒数；
对 manual 手动触发类型不适用；
如果是数字，将用于显示和隐藏；
如果是对象，则结构如下：
delay:{show:500,hide:100} | | container | string | false
默认值：false | data-container | 向指定元素追加提示工具；
container:'body' |

方法

  • 提示工具方法；

| 方法 | 描述 | 实例 | | -------------------------------- | --------------------------- | -------------------------------- | | Options：.tooltip(options) | 向元素集合附加提示工具句柄 | $().tooltip(options) | | Toggle：.tooltip('toggle') | 切换显示/隐藏元素的提示工具 | $("#element").tooltip('toggle') | | Show：.tooltip('show') | 显示元素的提示工具 | $("#element").tooltip('show') | | Hide：.tooltip('hide') | 隐藏元素的提示工具 | $("#element").tooltip('hide') | | Destroy：.tooltip('destroy') | 隐藏并销毁元素的提示工具 | $("#element").tooltip('destroy') |

事件

  • 提示工具事件；

| 事件 | 描述 | | ----------------- | ----------------------------------------------------- | | show.bs.tooltip | 当调用 show 实例方法时立刻触发； | | shown.bs.tooltip | 当提示工具对用户可见时触发(将等待 CSS 过渡效果完成)； | | hide.bs.tooltip | 当调用 hide 实例方法时立刻触发； | | hidden.bs.tooltip | 当提示工具对用户隐藏时触发(将等待 CSS 过渡效果完成)； |

  • js $("#myTooltip").on('show.bs.tooltip',function(){ // 执行一些操作... })

BootStrap 弹出框（Popover）插件

  • 弹出框（Popover）与提示工具（Tooltip）类似，只是显示的内容更丰富；
  • 该方法依赖于提示工具（tooltip）；

用法

和提示工具（tooltip）类似，把 tooltip 改成 popover。

  • 通过 data 属性 ： 向一个锚/按钮标签添加 data-toggle="popover" 即可；锚的 title 即为提示工具(popover)的文本。默认情况下，hover 触发方式，插件把提示工具(显示的文本)设置在顶部；
  <a href="#" data-toggle="popover" title="Example popover">请悬停在我的上面</a>
  • 通过 JavaScript；
  $("#identifier").popover(options);
  • 如需使用该插件，必须使用 jquery 来激活它（读取 javascript）；
  // 该脚本启用页面中所有的 弹出框(popover)
  $(fucntion(){
    $("[data-toggle='popover'").popover();
    });

选项

  • 和提示工具（tooltip）一样；

方法

  • 和提示工具（tooltip）类似；
  • 把 .tooltip() 改成 .popover() ；

事件

  • 和提示工具（tooltip）类似；
  • 把 *.*.tooltip() 改成 .**.popover() ；

BootStrap 警告框（Alert）插件

  • 用来向终端用户显示诸如警告或确认消息的信息；
  • 使用警告框（Alert）插件，可以向所有的警告框添加可取消（dismiss）功能；

用法

两种方法 启用可取消功能 ：

  • 通过 data 属性 ： 向关闭按钮添加 data-dismiss="alert" 即可；
  <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
  • 通过 JavaScript ；
  $(".alert").alert()

选项

  • 没有选项！！！

方法

  • 警告框（Alert）方法；

| 方法 | 描述 | 实例 | | -------------------------------- | ---------------------------------- | -------------------------------- | | .alert | 该方法让所有警告框都带有关闭功能； | $("#identifier").alert(); | | Close Method .alert('close') | 关闭所有警告框 | $("#identifier").alert('close'); |

  • 如需在关闭时启用动画效果，请添加 .fade .in class；

事件

  • 警告框（Alert）事件；

| 事件 | 描述 | | --------------- | ------------------------------------------------- | | close.bs.alert | 当调用 close 实例方法时立即触发； | | closed.bs.alert | 当警告框被关闭时触发（将等待 CSS 过渡效果完成）； |

  • js // 用 .on() 也可； $("#myalert").bind('close.bs.alert',function(){ // 执行一些操作... })

BootStrap 按钮（Button）插件

  • 在 BootStrap 按钮 一章中有详细介绍；

加载状态

  • 向 button 元素添加 data-loading-text="Loading..." 即可；

单个切换

  • 向 button 元素添加 data-toggle="button" 即可；

复选框

  • 创建复选框组，然后向 btn-group 添加 data 属性 data-toggle="buttons" 即可；

  • <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
      <input type="checkbox"> 选项1
  </label>
  <label class="btn btn-primary">
      <input type="checkbox"> 选项2
  </label>
  <label class="btn btn-primary">
      <input type="checkbox"> 选项3
  </label>
</div>

单选框

  • 类似的，创建单选按钮组，然后向 btn-group 添加 data 属性 data-toggle="buttons" 即可；

  • <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
      <input type="radio" name="options" id="option1"> 选项1
  </label>
  <label class="btn btn-primary">
      <input type="radio" name="options" id="option2"> 选项2
  </label>
  <label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> 选项3
  </label>
</div>

用法

  • 可以通过 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); |

BootStrap 折叠（Collapse）插件

  • 可创建折叠 导航栏 或 折叠 内容面板；
  • 简单折叠；
  • 可分组折叠（同一个父元素）；

用法

两种方法：

  • 通过 data 属性；

    • 向 a 元素添加 data-toggle="collapse" 和 data-target / href 。data-target / href 指向待折叠元素，并且该元素需添加 .collapse class 。如果希望待折叠元素默认是打开的，请额外添加 .in class；
    • 为了添加分组管理，可向 a 元素添加 data-parent="#selector" ；
  <body>
      <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 部分
                      </a>
                  </h4>
                  <div id="collapseOne" class="panel-collapse collapse in">
                      <div class="panel-body">
                          第一部分的内容；第一部分的内容；
                      </div>
                  </div>
              </div>
          </div>
          <!-- 第二个折叠 -->
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="accordion" href="#collapseTwo">
                          点击我进行展开，再次点击我进行折叠。 第 2 部分
                      </a>
                  </h4>
                  <div id="collapseTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                          第二部分的内容；第二部分的内容；
                      </div>
                  </div>
              </div>
          </div>
          <!-- 第三个折叠 -->
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="accordion" href="#collapseThree">
                          点击我进行展开，再次点击我进行折叠。 第 3 部分
                      </a>
                  </h4>
                  <div id="collapseThree" class="panel-collapse collapse in">
                      <div class="panel-body">
                          第三部分的内容；第三部分的内容；
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </body>
  • 通过 JavaScript；
  $(".collapse").collapse();
  • 折叠（Collapse）用法

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

选项

  • 折叠（Collapse）选项；

| 选项名称 | 类型/默认值 | Data 属性 | 描述 | | -------- | --------------------------- | ----------- | -------------------------------------------- | | parent | selector
默认值：false | data-parent | 指定父元素；
用于创建带分组管理的折叠； | | toggle | boolean
默认值：true | data-toggle | 切换调用可折叠元素； |

方法

  • 折叠（Collapse）方法；

| 方法 | 描述 | 实例 | | ------------------------------- | --------------------------------------------------------- | ----------------------------------------- | | Options：.collapse(options) | 激活内容为可折叠元素；
接受一个可选的 options 对象； | $("#identifier").collapse({toggle:false}) | | Toggle：.collapse('toggle') | 切换显示/隐藏可折叠元素 | $("#identifier").collapse("toggle") | | Show：.collapse('show') | 显示可折叠元素 | $("#identifier").collapse("show") | | Hide：.collapse('hide') | 隐藏可折叠元素 | $("#identifier").collapse("hide") |

事件

  • 折叠（Collapse）事件；

| 事件 | 描述 | | ------------------ | ------------------------------------------------------- | | show.bs.collapse | 当调用 show 方法时触发； | | shown.bs.collapse | 当折叠元素对用户可见时触发（将等待 CSS 过渡效果完成）； | | hide.bs.collapse | 当调用 hide 方法时触发； | | hidden.bs.collapse | 当折叠元素对用户隐藏时触发（将等待 CSS 过渡效果完成）； |

  • js $(function(){ $("#collapseOne").on('show.bs.collapse',function(){ alert("嘿，当你展开时会提示本警告。") }) });

BootStrap 轮播（Carousel）插件

  • BooStrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式；
  • 内容可以是 图像，内嵌框架，视频，或者其他任何类型的内容；

用法

两种方法：

  • 通过 data 属性 ；

    • 属性 data-slide 接受关键字 prev 或 next ，用来改变幻灯片相对于当前位置的位置；
    • 使用 data-slide-to 来向轮播传递一个原始滑动索引，索引从 0 开始计数；
    • data-ride="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.gif" alt="first slide">
                  <!-- 标题为 非必须 -->
                  <div class="carousel-caption">标题1</div>
              </div>
              <div class="item">
                  <img src="img.git" alt="second slide">
              </div>
              <div class="item">
                  <img src="img.git" alt="thrid slide">
                  <div clsss="carousel-caption">标题3</div>
              </div>
          </div>
          <!-- 轮播（Carousel）导航 -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div>
  </body>
  • 通过 JavaScript ；
  $(".carousel").carousel();

选项

  • 通过 data 属性 或 JavaScript 来传递；

| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 | | -------- | --------------------------- | ------------- | ------------------------------------------------------------ | | interval | number
默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 flase，轮播将不会自动虚幻； | | 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') |

事件

  • 轮播（Carousel）事件

| 事件 | 描述 | | ----------------- | --------------------------------- | | slide.bs.carousel | 当调用 slide 实例方法时立即触发； | | slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发； |

  • js $("#identifier").on('slide.bs.carousel',function(){ // 执行一些操作... })

BootStrap 附加导航（Affix）插件

  • 附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。

用法

两种方法：

  • 通过 data 属性 ： 向要监听的元素添加 data-spy="affix" 即可；请使用便宜来定义何时切换元素的锁定和移动；
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Bootstrap 附加导航（Affix）插件</title>
      <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
      <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <style type="text/css">
          /* Custom Styles */
          ul.nav-tabs {
              width: 140px;
              margin-top: 20px;
              border-radius: 4px;
              border: 1px solid #ddd;
              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
          }

          ul.nav-tabs li {
              margin: 0;
              border-top: 1px solid #ddd;
          }

          ul.nav-tabs li:first-child {
              border-top: none;
          }

          ul.nav-tabs li a {
              margin: 0;
              padding: 8px 16px;
              border-radius: 0;
          }

          ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
              color: #fff;
              background: #0088cc;
              border: 1px solid #0088cc;
          }

          ul.nav-tabs li:first-child a {
              border-radius: 4px 4px 0 0;
          }

          ul.nav-tabs li:last-child a {
              border-radius: 0 0 4px 4px;
          }

          ul.nav-tabs.affix {
              top: 30px; /* Set the top position of pinned element */
          }
      </style>
      <script type="text/javascript">$(document).ready(function () {
          $("#myNav").affix({
              offset: {
                  top: 125
              }
          });
      });
      </script>
  </head>
  <body data-spy="scroll" data-target="#myScrollspy">
  <div class="container">
      <div class="jumbotron">
          <h1>Bootstrap Affix</h1>
      </div>
      <div class="row">
          <div class="col-xs-3" id="myScrollspy">
              <ul class="nav nav-tabs nav-stacked" id="myNav">
                  <li class="active"><a href="#section-1">第一部分</a></li>
                  <li><a href="#section-2">第二部分</a></li>
                  <li><a href="#section-3">第三部分</a></li>
                  <li><a href="#section-4">第四部分</a></li>
                  <li><a href="#section-5">第五部分</a></li>
              </ul>
          </div>
          <div class="col-xs-9">
              <h2 id="section-1">第一部分</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
              <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
              <hr>
              <h2 id="section-2">第二部分</h2>
              <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
              <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p>
              <hr>
              <h2 id="section-3">第三部分</h2>
              <p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
              <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
              <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
              <hr>
              <h2 id="section-4">第四部分</h2>
              <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
              <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
              <p>Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p>
              <p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.</p>
              <hr>
              <h2 id="section-5">第五部分</h2>
              <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
              <p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
              <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
              <p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p>
              <p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
          </div>
      </div>
  </div>
  </body>
  </html>

  • 通过 CSS 定位

    • 上面的方式中，必须通过 CSS 定位内容；附加导航（Affix）插件在三种 class 之间切换，.affix，.affix-top，.affix-bottom；
    • 开始时，.affix-top 作用，不需要任何 CSS 定位；
    • 当滚动经过添加了附加导航（Affix）的元素时，此时 .affix 会替代 .affix-top，同时设置 position:fixed; （由 BootStrap 的 CSS 代码提供）；
    • 如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom 。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS 。在这种情况下，请在必要的时候添加 position:absolute; ；

  • 通过 JavaScript；

  $("#myAffix").affix({
      offset:{
          top:100,bottom:function(){
              return (this.bottom=$('.bs-footer').outerHeight(true))
          }
      }
  })

选项

  • 附加导航（Affix）选项；

| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 | | -------- | -------------------------------------------- | ------------- | ------------------------------------------------------------ | | offset | number | function | object
默认值：10 | data-offset | 当 计算滚动位置时，距离顶部的偏移像素。
如果设置了一个数字，则用于顶部和底部。
如果设置了一个对象，请使用如下格式：offset:{top:10,bottom:5}。
如果动态计算偏移，请使用函数； |

BootStrap 其他