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间隙，或者

   标签有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"