bootstrap笔记

响应式页面

实现不同屏幕上的不同展现方式，使网站在移动端和电脑端都有良好的浏览体验。
bootstrap提供了两个类: .container和.container-fluid。
.container 类用于固定宽度并支持响应式布局的容器：

固定宽度

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

100%宽度

bootstrap下实现响应式:栅格系统

栅格系统通过一系列的行(row)和列(col)来创建页面布局，row必须包含在.container或.container-fluid中，只有col能作为row的直接子元素，我们需要展示的内容就放在col中。

一行可以包含1-12个列，当超过12列时，多出的列将另起一行。
col根据宽度可以分为四种：.col-xs-,.col-sm-,.col-md-,.col-lg-，表示该列所跨越的列数。
.col-lg-只对大PC屏幕有效
.col-md-对普通PC和大屏幕PC都有效
.col-sm-对平板、普通PC、大屏幕PC都有效
.col-xs-*对手机、平板、普通PC、大屏幕PC都有效
可以对一个列在不同屏幕下指定不同的宽度：

<head>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <style>
        .outside{
            background: blanchedalmond; 
            height: 100px;
        }

        .inside{
            background: cornflowerblue; 
            height: 80px;
        }
    </style>
    <body>
        <div class="container-fluid outside">
            <div class="row">
                <div class="col-md-8 col-xs-12 inside"></div>
            </div>
        </div>
    </body>

在移动端占12列，普通PC端占8列

移动端

PC端

可以指定列的偏移量，不同屏幕下也可以设置不同偏移量:

 <div class="col-md-6 col-xs-10 col-xs-offset-1 col-md-offset-3 inside"></div>

移动端占10列，向右偏移一列，PC端占6列，向右偏移3列，通过偏移可以很方便地设置居中

移动端

PC端

可以通过添加新的row和col到已存在的col中实现嵌套：

    <head>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <style>
        .outside{
            background: blanchedalmond; 
            height: 100px;
        }

        .inside{
            background: cornflowerblue; 
            height: 80px;
        }
        
        .inner-col{
            background: darksalmon;
            height: 50px;
            border: 1px solid black;
        }
    </style>
    <body>
        <div class="container-fluid outside">
            <div class="row">
                <div class="col-md-12 inside"> 
                    <div class="row">
                        <div class="col-md-3 inner-col"></div>
                        <div class="col-md-3 inner-col"></div>
                        <div class="col-md-3 inner-col"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>

列嵌套

列排序。通过push和pull来对列进行排序：
col-md-4居左，col-md-8居右，如果想要互换位置，col-md-4需向右移动8个列，同时将col-md-8向左移动4个列。

移动前

给col-md-4加上col-md-push-8，col-md-8加上col-md-pull-4:

移动后

如果只移动col-md-4或者只col-md-8是不可以的，会造成其中一列挡住了另一列。
如：当只移动了col-md-4时：

就会出现col-md-4移动后，被col-md-8挡住了的效果。
通过上面的例子发现其实pull和push本质上也是对列的偏移，好像和offset一样，但两者还是有区别的：
1.offset只能实现向右偏移，而pull和push可以分别实现向左偏移和向右偏移。
2.offset偏移后，该列的位置会影响其他列的位置，如当一个列使用了col-md-offset-2，那么其他的列也会因为该列的偏移向右偏移两列，而如果使用了col-md-push-2后，对其他列的位置不会产生影响，所以上面的例子才会出现只移动一列，其中一列将另一列给挡住的情况。
3.实现方式不同：offset是通过设置margin-left实现的，而push和pull是通过相对定位实现偏移的。

其他全局css样式

1.代码：提供了一些标签用来展示不同的内容

如：<code>标记代码片段,<kbd>标记用户输入的内容，<var>标记变量等。

2.表格：为表格提供了一些类可以赋予其样式

.table:赋予表格基本的样式
.table-striped:给每一行添加斑马条纹样式
.table-hover:给行添加悬停样式
.table-condensed:单元格内边距减半，让表格更加紧凑
.table-borderd:每个单元格添加边框
.active、.success、.info、.warning、.danger：给单元格或者行设置颜色(状态)
.table-responsive：包裹.table元素，即可创建响应式表格，在屏幕宽度小于768px时，出现水平滚动条。

3.表单

.form-control:为<input><textarea><select>设置该类，这些元素将被默认设置宽度为100%。
.form-group: 将<input><textarea><select>与<label>元素包裹在.form-group中获得最好的排列。
.form-inline:为form元素添加该类，可以使其内容左对齐并且表现为inline-block级别的控件(只适用于屏幕宽度768px时)，并可以手动设置宽度，但每个输入控件都应该添加label标签，否则会无法被正确识别

 <form class="form-inline">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control"></div>
            </div>

            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control"></div>
            </div>
</form>

.form-horizontal:为form元素添加此类，再结合栅格布局，可以将label标签和控件水平排列,无需再添加.row。
.form-control-static:为p元素添加form-control-static类，即可将label与纯文本放在同一行。
焦点状态、禁用状态、只读状态：当表单控件处于这三种状态时，都会显示bootstrap设置好的样式。
.has-error、.has-success、.has-warning：添加这些类到空间的父元素上，任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
控件尺寸:通过.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度。
水平排列的表单组的尺寸：通过.form-group-lg和.form-group-md类可以为.form-horizontal包裹的label和表单控件设置尺寸。
用列包裹控件，可以快速设置其宽度。

4.按钮

为a、button、input标签添加按钮类即可使用bootstrap提供的样式，必须同时添加按钮类(.btn)和预定义样式类(.btn-default、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link)：

<button class="btn btn-success"></button>

尺寸：使用.btn-lg、.btn-md、.btn-sm、.btn-xs可以快速设置不同尺寸的按钮，使用.btn-block可以将按钮拉伸至父级元素宽度的100%。

5.图片

响应式布局：通过为图片添加.img-responsive类可以使图片实现响应式布局，本质是为图片设置了max-width： 100%；height:auto；display：block属性。
图片形状：通过添加.img-rounded（圆角）、.img-circle（圆形）、.img-thumbnail（缩略图）可以为图片设置不同的形状。

6.辅助类

文本颜色: .text-muted、.text-primary、.text-success、.text-warning、.text-danger、.text-info
背景颜色: .bg-primary、.bg-info、.bg-success、.bg-danger、.bg-warning
关闭按钮：可以让模态框或警告框消失,data-dismiss="modal"表示让模态框消失，如果要让警告框消失，设置data-dismiss="alert"。

 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号：添加.caret类指示某个元素具有下拉菜单的功能
快速浮动： pull-left、pull-right
让内容块居中: .center-block为元素设置display：block并设置其左右边距为auto让其内容居中。
清除浮动：在需要清除浮动的父元素上添加.clear-fix即可。
显示与隐藏元素: .hidden、.show、.invisible(元素的display属性不改变，仍能够影响文档流)。
.src-only：screen reader only(仅供屏幕阅读器),只在屏幕阅读器中显示。
响应式工具: .visible-xs-、.visible-sm-、.visible-md-、.visible-lg-、.hidden-xs、.hidden-sm、.hidden-md、.hidden-lg、.visible--（第一个可以是xs/sm/md/lg，第二个可以是inline/inline-block/block）

几个常用插件

1.模态框

<!--模态框-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <!--
                务必为.modal添加role="dialog"和aria-labelledby="..."属性，用于指向模态框的标题栏，例如这里的aria-labelledby="myModalLabel"，将
                模态框的标题栏指向了id为myModalLabel的元素。
            -->
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

data-toggle和data-target属性：指以什么事件触发，常用的有modal,popover,tooltips等，data-target指事件的目标，一起使用代表将data-target所指元素以data-toggle指定的形式展示。如：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

就是按下按钮后将id为myModal的元素以模态框的形式显示出来。

data-dismiss: 给一个元素data-dismiss属性，通过点击该元素就可以让目标消失。如：

   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

点击该按钮可以关闭外层模态框。

尺寸：可以为.modal-dialog添加.modal-lg或.modal-sm来调整模态框大小。
.fade：给模态框添加淡入和淡出效果。
调用模态框的方法：
1.通过data属性：

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

2.通过js调用：myModal为要展示的元素id,options是一个对象，用来传递模态框的属性。

$('#myModal').modal(options)

属性：可以将属性放入js参数中传递，也可以通过data属性传递。对于data属性，需要将属性名放在data-之后，如data-backdrop=""。有以下这些属性：
1.backdrop:点击遮罩是否能关闭模态框，值可以为static(不关闭)，true或者false。
2.keyboard:键盘上的esc键被按下时关闭模态框。
3.show:模态框初始化后立即显示出来（不太理解，好像是第一次点击按钮时，模态框进行初始化，如果要显示模态框需要再次点击按钮）
方法：
1.modal(options)：将页面中的某块内容作为模态框激活,options为可选参数。
2.modal('toggle/show/hide'):手动切换模态框状态/打开/关闭模态框。
3.modal('handleUpdate'):当模态框的高度调整后并且需要出现滚动条时，更新模态框的位置。
事件：
1.show.bs.modal:show方法调用之后立即出发该事件。如果是通过点击某个作为触发器的元素（如按钮），则此元素可以通过事件的relatedTarget属性进行访问，在此方法中调用preventDefault()方法，可以停止其行为（弹出模态框）
2.shown.bs.modal：模态框显示出来之后触发，如果是通过点击某个作为触发器的元素（如按钮），则此元素可以通过事件的relatedTarget属性进行访问。
3.hide.bs.modal:hide方法调用之后触发。在此方法中调用preventDefault()方法，可以停止其行为（关闭模态框）
4.hidden.bs.modal:模态框被隐藏之后触发。
5.loaded.bs.modal:从远端数据源加载完数据之后触发。

2.下拉菜单

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

调用下拉菜单的方法：与模态框一样，同样可以通过data-toggle="dropdown"属性或dropdown()方法调用。
方法：dropdown('toggle')
事件：触发方式与modal类似
1.show.bs.dropdown
2.shown.bs.dropdown
3.hide.bs.dropdown
4.hidden.bs.dropdown

3.collapse可折叠面板

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
  <div class="collapse" id="collapseExample">
    <div class="well">
     折叠内容
    </div>
  </div>

通过a标签或者button按钮绑定data-toggle和data-target属性（a标签可以使用href属性）来控制面板的折叠与展开。
面板可以有三种类：
1.collapse：展开状态
2.collpasing：正处于状态切换中
3.collapse.in：折叠状态
展开面板的方式：同样是通过data-toggle和data-target属性来控制，或者使用collapse(options)方法,options为可选属性。
options属性：
1.parent:如果提供了选择器，那么在显示此可折叠项时，指定选择器下的所有可折叠元素将关闭。类似手风琴效果，需搭配panel类使用。
2.toggle:切换目标元素的折叠状态
方法：collapse('toggle/show/hide'):切换/展开/折叠元素。
事件：
1.show.bs.collapse
2.shown.bs.collapse
3.hide.bs.collapse
4.hidden.bs.collapse
手风琴效果的实现：

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>

使用了data-parent属性将每一个折叠项包含进panel-group中。