一 .栅格系统
栅格系统:
[1]栅格系统是用来进行页面布局的一种手段.
[2]栅格系统将页面划分为12个单元格,通过定位栅格的位置实现页面的布局.
二.栅格的定义
<div class="container"><!-- 栅格必须放置在容器之中 -->
<div class="row"><!-- 容器是由行对象组成 -->
<div class="col-md-3">栅格1</div><!-- 使用栅格将行对象进行划分 -->
<div class="col-md-3">栅格2</div>
<div class="col-md-3">栅格3</div>
<div class="col-md-3">栅格4</div>
</div>
</div>
我们通过col-md-单位 来设置栅格的大小.
通过将我们的组件放置在栅格之中,我们就可以完成页面的有效布局.
三.容器分类
[1] class=container
[2]class=container-fluid
第二种容器总是占满整个页面,而第一个会加入一定的边距.
四.栅格偏移
为了更好的布局,我们的栅格必须能在行的方向上进行移动.
使用属性class=col-md-offset-3: 这表示栅格会向右移动三个栅格的位置.
<div class="container">
<div class="row">
<div class="col-md-3">栅格1</div>
<div class="col-md-offset-3 col-md-3">栅格2</div>
</div>
</div>
后面的数字表示偏移的数量.
现在我们就可以bootstrap的布局转换为表格的设计,只要定义好栅格的位置,然后再把需要的组件放置在栅格之中,就可以实现页面的布局了.
(4)栅格嵌套
在bootstrap之中,我们可以一个栅格视为一个容器,因此我们可以在该容器之中再次进行一个栅格布局.
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- 进行栅格布局 我们现在将该栅格做为一个容器再次进行布局-->
<div class="row">
<div class="col-md-6" style="background:blue">栅格1</div>
<div class="col-md-6" style="background:blue">栅格2</div>
</div>
<div class="row">
<div class="col-md-6" style="background:blue">栅格1</div>
<div class="col-md-6" style="background:blue">栅格2</div>
</div>
</div>
</div>
</div>
任意的一个栅格,我们都可以把它视为一个基本的容器.
因此我们就可以再次把这个栅格进行行的分割,实现栅格的运用.