栅格系统(gridsystems),也叫“网格系统,它就是通过一系列的行(row)与列(column)的组合创建页面布局。
简单说,栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。
BootStrap3默认将网页分成12等份
比如,超大屏幕下我们想要一个通栏的大盒子
<div class="container">
<div class="col-lg-12">独占一行</div>
</div>
又比如,超大屏幕下,我们想要一行左右来分
<div class="container">
<div class="col-lg-6">左边占6个</div>
<div class="col-lg-6">右边占6个</div>
</div>
超大屏下,如果一行放4个
<div class="container">
<div class="col-lg-3">占左边3个</div>
<div class="col-lg-3">占右边3个</div>
<div class="col-lg-3">占右边3个</div>
<div class="col-lg-3">占右边3个</div>
</div>
如果实现不同屏幕下,不同的显示个数,可以通过使用不同类名。
还是这4个盒子,在中等屏幕下放3个
<div class="container">
<div class="col-lg-3 col-md-4">盒子内容</div>
<div class="col-lg-3 col-md-4">盒子内容</div>
<div class="col-lg-3 col-md-4">盒子内容</div>
<div class="col-lg-3 col-md-4">盒子内容</div>
</div>
还是这4个盒子,在小屏幕下放2个
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
<div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
<div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
<div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
</div>
还是这4个盒子,在超小屏幕下放1个
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
</div>