我爱编程

bootstrap栅格系统总结

2017-11-11  本文已影响0人  charmingcheng
<div class="container">
  <div class="row">
    <div class="col-xs-  col-sm-"></div>
    <div class="col-xs-  col-sm-"></div>
    <div class="col-xs-  col-sm-"></div>
    <div class="col-xs-  col-sm-"></div>
  </div>
</div>

.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
bootstrap.css中对.container的定义:

.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
    }
}

.col-xs-  无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;适用于手机;
.col-sm-  屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;适用于平板;
.col-md-  屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;适用于桌面显示器;
.col-lg-  屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器;

Bootstrap把每一行分成12等份,“col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;

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

屏幕大于992px时:.col-md-8 和.col-md-4 还处于 作用范围内,如下

image

屏幕在769px-992px之间时:.col-md-已失效,而.col-sm- 还处在 作用范围内,如下

image

屏幕宽度小于768px时,.col-sm-已失效 只有.col-xs- 不受屏幕宽度影响,这时候就由.col-xs-起作用,如下

image
上一篇 下一篇

猜你喜欢

热点阅读