如何運用bootstrap 切版?
TRANSCRIPT
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