如何運用Bootstrap 切版?

1. www

2. Bootstrap
基本排版方式

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

4. 建立資料夾

5. 開啟編輯器
1. 這段主要的意義是讓螢幕可以在縮小時，區塊也能更著變動
2.掛載 bootstrap (主要以bootstrap放置路徑位置為主)
3.放置自己寫的CSS(最好放置在最下方，才能改寫覆蓋掉上頭寫的CSS)

6. 假設以這張layout為範例

7. 以bootstrap的佈局
會分成12 欄 網格
主要表示法
col-xs-
col-sm-
col-md-
col-lg-
手機
平板
筆電
桌電

8. 所以 以這張 layout為例
可以想像成這樣

9. 電腦 平板 手機
想好畫面就可以開始動手切版了
EX:
col-lg-2 col-lg-10
EX:
col-sm-3 col-sm-9
EX:
col-xs-3 col-xs-9

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

11. 在 container-fluid container 下方一定要包 row
以版面規劃這裡會包4個 row
1
1
1
1
或

12. 切版由小尺寸到大尺寸比較建議
這邊主要是分顏色用，才下的樣式可以不必理
手
機
板
手
機
板

13. 平
板
、
筆
電
、
電
腦

14. 範例下載 :
參考: http://getbootstrap.com/css/
https://drive.google.com/file/d/0B3zZminnMtSMNGd0cF
FlZk5ValU/view?usp=sharing