Bootstrap学习记录，快速手册

前言：

记录Bootstrap的学习过程，并当成查询手册

引入：

<!-- 新 Bootstrap 核心CSS 文件 -->

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">

 

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

CSS：

1）对移动设备友好,确保适当的绘制和触屏缩放，HTML头部增加：

<metaname="viewport" content="width=device-width,initial-scale=1.0">

（注：Bootstrap建议外层DIV：div.container以获取样式）

2）网格系统：div.row > div.col-xs-(1-12)、div.col-sm-(1-12)、div.col-md-(1-12)、div.col-lg-(1-12) 

（注1：同时应用xs/sm/md/lg实现响应式布局）

（注2：在需要清除浮动的地方添加空div.clearfix.visible-xs：在超小型屏幕才能清除（因为其是用visible-xs样式控制的））

3）排版：

[1]<small>：实现相对于父元素小一号的副标题效果

[2]列表：

<1>未定义列表（去除黑点列表）：

ul.list-unstyled>li{test}*3

<2>内联列表，行内并排：

ul.list-inline>li{test}*3

4）bootstrap文本效果：（运用于大多式布局组件）

p.text-center（居中效果）

p.text-muted（减弱效果）

p.text-success（success效果）

p.text-danger（danger效果）

p.text-warning（warning效果）

5）表格：

[1]斑马线表格：table.table-striped

[2]有悬停效果表格：table.table-hover

[3]紧凑表格：.table.table-condensed

[4]响应式表格:table.table-responsive

6）<tr>, <th> 和 <td> 类

[1]悬停的颜色：*.active

[2]成功的颜色：*.success

[3]警告的颜色：*.warning

[4]危险的颜色：*.danger

7)表单：

[1]垂直表单（正常表单）：

form>(div.form-group>label[for=inputID]+input.form-control#inputID)*3

(注：label.sr-only可以隐藏文字)

[2]内联表单：

form.form-inline>(div.form-group>label[for=inputID]+input.form-control#inputID)*3

(注：需保证内联的元素宽度)

[3]水平表单：

form.form-horizontal>(div.form-group>label.control-label[for=inputID]+input.form-control#inputID)*3

 [4]控件

radio,checkbox控制它们显示在同一行上：

<div><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox1"value="option1">选项 1 </label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox2"value="option2">选项 2 </label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox3"value="option3">选项 3 </label><labelclass="radio-inline"><inputtype="radio"name="optionsRadiosinline"id="optionsRadios3"value="option1"checked>选项 1 </label><labelclass="radio-inline"><inputtype="radio"name="optionsRadiosinline"id="optionsRadios4"value="option2">选项 2 </label></div>

select允许用户选择多个选项：select.form-control[multiple="multiple"]>option{选项}*3

input,fieldset禁用控件：input[disable]或fieldset[disable]

验证样式：错误、警告和成功消息的验证样式

（div.has-warning、 div.has-error或 div.has-success）

标签后放置纯文本：p.form-control-static

表单控件大小：分别使用input.input-lg 和 div.col-lg-* 来设置表单的高度和宽度

帮助文本块：input.form-control>span.help-block{输入4-16位数字}

8）按钮：(以下样式可用于<a>,<button>,或 <input>元素)

样式：*.btn.btn-default、*.btn.btn-primary、*.btn.btn-success、*.btn.btn info、*.btn.btn-warning、*.btn.btn-danger

大小：*.btn-lg、*.btn-sm、*.btn-xs、*.btn-block

状态：*.active、*[disabled]

9）图片：

为图片添加圆角：img.img-rounded

将图片变为圆形：img.img-circle

缩略图功能：img.img-thumbnail

图片响应式：img.img-responsive

10）辅助类：

浮动：*.pull-left、*.pull-right、*.center-block、*.clearfix

显示隐藏：*.show、*.hidden、*.sr-only、*.sr-only-focusable、*.text-hide

关闭按钮：*.close

显示下拉三角形图标：*.caret

11）响应式实用工具：

显示：*.visible-xs-*、*.visible-sm-*、*.visible-md-*、*.visible-lg-*

隐藏：*.hidden-xs、*.hidden-sm、*.hidden-md、*.hidden-lg

布局组件：

12）字体图标：span.glyphicon.glyphicon-XXX直接引用，

(Bootsrap图标库：点击打开链接)

13）下拉菜单：

基本使用：

div.dropdown>a[data-toggle=dropdown href=#]+ul.dropdown-menu

（注：外层没加.dropdown会使一二级菜单分离）

拓展：

[1]下拉菜单右对齐： ul.dropdown-menu-right

[2]下拉菜单中添加标题：li.dropdown-header

[3]下拉菜单中的分割线： li.divider

[4]指定向上弹出的下拉菜单：DIV.dropup

[5]下拉菜单中的禁用项：li.disabled

14）按钮组:

[1]水平按钮组： 

div.btn-group>button.btn.btn-default{按钮}*3

[2]按钮工具栏： 

div.btn-toolbar>(div.btn-group>button.btn.btn-default{按钮}*3)*3

[3]按钮组大小： div.btn-group-*

[4]按钮组嵌套： 

div.btn-group>(button.btn.btn-default{按钮})+(按钮下拉菜单，见下文)

（注：按钮组里的其中一个按钮是下拉菜单）

[5]垂直按钮组： 

div.btn-group-vertical>button*3

15）按钮下拉菜单：

[1]基本：

div.btn-group>((button.btn.btndefault[data-toggle=dropdown]{按钮}>span.caret)+(ul.dropdown-menu>(li>a[href=#]{选项})*3))

[2]分割：相当于是有两个按钮的按钮组【普通按钮 + 下拉菜单的按钮caret】

div.btn-group>(button.btn.btn-default{按钮})+(button.btn.btn-default.dropdown-toggle[data-toggle=dropdown]>span.caret)+(ul.dropdown-menu>li>a[href=#]{选项}*3)

[3]上拉菜单：div.dropup

16）输入框组：

[1]基本：

div.input-group>(span.input-group-addon+input)

[2]输入框组大小：div.input-group-*

[3]元素是单选框或复选框：

div.input-group>((span.input-group-addon>input[type=radio])+input.form-control)

(注:添加了form-control会撑开宽度，需要手动定义宽度)

[4]元素是按钮或按钮组：

div.input-group>(span.input-group-btn>button.btn.btndefault{按钮})+(input.form-control)

17）导航元素：

[1]标签导航或胶囊导航：

标签：

ul.nav.nav-tabs>li>a.acitve[href=#]{活动状态}+(li>a[href=#]{标签})*3

胶囊：

ul.nav.nav-pills>li>a.acitve[href=#]{活动状态}+(li>a[href=#]{标签})*3

[2]拉伸宽度：ul.nav-justified

[3]导航添加下拉菜单：添加到[1]的li里面

li>(a[data-toggle=dropdown href=#]{下拉标签}>span.caret)>ul.dropdown-menu>li>a[href=#]{选项}*3

[4]导航动态标签：

(div>ul.nav.nav-tabs>(li>a[data-toggle=tab href=#divID]{标签})*3)+(div.tab-content>(div.tab-pane.fade#divID>p{内容})*3)

（注1：div.tab-content：所有内容区域）

（注2：div.tab-pane：每个版块显示的内容（每个pane需加上ID，以被调用）

（注3：标签和导航需要分开两个DIV呈现）

18）导航栏：

[1]基本导航栏：

nav.navbar.navbar-default>(div.navbar-header>a.navbar-brand{首页})+(div>ul.nav.navbar-nav>(li>a{导航})*3)

[2]响应式导航栏：在基本导航上增加汉堡按钮（data-toggle=collapse）+需要响应的DIV（class=navbar navbar-collapse）

nav.navbar.navbar-default>(div.navbar-header>(a.navbar-brand{首页}+(button.navbar-toggle[data-toggle=collapse data-target=#dataID]>span.icon-bar*3)))+(div.collapse.navbar-collapse#dataID>ul.nav.navbar-nav>(li>a{导航})*3)

（注：超过一定宽度不会出现汉堡按钮）

汉堡式按钮：

nav.navbar.navbar-default>button[data-toggle=collapsedata-target=dataID]>span.iconbar*3

[3]导航栏中的表单、按钮、文本：

表单：form.navbar-form

按钮：button.navbar-btn

文本：p.navbar-text

[4]导航栏内的元素对齐：*.navbar-left、*.navbar-right

[5]导航栏固定到顶部、底部、固定滚动顶部：

固定顶部：nav.navbar-fixed-top

固定底部：nav.navbar-fixed-bottom

固定滚动顶部：nav.navbar-static-top

[6]反色的导航栏：nav.navbar-inverse

19）面包屑导航（有层次的导航栏）：ul.breadcrumb+li*N

20）分页：

[1]分页：

ul.pagination>(li>a.disabled[href=#]{«})+(li>a.active[href=#]{1})+(li>a[href=#]{2})*3+(li>a[href=#]{»})

（注：可用.pagination-lg,.pagination-sm改变大小）

[2]翻页：

ul.pager>(li>a.previous.disabled{left})+(li>a.next{right})

21）标签：span.label.label-default{标签}

22）徽章：span.badge{徽章}（可加.active激活）

23）缩略图：

基本缩略图：

div>a.thumbnail>img

增加自定义：

div.thumbnail>(a.thumbnail>img)+(div.caption>h3{标题}+p{文本})

24）警告：

基本：

div.alert.alert-success{警告}

关闭按钮：

div.alert.alert-success.alert-dismissable{警告}>button.close[data-dismiss=alert]{×}

警告里的链接：a.alert-link{警告}

25）进度条：

基本：

div.progress>div.progress-bar[style=width:40%]

颜色：div.progress>div.progress-bar.progress-bar-sucess[style=width:40%]

条纹：div.progress.progress-striped>div.progress-bar[style=width:40%]

动态：div.progress.active>div.progress-bar[style=width:40%]

堆叠：（多个内部div）

26）多媒体对象media：（类似博客或论坛的评论，左边头像 + 右边评论）

基本： 

div.media>(a.media-left>img.media-object)+(div.media-body{文本}>h3.media-heading{h3标题})

嵌套：div.media>(a.media-left>img.media-object)+(div.media-body{文本}>h3.media-heading{h3标题}+(div.media>(a.media-left>img.media-object)+(div.media-body{文本}>h3.media-heading{h3标题})))

27）列表组：

基本：

ul.list-group+li.list-group-item{列表}*3

链接列表组：div.list-group+(a.list-group-item>h4.list-group-item-heading{标题}+p.list-group-item-text{内容})*3

28）面板：

基本： 

div.panel.panel-default>div.panel-heading{标题}+div.panel-body{内容}

面板脚注、色彩：div.panel.panel-primary>div.panel-heading{标题}+div.panel-body{内容}+div.panel-footer{脚注}

29）well：div.well（well-lg 或 well-sm 可改变大小）

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

插件：

30）模态框（浮出层）：

[1]设置触发：在控制器元素（比如按钮或者链接）添加 属性 data-toggle="modal"和 data-target="#modalID "

[2]创建模态框：

div.modal.fade#modalID>div.modal-dialog>div.modal-content>(div.modal-header>button.close[data-dismiss=modal]{×}+h4{标题})+(div.modal-body{内容})+(div.modal-footer>button.btn.btn-default[data-dismiss=modal]{关闭})

[3]JS控制模态框：$('#identifier').modal(options)
(eg：

$('#identifier').modal({

keyboard: false

})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

)

[4]modal事件：

$('#identifier').on('show.bs.modal',function () { //调用 show 方法后触发

  // 执行一些动作...

})

$('#identifier').on('shown.bs.modal',function () { //当模态框对用户可见时触发（将等待 CSS过渡效果完成）

  // 执行一些动作...

})

$('#identifier').on('hide.bs.modal',function () { //当调用 hide实例方法时触发

  // 执行一些动作...

})

$('#identifier').on('hidden.bs.modal',function () { //当模态框完全对用户隐藏时触发

  // 执行一些动作...

})

31）下拉菜单：

[1]基本设置：外围.dropdown+一级菜单 data-toggle="dropdown"（可添加data-target="#"或者href="#"） + 二级菜单ul .dropdown-menu

[2]JS控制：$('.dropdown-toggle').dropdown()

32）滚动监听：

[1]被监听的父元素：添加 data-spy="scroll" data-target="指向监听的父元素" （data-offset属性计算滚动位置时，距离顶部的偏移像素，默认为10）

[2]被监听的内容：添加各个位置的ID，以被调用

[3]监听的元素：对应元素添加href="对应位置的ID"

[4]JS调用：

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

$('[data-spy="scroll"]').each(function() {

  var $spy = $(this).scrollspy('refresh')

})

（eg：删除元素后调用.scrollspy('refresh')例子

<scripttype="text/javascript">

          $(function(){

                    removeSection = function(e){

                               $(e).parents(".section").remove();

                               $('[data-spy="scroll"]').each(function() {

                                         var$spy = $(this).scrollspy('refresh')

                                         });

                    }

                    $("#myScrollspy").scrollspy();

});

</script>

）
[5]滚动监听相关事件：

$('#myScrollspy').on('activate.bs.scrollspy',function () { //每当一个新项目被滚动监听激活时，触发该事件

  // 执行一些动作...

})

33）标签页：

[1]用法：

 li  data-toggle="tab"（或data-toggle="pill"）  href. #（paneID）  + .tab-content  +  .tab-pane 

注：.tab-content：所有内容区域

注：.tab-pane：每个版块显示的内容（每个pane需加上ID，以被调用）

[2]JS控制：

// 通过名称选取标签页

$('#myTaba[href="#profile"]').tab('show')

 

// 选取第一个标签页

$('#myTaba:first').tab('show')

 

// 选取最后一个标签页

$('#myTaba:last').tab('show')

 

// 选取第三个标签页（从 0 开始索引）

$('#myTab li:eq(2)a').tab('show')

[3]标签页相关事件：

//该事件在标签页显示时触发，但是必须在新标签页被显示之前。

//分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$('a[data-toggle="tab"]').on('show.bs.tab',function (e) {

  e.target // 激活的标签页

  e.relatedTarget // 前一个激活的标签页

})

//该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。

//分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {

  e.target // 激活的标签页

  e.relatedTarget // 前一个激活的标签页

})

（eg：在本实例中，将显示当前和前一个访问过的标签页

$(function(){

          $('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {

                    // 获取已激活的标签页的名称

                    var activeTab = $(e.target).text();

                    // 获取前一个激活的标签页的名称

                    var previousTab =$(e.relatedTarget).text();

                    $(".active-tabspan").html(activeTab);

                    $(".previous-tabspan").html(previousTab);

          });

});

）
34）提示工具：

[1]基本用法：需提示的元素（如a、button）添加data-toggle="tooltip"title="需要显示的提示"（data-placement=“位置”可调整提示弹出位置）

[2]JS控制：

$().tooltip(options)//向元素集合附加提示工具句柄,载入提示工具的选项

$('#element').tooltip('toggle')//切换显示/隐藏元素的提示工具。

$('#element').tooltip('show')//显示元素的提示工具。

$('#element').tooltip('hide')//隐藏元素的提示工具

$('#element').tooltip('destroy')//隐藏并销毁元素的提示工具。

[3]提示工具相关事件：

$('#myTooltip').on('show.bs.tooltip',function () { //当调用 show实例方法时立即触发该事件

  // 执行一些动作...

})

$('#myTooltip').on('shown.bs.tooltip',function () { //当提示工具对用户可见时触发该事件（将等待 CSS过渡效果完成）。

  // 执行一些动作...

})

$('#myTooltip').on('hide.bs.tooltip',function () { //当调用 hide实例方法时立即触发该事件。

  // 执行一些动作...

})

$('#myTooltip').on('hidden.bs.tooltip',function () { //当提示工具对用户隐藏时触发该事件（将等待 CSS过渡效果完成）。

  // 执行一些动作...

})

35）弹出框：（点击后弹出的提示框，用法参考提示工具）
[1]基本用法：需提示的元素（如a、button）添加data-toggle="popover" +title="提示的标题" + data-content="提示的内容" + 最后JS触发

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

[2]JS控制：参考提示工具

[3]提示工具相关事件：参考提示工具

35）警告框：
[1]用法：基本（div .alert alert-success） + 关闭按钮（div .alert-dismissable + (button或a .close + data-dismiss="alert" + &times)） +警告里的链接（div .alert-link）

[2]JS控制：

$('#identifier').alert();//该方法让所有的警告框都带有关闭功能

$('#identifier').alert('close');//关闭所有的警告框

[3]提示工具相关事件：

$('#myalert').bind('close.bs.alert',function () { //当调用 close 实例方法时立即触发该事件

  // 执行一些动作...

})

$('#myalert').bind('closed.bs.alert',function () { //当警告框被关闭时触发该事件（将等待 CSS过渡效果完成）

    // 执行一些动作...

})

36 ）按钮：

[1]基本用法：button .btn+ data-loading-text="Loading..." +JS控制

[2]复选框组(或单选按钮组)的切换：div .btn-group+ data-toggle="buttons"  +  (label .btn > inputtype='checkbox(radio)')

[3]JS控制：

$().button('toggle')//切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换

$().button('loading')//当加载时，按钮是禁用的，且文本变为 button元素的 data-loading-text 属性的值

$().button('reset')//重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用

$().button(string) //该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容

37）折叠：

[1]基本用法：外围div .collapse +父组件添加：data-toggle="collapse" +  data-target="子组件ID"  

（注：外围div .collapse in表示默认显示，不加in表示默认隐藏）

[2]折叠面板：基本用法 +外围面板div .panel-group#accordion +子组件添加：data-parent="#accordion"

[3]JS控制：

$('#identifier').collapse({//载入折叠的选项

    toggle: false

})

$('#identifier').collapse('toggle')//切换显示/隐藏可折叠元素。

$('#identifier').collapse('show')//显示可折叠元素。

$('#identifier').collapse('hide')//隐藏可折叠元素。

[4]折叠相关事件：

$('#identifier').on('show.bs.collapse',function () { //在调用 show方法后触发该事件。

    // 执行一些动作...

})

$('#identifier').on('shown.bs.collapse',function () { //当折叠元素对用户可见时触发该事件（将等待 CSS过渡效果完成）。

    // 执行一些动作...

})

$('#identifier').on('hide.bs.collapse',function () { //当调用 hide实例方法时立即触发该事件。

    // 执行一些动作...

})

$('#identifier').on('hidden.bs.collapse',function () { //当折叠元素对用户隐藏时触发该事件（将等待 CSS过渡效果完成）

    // 执行一些动作...

})

38）轮播：

[1]基本用法：

<1>外围div #myCarousel +.carousel slide + data-ride="carousel"(自动轮播)

<2>轮播指标：ol .carousel-indicators> (lidata-target="#myCarousel" + data-slide-to="0" +class="active") * N

<3>轮播项目：外围div .carousel-inner >(内部div .item active >(img + div .carousel-caption)) * N

<4>轮播导航：

<aclass="carousel-control left" href="#myCarousel"

        data-slide="prev">‹

    </a>

    <a class="carousel-controlright" href="#myCarousel"

        data-slide="next">›

    </a>

[2]选项：

data-interval：自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。

data-pause：鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。

data-wrap：轮播是否连续循环。

[3]JS控制：

$('#identifier').carousel({// 载入选项

    interval: 2000

})

$('#identifier').carousel('cycle')//从左到右循环轮播项目。

$('#identifier').carousel('pause')//停止轮播循环项目

$('#identifier').carousel(number)//循环轮播到某个特定的帧（从 0开始计数，与数组类似）。

$('#identifier').carousel('prev')//循环轮播到上一个项目。

$('#identifier').carousel('next')//循环轮播到下一个项目。

[4]轮播相关事件：

$('#identifier').on('slide.bs.carousel',function () {

    // 执行一些动作...

})

$('#identifier').on('slid.bs.carousel',function () {

    // 执行一些动作...

})

39）附加导航（Affix）插件：（楼层导航，滚动监听）

[1]基本用法：监听别人的元素添加属性：data-spy="affix"data-offset-top="125"

[2]选项：data-offset：计算滚动位置时，距离顶部的偏移像素

[3]JS控制：

$('#myAffix').affix({

   offset: {

      top: 100, bottom: function () {

         return (this.bottom =

            $('.bs-footer').outerHeight(true))

         }

      }

})

[4]与滚动监听区别：

附加导航只需对“监听别人的元素”进行属性设置即可，滚动监听需要对监听和被监听的元素都进行设置