1. 动画过渡 Transition
Bootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。
- 模态弹窗 (Modal) 的滑动和渐变效果；
- 选项卡 (Tab) 的渐变效果；
- 警告框 (Alert) 的渐变效果；
- 图片轮播 (Carousel) 的滑动效果；
2. 模态弹窗 Modal
Bootstrap 模态弹窗通常有以下表现——
- 点击某按钮后弹窗，弹窗内容为文件描述、图片等，也可带有按钮操作；
模态弹窗固定在浏览器中；
模态弹窗宽度自适应，且
.modal-dialog水平居中；当渲染视界宽度大于 768px 时，模态弹出窗的宽度为 600px；
窗体弹出时，底部有一层透明的黑色蒙版效果；
.modal>.modal-dialog>.modal-content>(.modal-header+.modal-body+.modal-footer)
2.1. 弹窗结构
模态弹窗的真正内容都放置在 .modal-content 中，其主要设置了弹窗的边框、边距、背景色和阴影等样式。包括三个部分——
- 弹出框头部
.modal-header：主要包括标题和关闭按钮； - 弹出框主体
.modal-body：弹出框的主要内容； - 弹出框脚部
.modal-footer：主要放置操作按钮；
其中，.modal-footer 通常用来放置按钮，已对其包含的按钮做了一定的样式处理。
2.2. 弹窗尺寸
-
.modal-dialog.modal-lg； -
.modal-dialog.modal-sm；
2.3. 弹窗动画
-
.modal.fade模态弹窗将有一个过渡动画效果；
2.4. 弹窗触发
1) 通过属性触发弹窗
- 为触发按钮设置
[data-toggle="modal" data-target]； - 其中
data-target属性指定为模态弹窗.modal的 ID 或者 CSS 选择符； - 若使用
a元素作为触发模态弹窗的按钮，则可用href属性替代data-target；
弹窗属性触发 data- 参数设置一览表
2) 通过 JS 触发弹窗
a. 属性设置
弹窗 JS 触发属性一览表
- 示例：
$(function(){
$('.btn').click(function () {
$('#mymodal‘’).modal({
keyboard: false
});
});
});
b. 参数设置
| 参数 | 使用方法 | 描述 |
|---|---|---|
| toggle | $('#mymodal').modal('toggle') |
触发时，反转模态弹窗的状态。若模态弹窗显示，则关闭；反之则显示 |
| show | $('#mymodal').modal('show') |
触发时，显示模态弹窗 |
| hide | $('#mymodal').modal('hide') |
触发时，关闭模态弹窗 |
c. 事件设置
| 事件类型 | 描述 |
|---|---|
| show.bs.modal | 在 show 方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的 relatedTarget 属性 |
| shown.bs.modal | 该事件在模态弹窗完全显示后（并且等 CSS 动画完成之后）触发；如果单击了一个元素，那么该元素将作为 relatedTarget 事件 |
| hide.bs.modal | 在 hide 方法调用时（但还未关闭隐藏）立即触发 |
| hidden.bs.modal | 该事件在模态弹窗完全关闭后（并且 CSS 动画完成之后）触发 |
- 示例：
$('#myModal').on('hidden.bs.modal',
function (e) {
// 处理代码...
}
)
3. 下拉菜单 Dropdown
下拉菜单一般出现在导航条中。
-
ul.nav.navbar-nav>li.dropdown>(a[data-toggle="dropdown" data-target="#"]>b.caret+ul.dropdown-menu>li>a)
3.1. 下拉菜单触发
1) 通过属性触发下拉菜单
- 对菜单项链接或按钮添加
data-toggle="dropdown"属性； - 为避免点击链接导致页面跳到顶部，可用
data-target="#"替代
href="#"；
2) 通过 JS 触发下拉菜单
-
dropdown()方法：单击按钮后弹出菜单，再次单击时收起菜单：
$(function(){
$('.dropdown-toggle').dropdown();
})
- 使用
toggle参数：当菜单隐藏时，单击后显示菜单；反之，当菜单显示时，单击后隐藏菜单。
$('.dropdown-toggle').one('click',function(){
$(this).dropdown('toggle');
})
4. 滚动监视 Scrollspy
- 当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项；
- 用户拖动滚动条，当滚动到特定板块上时，上方相应的导航项就会高亮显示；
4.1. 滚动监视触发
1) 通过属性触发滚动监视
- 导航区设置：
ul.nav#nav>(li.active>a[href="#id0"])+(li>a[href="#id1"])+...； - 监控区设置：
[data-target="#nav" data-spy="scroll" data-offset="60"]>#id0+#id1+...； - 监控区
data-target属性需与导航区.nav的 ID 一致，监控区子项的 ID 则需与导航区子项中的href属性一一对应； - 定义监控区样式，设置容器以产生垂直滚动条：
.scrollspy {
height: 500px;
font-size: 20px;
overflow: auto;
}
- 可在
body中加监控：将data-spy、data-target等追加在body中，但导航条必须设置为顶部固定样式.navbar.navbar-default.navbar-fixed-top；
2) 通过 JS 触发滚动监视
- 直接触发：
$(function(){
$('#scrollspy').scrollspy({
target: '#nav'
});
})
-
scrollspy()除target参数外，还有一个offset参数，其默认值为
10； - 滚动监控所作用的 DOM 有增删页面元素的操作时，需要调用
scrollspy('refresh')方法：
$(function(){
$('[data-spy="scroll"]').each(function(){
var $spy=$(this).scrollspy('refresh');
})
})
需要注意的是，该方法只对属性触发有效。
5. 选项卡 Tab
5.1. 选项卡触发
1) 通过属性触发选项卡
- 与菜单结合的选项卡：
ul.nav.nav-tabs>li(.active)>a[data-toggle="tab" href="#id"]； - 胶囊式导航
.nav-pill也有选项卡的功能：ul.nav.nav-pills>li(.active)>a[data-toggle="pill" href="#id"]； - 底部的可切换面板：
.tab-content>#id.tab-pane.fade(.in.active) - 添加
fade类名可使面板的隐藏与显示在切换的过程效果更流畅，产生渐入的效果；在添加fade类名的元素要追加in类名才会显示；
2) 通过 JS 触发选项卡
在选项的单击事件中调用 tab('show') 方法，显示对应的标签面板内容。（此方法不再需要 data-toggle="tab" 或 data-toggle="pill" 自定义属性）——
$(function(){
$('#myTab a').click(function (ev) {
ev.preventDefault();
$(this).tab('show');
});
})
6. 提示框 Tooltip
6.1. 提示框触发
Bootstrap 提示框不能直接由自定义属性触发，需要通过 JS 触发。
1) 设置提示框属性
- 常用
a或button：[data-toggle="tooltip"]； - 设置
data-original-title或title用于存放提示信息（若同时设置，则data-original-title优先级高于title）； - 设置
data-placement控制提示信息框的四种位置：top、right、bottom和left；
提示框属性触发 data- 参数设置一览表
2) 通过 JS 触发提示框
- 指定属性周全的元素触发——
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
- 指定元素，追加参数后触发——
$(function(){
$('#myTooltip').tooltip({
title: '我是一个提示框，我在顶部出现',
placement: 'top'
});
});
弹窗 JS 触发属性一览表
7. 弹出框 Popover
Bootstrap 弹出框外表与提示框差不多，不同在于：弹出框除了有标题
title 以外还增加了内容 content 部分；样式风格上弹出框有边框、圆角、背景、阴影以及三角形等样式；提示框的默认触发事件是 hover 和 focus，而弹出框是 click。
7.1. 弹出框触发
与提示框一样，弹出框也只能通过 JS 触发。
1) 设置弹出框属性
- 常用
a或button：[data-toggle="popover" data-original-title="提示信息" data-placement=""]； - 比提示框多出
data-content="提示内容"属性；
弹出框属性触发 data- 参数设置一览表
2) 通过 JS 触发弹出框
- 指定属性周全的元素触发——
$(function(){
$('[data-toggle="popover"]').popover();
});
- 指定元素，追加参数后触发——
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});
8. 警告框 Alert
Bootstrap 警告框插件是在警示框组件的基础上添加单击 X 能关闭警告框的功能。
8.1. 通过属性关闭警告框
恭喜您操作成功！
- 关闭按钮，不一定非要用 X，可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有
data-dismiss="alert"属性即可。 - 关闭按钮时，首先会查找
data-target属性，再查找href属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。即，关闭按钮不在
.alert容器内时，只要关闭按钮的data-target（或者a元素的
href）属性值与.alert容器 ID 一致，则关闭元素放在容器外也可以关闭警告框。
8.2. 通过 JS 关闭警告框
$(function(){
$('#close').on('click', function(){
$(this).alert('close');
});
});
9. 按钮 Button
9.1. 按钮加载状态
a) 通过属性提供单击加载状态
b) 通过 JS 提供单击加载状态
$(function(){
$('#loaddingBtn').click(function () {
$(this).button('loading');
});
});
9.2. 单选按钮
-
.btn-group[data-toggle="buttons"]>label>input#id[type="radio" name]
9.3. 复选按钮
-
.btn-group[data-toggle="buttons"]>label>input#id[type="checkbox" name]
9.4. 按钮状态切换
a) 通过属性切换按钮状态
button[data-toggle="button"]
b) 通过 JS 切换按钮状态
- 切换按钮状态（得到焦点）：
$('#myButton').button('toggle');
- 重新恢复按钮：
$('#myButton').button('reset');
- 任意参数：
$('#myButton').button('任意字符参数名');
可替换 data-任意字符参数名-text 的属性值为「按钮上显示的文本值」。
10. 折叠 Collapse
每个标题对应一个内容，这两个部分组合起来称为一个 panel 面板，多个 panel 构成 panel-group 面板组，即手风琴折叠的结构。
10.1. 声明式触发
-
#accordion.panel-group>.panel.panel-accordion.panel-default>(.panel-heading>hn.panel-title>a[href="#id" / data-target="#id" data-toggle="collapse" data-parent="#accordion"])+(#id.panel-collapse>.panel-body) -
.panel-collapse一级追加collapse类名后可使之不可视，按需追加；默认打开的项则再追加in类名；
11. 图片轮播 Carousel
一个轮播图片主要包括三个部分——
- 轮播图片
- 轮播图片计数器
- 轮播图片控制器
-
#id.carousel.slide>{[ol.carousel-indicators>(li(.active))]+
.carousel-inner>.item(.active)>a>img} - 若要添加图片文字说明，可在
img后添加：
图片标题
描述内容...
- 前后控制器代码（放置在最后）：
11.2. 通过属性触发图片轮播
-
data-ride="carousel"； -
data-target="#id"：取值 carousel 定义的 ID 名或者其他样式识别符； -
data-slide="prev/next"：该属性值同样定义在轮播图控制器的a链接上，同时设置控制器href="#id"，取值为容器 carousel 的 ID 名或其他样式识别符； -
data-slide-to：用来传递某个帧的下标，取数值，可直接跳转到这个指定的帧（下标从 0 开始计）。 - data- 属性一览表：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| data-interval | number | 5000 | 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 |
| data-pause | string | hover | 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 |
| data-wrap | 布尔值 | true | 轮播是否持续循环 |
- 示例——
11.3. 通过 JS 触发图片轮播
$('.carousel/#id').carousel({
...// 参数
});
- JS 属性一览表：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| interval | number | 5000 | 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环 |
| pause | string | hover | 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放 |
| wrap | 布尔值 | true | 轮播是否持续循环 |
- 特殊调用方法：
-
.carousel('cycle')：从左向右循环播放； -
.carousel('pause')：停止循环播放； -
.carousel('number')：循环到指定的帧，下标从 0 开始； -
.carousel('prev')：返回到上一帧； -
.carousel('next')：下一帧；
-
12. 固定定位 Affix
Affix 的主要功能是使某个需要固定的元素在浏览器窗口中固定（元素带有
affix类名固定）和不固定（元素不带有affix类名）的效果。Affix 效果常见的有以下三种——
- 顶部固定
- 侧边栏固定
- 底部固定
12.1. 通过属性触发固定定位
-
data-spy="affix"：表示元素固定不变的； -
data-offset="整数值"：表示元素 top 和 bottom 的值都是该数值，其包括两种方式——data-offset-top和data-offset-bottom，可单独以这两种方式表现； - 注意：需声明监控：
13. 自定义配置
Bootstrap 框架自定义配置主要包括三个部分——
- Bootstrap 组件
- Bootstrap 插件
- Bootstrap 的 LESS 版本变量设置
组件设置提供了公共样式 Common CSS，U I组件 Components 和 JS 组件 JavaScript components 三个部分。