Bootstrap笔记

链接

默认div布局就是不断的堆叠。默认布局主要是上面的间隙太少，可以加
增加间隙。

标签和Badges可以用在显示状态，参考：这里

警告框样式，可以用来显示错误消息提示。参考：这里

进度条样式，显示进度，可以参考：这里

导航条样式，一般的导航和菜单栏，可以参考：这里

分页样式，可以参考：这里

导航和TAB分栏，可以参考：这里

下拉按钮组，可以参考：这里

按钮组，可以参考：这里

下拉菜单组，可以参考：这里

折叠组，可以参考：这里

信息展示方式，可以用dl/dt/dd也就是水平描述的方式。列表可以用ul/ol/li方式。参考： 这里

文本颜色，可以用text-success、text-info等文本样式。参考：这里

表格样式，可以参考：这里

表单样式，默认样式、水平表单和行模式，可以参考：这里

表单的默认样式，Default styles，div或form就是这样，不断堆叠，注意label和span是有pad高度差异的，label下面多5px的pad。

表单的水平样式，Inline form，设置的是class=“form-inline”，注意不是inline，会将元素水平放置。可以应用到div，form或span中。

表单的行模式，Horizontal form，一遍是左边是标签，右边是控件。类似登录框的形式，行距比较大。

扩展控件样式，Prepended and appended inputs，可以对input前后加元素，可以贴很紧。

几个关键点：

1. 控件本身是有差异，比如label就是加了5px的间隙，div就是没有。
2. 注意inline是指控件本身紧凑，比如div上用了就不会占用一行。form-inline指控件内的元素紧凑。
3. input为text时有10px间隙，为radio时有5px上间隙。一般radio和checkbox会配合label对应的样式使用。
4. 表单扩展样式，input-append和input-prepend有10px间隙。
5. 元素的间隙，会被form-inline清除，它的优先级更高，设置margin-bottom为0。
6. 可以用不同标签，比如<label/>是5px间隙，或者用<br/>标签有20px间隙，或者<p/>标签有10px间隙。
7. 可以组合label、p，但是重复的没有用，比如label+p+label无效。
8. 注意有些标签的差异，比如p里面可以放span，如果放div就会堆叠。可以在div外面或中间套p或label标签。
9. 用label标签嵌套时，整个行都是一个元素，所以一般label包radio和checkbox比较常见。
10. 如果空元素用来间隔两个div，那么不能用缩写如<label/>，必须写全了<label></label>。

默认DIV

下面是默认表单布局，每个div内部是堆叠的：

<div>
    <div>
        <span>开始时间:</span> <input type="text">
        <button class="btn">现在</button> 
        <button class="btn">30分钟前</button>
    </div>
    <div>
        <span>查询范围:</span> <input type="text">
        <span>分钟</span>
    </div>
</div>

form-inline

如果在内部两个div中加上form-inline，就会形成紧凑布局：

<div>
    <div class="form-inline">
        <span>开始时间:</span> <input type="text"> 
        <button class="btn">现在</button> 
        <button class="btn">30分钟前</button>
    </div>
    <div>
        <span>查询范围:</span> <input type="text"> 
        <span>分钟</span>
    </div>
</div>

label

然后我们可以使用label包裹这个div，这样就有5px的间隙了(注意在div之间放label更合适)：

<div>
    <label>
        <div class="form-inline">
            <span>开始时间:</span> <input type="text"> 
            <button class="btn">现在</button> 
            <button class="btn">30分钟前</button>
        </div>
    </label>
    <div>
        <span>查询范围:</span> <input type="text"> 
        <span>分钟</span>
    </div>
</div>

raio

其实label也是有堆叠效果，相当于div+5px的间隙。比如直接放置radio效果是：

<div>
    <input type="radio"> Option A
    <input type="radio"> Option B
</div>

如果用label或包裹下，加上radio标签，就会将文本对齐（当然可以用label，这样下面也有5px间隙）：

<div>
    <div class="radio"><input type="radio"> Option A</div>
    <input type="radio"> Option B
</div>

如果要一行显示，可以div加上inline标签（表示div控件本身紧凑），注意不是form-inline（表示div控件内的元素紧凑）：

<div>
    <div class="radio inline"><input type="radio"> Option A</div>
    <input type="radio"> Option B
</div>

注意span和label可以代替，但是label有5px的padding-bottom，比如：

注意input-append和input-prepend有10px的padding-bottom，如果里面用上label还要再加5px：