Bootstrap基本结构

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。

缺点：兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长。

总的来说响应式布局是大势所趋，能够给用户更好的体验。

BootStrap天然的支持响应式布局，只要在head里面添加如下代码即可：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap容器

Bootstrap需要一个容器元素来包裹网站的内容。BootStrap会对容器中的元素起作用。

我们可以使用以下两个容器类：

（1）.container 类用于固定宽度并支持响应式布局的容器。

（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

Bootstrap栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

Bootstrap 栅格系统有以下 5 个类:

（1） .col- 针对所有设备

（2）.col-sm- 平板 - 屏幕宽度等于或大于 576px

（3）.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

（4）.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

（5）.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

偏移列：偏移列通过 offset-*-* 类来设置。

第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型（可以省略）；

第二个星号( * )可以是 1 到 11 的数字。

Bootstrap的栅格系统需要在容器.container里设置一个数据行.row；在行(.row)里添加列(.column)。

<div class="container"><div class="row"><div class="col-md-4">...</div><div class="col-md-4 offset-md-2">...</div></div>
</div>

Bootstrap CSS

BootStrap CSS包含了许多的内容，其中包括排版、表格、表单、按钮、图片、信息提示框等。

1.排版

标题：Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示。

在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

<small>：在 Bootstrap 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本。

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

文本对齐方式： 在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：左对齐，取值left；居中对齐，取值center；右对齐，取值right；两端对齐，取值justify。为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐；.text-center：居中对齐；.text-right：右对齐；.text-justify：两端对齐。

例如下面的四行代码，分别定义文本的四种不同的对齐风格：

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

2.表格

.table：为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线——只要为其增加 .table 类即可。

<table class="table"><tr><td>php</td><td>8学时</td></tr><tr><td>bootstrap</td><td>10学时</td></tr>
</table>

结果如下：

.table-striped：通过在table标签上添加 .table-striped class，我们将在 <tbody> 内的行上看到条纹。

<table class="table table-striped"><tbody><tr><td>php</td></tr><tr><td>bootstrap</td></tr><tr><td>css</td></tr></tbody>
</table>

结果如下：

.table-bordered ：通过添加 .table-bordered 可以为表格添加边框。

<table class="table table-striped table-bordered"><tbody><tr><td>php</td></tr><tr><td>bootstrap</td></tr><tr><td>css</td></tr></tbody>
</table>

结果如下：

.table-hover: 通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景。

<table class="table table-striped table-bordered table-hover"><tbody><tr><td>php</td></tr><tr><td>bootstrap</td></tr><tr><td>css</td></tr></tbody>
</table>

结果如下：

指定意义的颜色类：通过指定意义的颜色类可以为表格的行或者单元格设置颜色。样式是在tr上的。

样式	意义
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要

<table class="table table-striped table-bordered table-hover"><tbody><tr><td>Default</td></tr>
<tr class="table-primary"><td>Primary</td></tr>
<tr class="table-success"><td>Success</td></tr>
<tr class="table-danger"><td>Danger</td></tr>
<tr class="table-info"><td>Info</td></tr>
<tr class="table-warning"> <td>Warning</td></tr>
<tr class="table-active"><td>Active</td></tr>
<tr class="table-secondary"><td>Secondary</td></tr>
</tbody>
</table>

颜色如下图：

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

<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr><td>Default</td></tr>
<tr class="table-primary"><td>Primary</td></tr>
<tr class="table-success"><td>Success</td></tr>
<tr class="table-danger"><td>Danger</td></tr>
<tr class="table-info"><td>Info</td></tr>
<tr class="table-warning"> <td>Warning</td></tr>
<tr class="table-active"><td>Active</td></tr>
<tr class="table-secondary"><td>Secondary</td></tr>
</tbody>
</table>
</div>

3.表单

表单布局：

（1）堆叠表单 (全屏宽度)：垂直方向

（2）内联表单：水平方向（内联表单需要在 <form> 元素上添加 .form-inline类）

Input：Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

<div class="form-group"><label for="usr">用户名:</label><input type="text" class="form-control" id="usr">
</div>
<div class="form-group"><label for="pwd">密码:</label><input type="password" class="form-control" id="pwd">
</div>

Radio（单选框）：单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。以下实例包含了三个选项。最后一个是禁用的

<div class="radio"><label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio"><label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled"><label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

Checkbox（复选框）：复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。以下实例包含了三个选项。最后一个是禁用的

<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="">Option 2</label>
</div>
<div class="form-check disabled"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="" disabled>Option 3</label>
</div>

Select（下拉菜单）

<div class="form-group"><label for="sel1">下拉菜单:</label><select class="form-control" id="sel1"><option>1</option><option>2</option><option>3</option><option>4</option></select>
</div>

Textarea

<div class="form-group"><label for="comment">评论:</label><textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Bootstrap 按钮

按钮样式：在BootStrap中可以如下来定义一个按钮（按钮类可用于 <a>, <button>, 或 <input> 元素上）： <button type="button" class="btn btn-primary">主要按钮</button>

按钮边框

<div class="container" style="margin-bottom: 48px;">
<h2>按钮设置边框</h2>
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>
</div>

按钮大小

<div class="container" style="margin-bottom: 48px;">
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</div>

激活和禁用的按钮：按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

Bootstrap 图片

圆角图片、圆形图片、带边框图片：

（1）.img-rounded：添加 border-radius:6px 来获得图片圆角。

（2）.img-circle：添加 border-radius:50% 来让整个图片变成圆形。

（3）.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Bootstrap信息提示框

提示框:信息提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现。

特定意义的颜色类如下：

<div class="alert alert-success"><strong>成功!</strong> 指定操作成功提示信息。
</div>

Bootstrap 组件

下拉菜单：下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>

结果如下：

.dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

.dropdown-divider 类： 用于在下拉菜单中创建一个水平的分割线

<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another link</a>
</div>

结果如下：

.dropdown-header 类：用于在下拉菜单中添加标题。

<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>

结果如下：

下拉菜单中的可用项与禁用项：

（1）.active 类：让下拉菜单的选项高亮显示 (添加蓝色背景)。

（2）.disabled 类：如果要禁用下拉菜单的选项，可以使用。

<div class="dropdown-menu">
<a class="dropdown-item" href="#">Normal</a>
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>

结果如下：

Bootstrap 导航

水平导航栏：如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。

<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

结果如下：

导航对齐方式:.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>

结果如下：

垂直导航：.flex-column 类用于创建垂直导航。

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

结果如下：

选项卡：使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

结果如下：

胶囊导航：.nav-pills 类可以将导航项设置成胶囊形状。

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

结果如下：

动态选项卡：

如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。

然后在每个选项对应的内容的上添加 .tab-pane类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类。

<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
<div class="tab-pane container" id="menu1">...</div>
</div>

结果如下：

胶囊状动态选项卡：胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle=“pill“。

<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle=“pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle=" pill" href="#menu1">Menu 1</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
<div class="tab-pane container" id="menu1">...</div>
</div>

导航栏:

可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

通过删除 .navbar-expand-xl/lg/md/sm 类来创建垂直导航栏。

<!-- 小屏幕上水平导航栏会切换为垂直的 -->
<nav class="navbar navbar-expand-sm bg-light"><!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</nav>

面包屑导航：面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>

结果如下：

Bootstrap 徽章

徽章（Badges）：主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。徽章可以根据父元素的大小的变化而变化。

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>

结果如下：

药丸形状徽章：使用 .badge-pill 类来设置药丸形状徽章。

<span class="badge badge-pill badge-default">默认</span>
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-danger">危险</span>

结果如下：

Bootstrap 进度条

进度条：可以显示用户任务的完成过程。

创建一个基本的进度条的步骤如下：

（1）添加一个带有 .progress 类的 <div>。

（2）接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

（3）添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。

（4）添加class .bg-success属性可以为进度条添加颜色。（ .bg-info . bg-warning . bg-danger）

<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>

结果如下：

Bootstrap 模态框

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

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class=“modal-header”>头</div>
<!-- 模态框主体 -->
<div class=“modal-body”>内容</div>
<!-- 模态框底部 -->
<div class=“modal-footer”>底部</div>
</div>
</div>
</div>

结果如下：

模态框尺寸：我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。尺寸类放在 <div>元素的 .modal-dialog 类后。

<div class="modal-dialog modal-sm"></div>
<div class="modal-dialog modal-lg"></div>

Bootstrap 弹出框

弹出框：弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。

（1）通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>

通过为标签添加data-placement属性来实现提示框的位置变化：left ,right ,top ,bottom。

（2）通过 JavaScript

$(‘#identifier’).popover(options)//必须使用JS进行插件的激活

<button type="button" class="btn btn-default" title="Popover title" data-container="body" data-toggle="popover"
data-placement="left" data-content="左侧的 Popover 中的一些内容">左侧的 Popover</button>
<button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover"
data-placement="top" data-content="顶部的 Popover 中的一些内容">顶部的 Popover</button>
<button type="button" class="btn btn-success" title="Popover title" data-container="body" data-toggle="popover"
data-placement="bottom" data-content="底部的 Popover 中的一些内容">底部的 Popover</button>
<button type="button" class="btn btn-warning" title="Popover title" data-container="body" data-toggle="popover"
data-placement="right" data-content="右侧的 Popover 中的一些内容">右侧的 Popover</button>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>

Bootstrap 提示框

提示框:当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。

<h4>提示工具（Tooltip）插件 - 锚</h4>
<a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">
默认的 Tooltip
</a>.
<a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</a>.
<a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">
顶部的 Tooltip
</a>.
<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip
</a>.
<a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">
右侧的 Tooltip
</a>
<script>
$(function () { $(“[data-toggle=‘tooltip’]”).tooltip(); });//必须要有，激活提示
</script>

结果如下：

Bootstrap 轮播

轮播：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。

轮播设计：

第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发；

第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作；

第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片；

第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内。

data 属性：

data-ride 属性：取值 carousel，并且将其定义在 carousel 上。

data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。

data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID名或其他样式识别符。

data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。

data-wrap属性：取值false时表示轮播不持续循环。

data-interval属性：取值number，表示轮播时间间隔为多长时间。

JavaScript控制：

默认情况之下，如果 carousel 容器上定义了 data-ride="carousel" 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下：$(".carousel").carousel();使用时，在初始化插件的时候可以传关相关的参数. 实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下：

轮播容器：在BootStrap中大部分的组件都需要一个容器来进行包裹，轮播也不例外。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
</div>

类.carousel表示该容器为轮播使用的容器。

id是必须的，给内部轮播的元素使用。

轮播指标

<!-- 轮播（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>

data-target的值指向容器定义的id值。

data-slide-to用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。

类.active表示初始化时候应该在哪个图片上。

轮播（Carousel）项目

<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/img/img1.png" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="/img/img2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="/img/img3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</div>
</div>

轮播（Carousel）导航

<!-- 轮播（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>

Bootstrap 折叠

折叠（Collapse）：折叠插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

折叠的使用：可以通过以下两种方式使用折叠（Collapse）插件：

（1） 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

（2）通过 JavaScript：可通过 JavaScript 激活 collapse 方法 $('.collapse').collapse()

<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>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Part 1
</div>
</div>
</div>
</div>

Bootstrap 滚动监听

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

（1）通过 data 属性：向想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。

<body data-spy="scroll" data-target=".navbar-example" >
<div class="navbar-example">
<ul class="nav nav-tabs"></ul>
</div>
</body>

（2）通过 JavaScript

$('body').scrollspy({ target: '.navbar-example' })

希望这些干货能对你们有帮助哦~