Bootstrap的使用

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，是基于HTML、CSS、JAVASCRIPT的，其响应式设计让一个网页能在不同端呈现不同的效果。例如如下代码：
Bootstrap栅格系统是Bootstrap响应式框架的最出名的一个部分，其中栅格系统用于通过一系列的行

1
2
3
4
5
6
    <div class="container">
    <div class="row">
        <div class="col-sm-4">1234</div>
        <div class="col-sm-8">456789</div>
    </div>
</div>

其中row类只能放在container中，而col-sm-4其中col表示是列，sm表示是小屏幕平板，4表示占12份当中的四份（bootstrap把一个container分成了12份），其中在小屏幕下这些都是堆叠在一起的。还有一个col-md-offset-*是用来设置列偏移量的。

Bootstrap不仅保留了html5的各种排版样式，如h1到h6等，而且也自定义了.h1到.h6等各种排版，在标题内还可以包含small副标签，可以用来标记副标题，还有，可以通过code标签来显示一段代码，通过pre标签来显示一堆代码，但是要注意尖括号标签需要使用转义字符（&lt=<,&gt=>)，例如下列代码：

<pre>
&lt;!DOCTYPE html&gt;
&lt;title&gt;栅格系统&lt;/title&gt;
</pre>

Bootstrap为表格提供了不一样的属性.table类可以赋予其基本的样式-少量的内补和水平方向的分隔线。.table-striped可以给tbody之内每一行增加斑马条纹样式，还有.table-hover .table-condensed等样式，以及.active .succeed .info .warning .danger等不同的状态类。有如下代码所示：

    <table class="table-responsive">
    <tbody class="table">
    <tr>
        <td>11</td>
        <td>22</td>
    </tr>
    <tr>
        <td>33</td>
        <td>44</td>
    </tr>
    </tbody>
</table>

Bootstrap为表单提供了一些属性，.from-control类可以使所有子元素的input、textarea、select元素都将被默认设置为100%的宽度，将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。为form元素添加.form-inline标签可使内容左对齐并且表现为inline-block级别的控件。
通过为父元素添加.clearfix可以为元素清除浮动，而.show和.hide更是可以控制隐藏和显示内容

Bootstrap下拉菜单最主要是通过data-toggle="dropdown"绑定数据以便下面的菜单进行操作，而下面的菜单应设置为class="dropdown-menu"才能和上面的data-toggle="dropdown"来进行,例如下面的代码

 <div class="dropdown btn-group">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        DropDown<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" >
        <li>123</li>
    </ul>
</div>

其中，data-toggle="dropdown"和ul里的class="dropdown-menu"联合形成了下拉菜单的效果，而其他的例如dropdown是Bootstrap为下拉菜单设置的默认样式，但是dropdown的默认样式会占掉一行的宽度，因此使用btn-group把按钮变成下拉菜单的开关，当然还可把dropdown改成dropup使其上弹。
而我们也可以自己调用其下拉按钮，即自定义自己的下拉菜单，其实我们需要的只是点击下拉的效果，而这个可以直接在js用语法实现，bootstrap也为我们提供了对应的函数
$().dropdown(‘toggle’)，该方法所有下拉事件都会在.dropdown-menu的父元素触发，所以我们只需要在dropdown-menu上例如$(‘.dropdown-toggle’).dropdown()即代表点击data-toogle="dropdown"所代表的按钮会显示.dropdown-menu所代表的按钮。