回到目錄
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>
效果類似於這樣
今天就說到這裡，主要是大體布局的一些基礎知識。
回到目錄
頁面的響應式布局實現
當你設定乙個元素的高度為100 時，期望這樣元素能撐滿整個瀏覽器視窗的高度，但大對數情況下，這樣做法沒有任何效果，你知道為什麼height 100 不起作用嗎？按常理，當我們用css的height屬性定義乙個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裡擴充套件相應的空間距離。例如，如果乙個...
手機頁面的布局及搭建
最近進入了手機頁面的布局和搭建這方面的練習，對於布局這裡還是收穫頗豐。一 布局 布局的時候要注意圖層的優先順序。好多介面有底部的選單，對於這些頭部和底部的選單都用固定定位，並用z index提高圖層的優先順序，達到預期的結果。其次要注意的是對和div這些元素的寬度定義，一般是選用根元素rem來作為單...
Bootstrap頁面布局基礎知識全面解析
bootstrap作為支援響應式布局的乙個前端外掛程式，確實發揮著重要的作用，無論你是在手機，平板還是 上瀏覽網頁，都能達到不錯的效果，這一切一切，都是bootstrap帶給我們的！今天主要說下頁面的布局，這是最基礎的東西了，當我們設計乙個站點時，應該為它設計乙個全域性性的統一的規範頁面，這種頁面我...