Bootstrap頁面佈局3 - BS佈局以及流動佈局

一、

　　<h1 class='page-header'>佈局<small> 使用bootstrap網格系統佈局網頁</small></h1>

　　獲得如圖所示：

　　　　　　　　

二、給須要的元素添加一個容器，使其居中顯示

　　<div class='container'>

　　　　<h1 class='page-header'>佈局<small> 使用bootstrap網格系統佈局網頁</small></h1>

　　</div>

　　獲得如圖所示：若是須要更確切的效果請自行給上面的div設置border查看，是不是.container容器使其中間的元素居中了

　　　　　　　　

三、設置3段文字，讓這三段文字在同一行顯示

<div class='container'>

　　<h1>佈局 <small>bootstrap 佈局</small></h1>

　　<h2>欄目一</h2>

　　<p>段落1</p>

　　<h2>欄目二</h2>

　　<p>段落2</p>

　　<h2>欄目三</h2>　　　　　

　　<p>段落3</p>

</div>

　　以上標籤顯示效果如圖：

　　　　　　

　

首先請了解bs的柵格系統：http://wrongwaycn.github.io/bootstrap/docs/scaffolding.html

<div class='container'>

　　<h1>佈局 <small>bootstrap 佈局</small></h1>

　　　　<!--在須要調整的元素外包圍一個class位'row'的div-->

　　　　<div class='row'>

　　　　　　<div class='span4'>

　　　　　　　　<h2>欄目一</h2>

　　　　　　　　<p>段落1</p>

　　　　　　</div>

　　　　　　<div class='span4'>

　　　　　　　　<h2>欄目二</h2>

　　　　　　　　<p>段落2</p>

　　　　　　</div>

　　　　　　<div class='span4'>

　　　　　　　　<h2>欄目三</h2>　　　　　

　　　　　　　　<p>段落3</p>

　　　　　　</div>

　　　　</div>

</div>

　　　　說明：注意查看class='span4', 這裏的例子是將「欄目一」，‘欄目二’，‘欄目三’這三個段落顯示在1行中，那麼首先在這三個元素外圍包圍一個div且class='row',其次 每一個"欄目"設定一個合適的值，做爲每一個段落外圍包圍的div的class中 spanN 中N，可是要保證 N+N+N = 12 ；這裏的便是4+4+4 = 12;

　　　　效果如圖：（將每一個欄目的佈局平均分紅了4份，因此給的class='span4'）你也能夠根據需求或偏好自行設定，但要保證在一行中，所設定的全部spanN中的N相加之和等於12；

　　　　　　

 

固定佈局：不會隨着瀏覽器窗口大小的改變而改變佈局

　　應用的class是上面用到的class='container',class='row'

流動佈局：會隨着瀏覽器窗口的大小改變佈局

　　應用到class是則應該爲class='container-fluid', class='row-fluid'