格布局基本用法

栅格布局基本用法

---

1.1布局容器

1）新建demo02.html文件，定义一个container容器，我们看container帮我们做了哪些事情。

2）运行一下，首先是把这个div是居中的。

3）当浏览器变小的时候，它基本上就全屏了。

4）也就是bootstrap帮我们定义一个container这样一个样式，container可以把它当成一个网页的容器。

5）我们bootstrap把我们分辨率分成了4个屏幕，当屏幕分辨率小于768，container的最大宽度是None自动的；当屏幕分辨率大于等于768并且小于992时，container的最大宽度是750px；当屏幕分辨率大于等于992并且小于1200时，container的最大宽度是970px，当屏幕分辨率大于等于1200时，container的最大宽度是1170px，

（因此，屏幕分辨率小于768，container的最大宽度是None自动的，它基本上是占满整个屏幕。）

6）系统Bootstrap会自动识别你这个浏览器的分辨率，来帮你设置这个div的宽度是多少，这就是container会帮你做的事情。

7）container还有一个参数就是container-fluid，表示占满全屏。

8）运行结果如下

（container-fluid它是占满全屏的不管是在哪种分辨率下，而这个Container它根据了不同的分辨率设置了div的宽度。）

9）我们打开bootstrap.css文件可以看到container根据不同像素设置的宽度

10）布局容器小总结

   Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器

 .container 类用于固定宽度并支持响应式布局的容器。

   .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

   浏览器宽度4种类型：<768px,>=768px,>=992px、>=1200px

---

1.2列组合.cool-md-*

1）首先，新建一个demo03.html文件

2）定义一个div样式，设定它的行row并在行中设定列。

3）我们运行一下，是这样的效果。在中等分辨率底下，它们是平分的。    每一列占了12格中的4格。

4）定义第二行，修改分辨率

       <div class="row">

      <div class="col-xs-6">col-xs-6</div>

      <div class="col-xs-6">col-xs-6</div>

   </div>

运行结果：

在很小分辨率下Col-xs-6占6格，col-xs-6占6格。

（分辨率从小到大是相互兼容的）

5）重新定义第二行，修改分辨率（md是中等分辨率）

          <div class="row">

                  <div class="col-md-6">6</div>

                  <div class="col-md-6">6</div>

                 </div>

运行结果：

只有在中等屏幕下，Col-xs-6和col-xs-6才是1:1的

如果我们将屏幕变小，这时小分辨率就不行了。

（分辨率从小到大是相互兼容的，你设置了小分辨率的比例，大分辨率自然就适应小分辨率的这个比例。）

---

1.3列偏移 .col-md-offset-*

1）在之前的基础上再设置一个第三行，col-md-3占三格，col-md-2占两格。

运行一下，结果：

如果我们想让col-md-3在左边空三格，就用col-md-offset-3，让col-md-3在左边空两格，就用col-md-offset-2，这就是我们的列偏移。

运行结果：

---

1.4列嵌套

1）定义一行，第一列占12格中的8格，第二列占12格中的4格。

运行结果：

2)我们可以在这个列中再嵌套一个行，这个行分为两列，所占比例为1:1。

<div class="row">

      <div class="col-md-8">

                 <div class="row">

                  <div class="col-md-6">6</div>

                  <div class="col-md-6">6</div>

                 </div>

       </div>

      <div class="col-md-4">4</div>

   </div>

运行效果：

  我们设置了一行两列，第一行和第一列占了8个格，在第一列里面又插入了一个行，这行里面设置的是6，占6格，就相当于把12等分的8等分再拆分成12等分，显示的两个6表示把这个12等分的8等分当成了12等分，再对这8等分进行1:1的拆分。这个就是我们的列嵌套。

---

1.5列排序 .col-md-push-*  .col-md-pull-*

1）我们再重新定义一行，col-xs-3占三格，col-xs-2占两格

运行结果：

我们可以用col-md-push-5来指定col-xs-3向右推5格

运行结果：

同样，我们可以用col-md-pull-2来指定col-xs-2向左拉两格

运行效果：

注意：

1）col-md-push-*表示向右推几格；

         

2）col-md-pull-*表示向左拉几个；