Bootstrap源码解读的栅格化篇

正文纯属自己研究所写笔记,如果出错还恳请多多指教提出

版心(container)

  1. 版心:class名为.container的容器,其版心的小幅在各个屏幕设备下是免一致的值,版心两限就是留白。 
    各尺寸下版心宽度如下表:

    屏幕设备 版心宽度
    max-width:768px xs 继承父元素宽度(即width:100%)
    min-width:768px sm 750px
    min-width:992px md 970px
    min-width:1200px lg 1170px

    .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }
    @media (min-width: 768px) {
    .container {

    width: 750px;
    

    }
    }
    @media (min-width: 992px) {
    .container {

    width: 970px;
    

    }
    }
    @media (min-width: 1200px) {
    .container {

    width: 1170px;
    

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

 

  1. 无啊宽度之屏幕,版心容器.container总会有左右15px之padding,是为着为内容未直把浏览器边缘的。在一个container中永远不要还嵌套一个container.

  2. .container-fluid的版心容器与小于768px屏幕的版心一样,自己从来不设置固定宽度值,继承其父元素的宽窄。

  3. .container容器是用来以响应式宽度达提供宽度约。响应尺寸的改其实改变的凡container,行(row)和排(column)都是依据百分比的用其不待开另外变动。

行(row)

  1. 尽:class名为.row的容器;它也列(col)一共了上空,总共分为12列。
  2. row两端会生出有限只因的15px之margin值,为了抵消掉container两侧的padding值。.row在container外使用时不济的。

    .row {

    margin-right: -15px;
    margin-left: -15px;
    

    }

 

列(column)

  1. 各一样列都生两侧15px的padding值。永远不要当.row容器外动col,否则col是杯水车薪的。
  2. 每列col的padding值给其情节提供了空荡荡,使内容未会见拮据贴在浏览器边缘,列里吧非会见拮据贴于共。
  3. ==列都是据比例分配的(相对于版心宽度的百分比,所以版心越宽的,每列宽度就进一步充分)==。

    //五列的宽
    .col-xs-5 {
    width: 41.66666667%;
    }
    // 四排列的大幅度
    .col-xs-4 {
    width: 33.33333333%;
    }
    // 三排的涨幅
    .col-xs-3 {
    width: 25%;
    }
    // 占少数排列的升幅
    .col-xs-2 {
    width: 16.66666667%;
    }
    // 每列的增长率是版心宽度之8.33333333%
    .col-xs-1 {
    width: 8.33333333%;
    }

    // 如果是中等屏幕 类名吧.col-md-1
    // 小屏幕 类名也:.col-sm-1
    // 大屏幕 类名吧:.col-lg-1
    @media (min-width:768px) {

    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
    

    }
    @media (min-width: 992px) {

    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
    

    }
    @media (min-width:1200px) {

    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
    

    }

 

栅格嵌套
  1. 当装了
    container/row/column之后,可以于column内重新创新的栅格系统,在column里面一直还补充加row就足以了,不待再学container了,因为列的两侧padding值
    正好可以平衡row的两侧负的margin值,列相当给container了。

偏移(offsets)

  1. 偏偏移offset主要是凭借列的margin-left值决定。偏移一排的言辞就是margin-left:8.3333333%(1/12),偏移两排列就是margin-left:16.66666667%(即2/12);

    .col-xs-offset-0 {

    margin-left: 0;
    

    }
    .col-xs-offset-1 {

    margin-left: 8.33333333%;
    

    }

    @median (min-width:768px) {

    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    ...
    

    }

 

列的Bootstrap排序(Push 和 Pull)

  1. 以实质上行使被再度多表现的凡呼唤位置与进行排序,允许你打破html中div从上到下
    从左到右的原则性布局。
  2. pull 和 push 是由此position的 right 和
    left值实现的,pull是经过right值,pull-1值 right:8.33333333% (1/12);
    push-1值=> left:8.33333333%(1/12);

    // push 距离左侧的离(向右侧推的列数)以极端小屏为条例
    .col-xs-push-2 {
    left: 16.66666667%;
    }
    .col-xs-push-1 {
    left: 8.33333333%;
    }
    .col-xs-push-0 {
    left: auto;
    }

    // pull 距离右边的离开(向左拉的列数)以极小屏为条例
    .col-xs-pull-2 {
    right: 16.66666667%;
    }
    .col-xs-pull-1 {
    right: 8.33333333%;
    }
    .col-xs-pull-0 {
    right: auto;
    }

 

相关文章