By

看 Amos 大大的影片作筆記，下面的擷取內容是以 Bootstrap-4.1.3 為準。

筆記

  • BS3 是 float ， BS4 改為 flex 。

  • 預設色彩有 8 個基本款：primary, secondary, success, info, warning, danger, light, dark。 預設色彩

  • BS4 斷點預設值以手機為準，拿掉 BS3 才有的 xs ，欄位寫法精簡為 col-6。 斷點預設值

  • 許多單位 px 都改為 rem。 單位

  • lead 保留，但 well 拿掉了。 lead

  • .display-1, .display-2, … 共四個等級，標題粗體使用。(font-weight: 300) .display-*

  • .d-none, .d-inline, .d-block, … 設定 display 用。 .d-*

  • 用 border-top, border-bottom 取代 hr，無障礙網站強調語意，單純分隔線沒必要。 hr

  • .list-inline-item 就是 BS3 的 .list-inline > li 。 .list-inline-item

  • blockquote 標籤(tag)移除，改為 class 。 blockquote

  • 圖片滿版 RWD ， BS3 的 .img-responsive 在 BS4 改為 .img-fluid .img-fluid

  • 注意 .img-fluid 是設定 max-width: 100% ，如果圖片小於容器，那將維持圖片原本大小；如果圖片大於容器，那圖片寬度將等於容器寬度。

  • figure 標籤(tag)移除，改為 class 。 figure

  • .container 在 BS3 做 media query 後是寫死寬度，但在 BS4 是用 max-width 取代。 .container

  • BS4 的 .row 是用 flex 做的，而且有做換行。 .row

  • .d-flex 反而沒有實作換行，如有需要需自己加上。 .d-flex

  • .no-gutters 讓欄之間的間距不見，一般套用在 .row 上。 .no-gutters

  • .col 可以直接拿來做等寬的欄。 .col

  • flex-basis 控制物件主軸方向的長度 (資料走向)，主軸橫向(flex-direction: row;)就是寬度、主軸縱向(flex-direction: column;)就是高度。

  • .col 如果拿來做橫向 (flex-direction: row;) 的沒問題，因為所有的 div 預設就是視窗寬度，所以flex-basis: 0 沒問題。

  • 但所有的 div 預設不會是視窗高度，所以如果父層設定縱向(flex-direction: column;) 會出問題，因為 .col 的 flex-basis:0 ，而父層沒有設定高度，就會壞掉。

  • .col-auto 寬度不斷延長延長延長不會換行，感覺難以掌控。 .col-auto

  • .col-* 伸展值、收縮值均為 0，僅用 flex-basis 設定寬度。 .col-*

  • .order-* 就是 flex 的 order 將物件做排序。以 .order-first 來說，所有物件預設 order: 0，所以將其設定為 -1 就會跑到最前面。 .order-*

  • .offset-* 在 BS3 的寫法是 .col-sm-offset-1，就是位移 n 欄的寬度。 .offset-*

  • offset 容易和 BS3 的 push 和 pull 搞混。push 和 pull 使用的是 left 和 right，跟 position 有關；而 offset 使用的是 margin ，會佔空間。 BS3 的 push 和 pull

  • mr-auto, ml-auto

  • .table 有九個顏色( 8 個基本款 + active )。 .table

  • .table-sm 在 BS3 的寫法是 .table-condensed，作用是減少 padding，讓表格擠一點，不要太空洞。sm 表示小一點，lg 表示大一點。

  • .table-borderless 拿掉表格框線。

  • .table-striped 條紋式表格。

  • .table-primary, .table-顏色 改變表格顏色。

參考