- 網格系統
- 給定容器 div.container
- 給定橫列數 div.row , 每列皆切割為12單位 / 行
- 給定<標籤>行數定義
- .col-xs-* ~=手機
- .col-sm-* ~=平板
- .col-md-* ~=中型螢幕
- .col-lg-* ~=大型螢幕
- .colxl-* ~=超大型螢幕
- 給定偏量
- col-md-offset-4 向右偏移4單位
- 最小偏量優先
- 可巢狀 div.row
- 基本元素Class
- .h1~.h6
- <h1>~<h6> 可為SEO搜尋所用
- .btn 將任一個標籤指定成button
- 後面再加上按鈕種類 大小
- .btn-block 延伸為儲存格寬度
- .img-responsive 讓圖片自適應
- .text-left 內容可靠左....etc
- .text-capitalize 可字首大寫...etc
- .list-unstyled 可移除ul li符號
- .list-inline ul li水平顯示
- .hiddem-xs 隱藏
- .visible-xs 顯示
- NOTE :
- <kbd> 鍵盤文字
- 表格Class
- table.table 開啟套用 ...etc
- table.thead.tr.th.success套用顏色...etc
- 開發流程
- 手機優先
- 各種裝置除錯
- 各種解析度除錯
- 利用chrome為不同視圖除錯
- F12
- 給定容器 div.container
- 給定橫列數 div.row , 每列皆切割為12單位 / 行
- 給定<標籤>行數定義
- .col-xs-* ~=手機
- .col-sm-* ~=平板
- .col-md-* ~=中型螢幕
- .col-lg-* ~=大型螢幕
- .colxl-* ~=超大型螢幕
- 給定偏量
- col-md-offset-4 向右偏移4單位
- 最小偏量優先
- 可巢狀 div.row
- .h1~.h6
- <h1>~<h6> 可為SEO搜尋所用
- .btn 將任一個標籤指定成button
- 後面再加上按鈕種類 大小
- .btn-block 延伸為儲存格寬度
- .img-responsive 讓圖片自適應
- .text-left 內容可靠左....etc
- .text-capitalize 可字首大寫...etc
- .list-unstyled 可移除ul li符號
- .list-inline ul li水平顯示
- .hiddem-xs 隱藏
- .visible-xs 顯示
- NOTE :
- <kbd> 鍵盤文字
- table.table 開啟套用 ...etc
- table.thead.tr.th.success套用顏色...etc
- 手機優先
- 各種裝置除錯
- 各種解析度除錯
- F12
沒有留言:
張貼留言