2018/3/20

BootStrap 4 (2)

  1. 網格系統
    • 給定容器 div.container 
      • 給定橫列數 div.row , 每列皆切割為12單位 / 行
        • 給定<標籤>行數定義
          • .col-xs-*  ~=手機
          • .col-sm-*  ~=平板
          • .col-md-* ~=中型螢幕
          • .col-lg-* ~=大型螢幕
          • .colxl-* ~=超大型螢幕
    • 給定偏量
      • col-md-offset-4  向右偏移4單位
      • 最小偏量優先
    • 可巢狀 div.row
  2. 基本元素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> 鍵盤文字
  3. 表格Class
    • table.table 開啟套用 ...etc
    • table.thead.tr.th.success套用顏色...etc
  4. 開發流程
    • 手機優先
    • 各種裝置除錯
    • 各種解析度除錯
  5. 利用chrome為不同視圖除錯
    1. F12

沒有留言:

張貼留言

test2