简介

一个基本的样式库+布局库

表格

<table> 为表格添加基础样式
<thead> 表格标题行的容器元素（<tr>）
<tbody> 表格主体中的表格行的容器元素（<tr>）
<tr> 表格行
<td> 默认的表格单元格。
<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

样式

table 为任意 <table> 添加基本样式 (只有横向分隔线)
table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
table-bordered 为所有表格的单元格添加边框
table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
table-condensed 让表格更加紧凑
table-responsive 响应式表格

情境色样式

active 激活效果（悬停颜色）
success 表示成功或积极的动作
info 表示普通的提示信息或动作
warning 表示警告或需要用户注意
danger 表示危险或潜在的带来的负面影响的动作

表单

默认布局 form-group

内联布局 from-inline

表单控件

可调节大小的输入框 form-control

checkbox、checkbox-inline 复选框的样式

radio、radio-inline 单选框样式

btn-[default/primary/success/info/warning/danger/link] 不同样式的按钮

active 激活按钮 disabled 禁用按钮

图片

img-[rounded/circle/thumbnail] 图片加圆角/变圆形/加灰色边框

下拉菜单组件

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">菜谱<span
    class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">烧花鸭</a></li>
        <li><a href="#">烧雏鸡</a></li>
        <li><a href="#">烧子鹅</a></li>
    </ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

要点

​ 外部容器用dropdown包裹，按钮绑定事件 data-toggle="dropdown", 菜单元素用"dropdown-menu"

分页

图片说明 

<ul class="pagination">
    <li class="previous"> <a href="#"> &laquo; </a> </li>
    <li class="active"> <a href="#">1</a> </li>
    <li> <a href="#">2</a> </li>
    <li> <a href="#">3</a> </li>
    <li class="next"> <a href="#">&raquo;</a> </li>
</ul>

栅格系统

其实现在CSS已经有grid布局了。

栅格系统默认每行有12个格子。div可以占据一定数量的格子。

<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>

这行代码在大小不同的屏幕上会占据不同数量的格子。在大屏幕上占据3个格子，所以大屏幕上一行可以显示4个这样的div。