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 还处于 作用范围内,如下

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

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