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

1234

456789

</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所代表的按钮。