Bootstrap 4

  • 一般不要去改依賴庫的程式，那個工作讓依賴包管理來處理就好
    • 對修改封閉
  • 快捷鍵
    • ctrl+delete:刪除一個單詞
    • lipsum:產生dumy words
      • 不知道為什麼一開始cloud9會沒有辦法識別
      • 之後反而要打Lorem了，怪怪的
    • cloud 9預設Emmet plugin
  • 三塊的布局
    • col-sm-xx(加起來要是12)
  • 導覽列
    • 上方navbar
      • 最外層用div.navbar
      • 內層有個div.nav.navbar-header
      • 導航列用ul.nav.navbar-nav
    • bootstrap 4:
      • mr-auto:向左靠(margin-right-auto)
      • ml-auto:向右靠(margin-left-auto)
      • navbar-expand-lg:當網頁是一般螢幕的時候展開
      • navbar-collapse:隱藏起來
      • navbar-toggler-icon
    • 和上方文字對齊，加上row的div
      • 因為row有css的樣式，把他的margin和padding覆蓋掉
    • 踩到官網3.3.1 slim.js的問題
      • 用的太新了，改用六角學院的連結就有用(3.2.1.slim)
      • 小畫面的時候會沒有辦法toggle導覽列
    • 修改Logo
      • background-image:url(設定圖片位置)
      • background-size:
        • cover(圖片填充，會發現整個圖片重複了，而且覺得太滿了一點)
        • 80%
      • background-repeat:no-repeat
        • 調整background-size圖片重複的問題
      • background-position:調整圖片位置
  • 左方sidebar
    • 多增加一個sidebar的類，比較明確，避免改到其他的地方的樣式
    • list-group-item
    • 學會了怎麼用emmet添加多個假的item
      • div.list-group>(a[#].list-group-item.list-group-item-hover{item$})*5
  • 中間區塊
    • 圖片設置
      • 讓圖片限制在一個範圍內
      • max-width:100%(讓他不會超過外面元素的100%)
      • col-xs-xx:在bootstrap 4不管用拉(用col-md-{})
    • 整理共用樣式用逗號串接
    • grid system如果要顯示在同一列要用row包起來
    • 用一個div包起來info
      • 也方便統一裡面的樣式
    • 調整title行距
      • 改成超連結，display:block
    • clearfix:bootstrap 3需要清除float
  • 右方區塊
    • 一般放業務有關的訊息
    • 不能用數字命名阿
    • 把標題字調大
    • 不確定怎麼把右方標題的上下間距調大一些
  • 新聞詳細頁
    • lorem*10
    • Label用法

參考連結