bootstrap 3.x笔记

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种 容器类不能互相嵌套。

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

Copy

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

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

Copy

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


现在的container类

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

 

.row {
margin-right: -15px;
margin-left: -15px;
}

 

 

.col-xs-1, .col-sm-1,.col-md-1, .col-lg-1, .col-xs-2, .col-sm-2,.col-md-2, .col-lg-2, .col-xs-3, .col-sm-3,.col-md-3, .col-lg-3, .col-xs-4, .col-sm-4,.col-md-4, .col-lg-4, .col-xs-5, .col-sm-5,.col-md-5, .col-lg-5, .col-xs-6, .col-sm-6,.col-md-6, .col-lg-6, .col-xs-7, .col-sm-7,.col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9,.col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11,.col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

1. position: relative;
2. min-height: 1px;
3. padding-right: 15px;
4. padding-left: 15px;

 

布局原理：

http://www.cnblogs.com/willian/p/3558180.html

 

英文原文：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works