- 網格系統
- 給定容器 div.container
- 給定橫列數 div.row , 每列皆切割為12單位 / 行
- 給定<標籤>行數定義
- .col-xs-* ~=手機
- .col-sm-* ~=平板
- .col-md-* ~=中型螢幕
- .col-lg-* ~=大型螢幕
- .colxl-* ~=超大型螢幕
- 給定偏量
- col-md-offset-4 向右偏移4單位
- 最小偏量優先
- 可巢狀 div.row
- 基本元素Class
- .h1~.h6
- .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 :
- 表格Class
- table.table 開啟套用 ...etc
- table.thead.tr.th.success套用顏色...etc
- 開發流程
- 利用chrome為不同視圖除錯
- F12
- 載入 BootStrap CSS/JS
- <meta http-equiv="X-UA-Compatiable" content="IE=edge">
- <meta name="viewport" content="width=device-width; initial-scale=1">
- viewport 用於手機優先 , 確保呈顯在手機上並可觸控縮放
- content 加入 user-scalable=no設定關閉縮放功能
- NOTE
- 為了支援IE9以前的版本相容HTML5和CSSˇ元素
- 使用 BootStrap 元素
- 必要標籤
- div class container(固定) or container-fluid(填滿)
- NOTE
- 放棄px , 改用 rem , em
- em : 相對於父層字體大小的單位
- rem : 相對於根元素
- 放棄 IE8
- 放棄 IOS 6支援
- 先確認 VMware 網卡已有 Bridged model項目
- Edit-> Virtual nwtwork Edit
- 點擊 change setting
- 如沒有 增加或 還原成 Default
- 在指定VM上右鍵 , 設定使用 Bridged model網卡
- 依需要是否需要設定 VM內的網卡 IP MASK or DHCP
