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>

第二和第三行顯示出來的效果類似這樣

三　嵌套列，列中還可以有列，這種嵌套我們需要把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>

效果類似於這樣

今天就說到這里，主要是大體布局的一些基礎知識。

回到目錄