bootstrap笔记之栅格系统

 

1.栅格系统通过行和列来创建布局，一行（row）被划分12等份宽度，想让列宽等于几就设置预定义类比如.col-md-4，这个元素在中等屏幕中占4份宽的列

2.所有的列必须必须是row的子元素，且只有列可以作为row的子元素，row要被包裹在.container（固定宽度）或.container-fluid(100%宽度中)

<div class="container">
  <div class="row">
   <div class="col-md-8">.col-md-8</div> 
   <div class="col-md-4">.col-md-4</div>
</div>
</div>

3.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）	是
列排序	是

4.在media-query中创建关键的分界点

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

5.实现流式布局，流式布局一定要由容器.container-fluid包裹，页面元素的宽度会按照屏幕分辨率进行适配调整

5.1 针置手机和平板的设置预定义类，也可以针对中等屏幕和超大屏幕添加预定义类，形式是.col-md-n,.col-lg-n

    以下的代码是在一行中，有两列，第一个div列宽在xs（手机屏幕）上占12份，而在md（中等屏幕）上列宽占8份；第二个div  在xs屏幕上占6份，在md屏幕占4份，就实现了流式布局

<div class="row">
  <div class="col-xs-12 col-sm-8">.col-xs-12 .col-sm-8</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

5.2如果一行的column超多12，那么超出的这个元素会另起一行显示

6.列偏移，给需要偏移的元素添加.col-sm-offset-*，那么该列就向右侧偏移*个column的距离

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

7.嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

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

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>