www

Bootstrap基本排版方式

Bootstrap 請至 http://getbootstrap.com/ 下載最新版本開發環境 : 任何文字編輯器都行。

建立資料夾

開啟編輯器

1. 這段主要的意義是讓螢幕可以在縮小時，區塊也能更著變動2. 掛載 bootstrap ( 主要以 bootstrap 放置路徑位置為主 )

3. 放置自己寫的 CSS( 最好放置在最下方，才能改寫覆蓋掉上頭寫的 CSS)

假設以這張 layout 為範例

以 bootstrap 的佈局 會分成 12 欄 網格主要表示法

col-xs-

col-sm-

col-md-

col-lg-

手機平板筆電桌電

所以 以這張 layout 為例

可以想像成這樣

電腦 平板 手機

想好畫面就可以開始動手切版了

EX:col-lg-2 col-lg-10

EX:col-sm-3 col-sm-9

EX:col-xs-3 col-xs-9

Bootstrap 主要布局最外層 ( 基底 ) 一定要先包一個container-fluid 滿版 container 非滿版或

在 container-fluid container 下方一定要包 row

以版面規劃這裡會包 4 個 row

1

1

1

1

或

切版由小尺寸到大尺寸比較建議

這邊主要是分顏色用，才下的樣式可以不必理

手機板手機板

平板、筆電、電腦

範例下載 :

參考 : http://getbootstrap.com/css/

https://drive.google.com/file/d/0B3zZminnMtSMNGd0cFFlZk5ValU/view?usp=sharing