002 栅格系统

一 .栅格系统

栅格系统:

[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>

任意的一个栅格,我们都可以把它视为一个基本的容器.

因此我们就可以再次把这个栅格进行行的分割,实现栅格的运用.