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/0B3zZminnMtSMNGd0cF
FlZk5ValU/view?usp=sharing