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 （自动）750px970px1170px类前缀.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"> 元素上。