Bootstrap

序

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单

中文网： http://www.bootcss.com/
英文网 : http://getbootstrap.com/
Bootstrap
容器

流体布局容器
- 容器的width为auto，只是两边加了15px的padding
- 源码：
  - 流体容器&固定容器公共样式：
    1
    2
    3
    4
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
固定布局
- 容器的width会随设备分辨率的不同而生产变化
  - 分辨率阈值
    - w >=1200(lg 大屏pc) 容器的width为1170 （1140+槽宽）
    - 1200> w >=992(md 中屏pc) 容器的width为970 （940+槽宽）
    - 992 > w >=768(sm 平板) 容器的width为750 （720+槽宽）
    - 768 > w (xs 移动手机) 容器的width为auto
- 源码：
  - 固定容器特定样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    顺序不可变
    @media (min-width: @screen-sm-min) {
    width: @container-sm;
    }
    @media (min-width: @screen-md-min) {
    width: @container-md;
    }
    @media (min-width: @screen-lg-min) {
    width: @container-lg;
    }

栅格系统

栅格系统
- 按照不同屏幕划分为12等分
- 行（row）可以清除父容器的边距15px
- 列数大于12，会另起一行排列
- 可以同时为一列指定多个设备的类名，以便适应不同屏幕下划分不同的份数，例如：class=”col-xs-6 col-md-4”

列嵌套

简单的理解就是一行内分成若干个小块后，每一个小块还能再等分成12小块

<div class="col-xs-8 col-sm-6">
//我们在列嵌套时最好加一个行row 这样可以取消父元素的padding值 而且高度自动和父级一样高
 <div class="row">
   <div class="col-sm-6"></div>
   <div class="col-sm-6"></div>
</div>
</div

列偏移
- 使用 .col-md-offset-类可以将列向右侧(按份数)偏移。这些类实际是通过使用选*择器为当前元素增加了左侧的边距（margin）。
  1
  2
  3
  4
  <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>
列排序
- 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
- push是将块向右推
- pull是将块向左拉

响应式工具

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

现在暂时先了解这么多，bootstrap的精髓主要体现在栅格系统上，日后如果再用到其他东西再去bootstrap官方文档查阅即可

容器

栅格系统

响应式工具