Bootstrap~页面的布局

回到目录

Bootstrap作为支持响应式布局的一个前端插件，确实发挥着重要的作用，无论你是在手机，平板还是ＰＣ上浏览网页，都能达到不错的效果，这一切一切，都是bootstrap带给我们的！

今天主要说下页面的布局，这是最基础的东西了，当我们设计一个站点时，应该为它设计一个全局性的统一的规范页面，这种页面我们叫它布局页，而在页面上体现出来的东西，就是布局的元素，在bootstrap里当然也是不可缺少的东西。

Bootstrap的布局是一种栅格系统，即它由行和列组成，在使用时需要为页面内容和栅格系统包裹一个 .container 容器。

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

<div class="container">
  ...
</div>

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

<div class="container-fluid">
  ...
</div>

二　栅格系统的行和列，在bootstrap里，行和列使用row和col表示，而一行中最多有１２个列单元组成，col-md-1表示占用１个单元的宽度，而col-md-7表示占用７个单元的宽度，它们加在一起最多为１２个单元

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

第二和第三行显示出来的效果类似这样

aaarticlea/png;base64,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" alt="" />

三　嵌套列，列中还可以有列，这种嵌套我们需要把md改为sm

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

效果类似于这样

aaarticlea/png;base64,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" alt="" />

今天就说到这里，主要是大体布局的一些基础知识。

回到目录