boostrap学习笔记

1.容器

.container 类用于固定宽度并支持响应式布局的容器。

复制

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

复制

<div class="container-fluid">
  ...
</div>

2.栅栏格式(一行12列)

行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

注:这里所指的像素边界值,低于该边界值,栅栏格式就会失效;

多种格式可以同时使用,如:class="col-md-4 col-xs-2",表示在小分辨率下是2列,中型设备为4列样式

注意样式:col-md-offset-*与clearfix visible-xs-block

col-md-offset-*表示偏移量

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

表单

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。