Bootstrap 4 爬 Code [Part1]

by on # css

看 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-顏色 改變表格顏色。

參考

css, Bootstrap 4
comments powered by Disqus