Bootstrap 4 重點精華

Bootstrap 為最廣泛網站所使用的 CSS Framework，CSS 純手刻得要死要活不如先套再說，這裡將所學重點做個總整理，希望能對大家有幫助。

特點

元件化、標準網頁格線、標準化語意、前後端開發整合容易、780 萬個網頁使用

v4 與 v3 的差異

• Less to Sass
• IE 8、IE 9 掰
• float to flexbox
• 增加中斷點：575px
• px to rem
• font-size：14px to 16px
• 大方色彩
• 充滿生命力按鈕
• 靈活變化
• 移除與新增元件
• 重新設計的文件

Basic Content

Reboot

重新規範化元素風格

• windows 英文字體為黑體字，中文字體卻為明體字
  • 因為 bs 4 將字體部分以系統預設為主，但 windows、Android 則沒有預設這件事，所以 bs 4 以自載入字體的方式處理，英文字體為 Segoe UI，中文字體為新細明體
  • 建議 css 自專案加上 Microsoft JhengHei (微軟正黑體)，協調畫面才一致 (在 “Segoe UI” 字體堆疊前面)
• box-sizing: border-box
  • 定義的寬度 = 實際呈現的寬度
• native font stack

  $font-family-sans-serif:
    // Safari for OS X and iOS (San Francisco)
    -apple-system,
    // Chrome < 56 for OS X (San Francisco)
    BlinkMacSystemFont,
    // Windows
    "Segoe UI",
    // Android
    "Roboto",
    // Basic web fallback
    "Helvetica Neue", Arial, sans-serif,
    // Emoji fonts
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
  

Typography

• 含語意的標籤
• 不含語意，但具有樣式的 class
• Display headings：如果你覺得 h1 標題不夠大的話…
• list-unstyled、list-inline
• text-truncate：把多餘的字裁切掉變點點點

images

• 響應式：
  • .img-fluid (width: 100%, height: auto;)
• 縮圖：
  • .img-thumbnail
  • .rounded
• 對齊：
  • float (float-left、float-right，要注意父層 clearfix)
  • .mx-auto + .d-block 置中
  • 父層 .text-center 置中

figures

圖片可以增加描述

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

table

bs 4 建議是完整結構

<table class="table table-responsive">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Layout

Grid

• 讓畫面有設計感、有規則、有規律，會讓我們覺得比較整齊
• 12 欄是較多數字的公倍數
  • total width：960px (外圍 gutter 是內圍的一半)
  • Number of Columns：12
  • gutter width：20px
  • column width：60px
• .container>.row>.col-xx>{content}
• .row：display: flex、margin-x: -15px
• 行動優先
  • 透過許多 media queries 設立中斷點，並製作具彈性的排版

    // Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap
    
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    

  • xs (預設斷點) -> sm -> md -> lg
    • xs：<= 575px
    • sm：576px ~ 767px
    • md：768px ~ 991px
    • lg：992px ~ 1199px
    • xl：>= 1200px
  • .col-* (xs 省略) -> .col-sm-* -> .col-md-* -> .col-lg-* -> .col-xl-*
  • 舉例：

    <div class="row">
      <div class="col-sm-4 side-bar">
      </div>
      <div class="col-sm-8 content">
      </div>
    </div>
    

    畫面寬度小於 576px 將會調整為 12 滿版寬 (單欄)，md 則為小於 768px 調整為單欄，所以會是組合式，就有多裝置自適應效果

Flex

可以寫成

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

自動幫你分配比例為三等寬 (.col: flex-basis: 0; flex-grow: 1; max-width: 100%;)

• 傳統 float 如同水一樣可左右流動，但這概念已無法應付現在多元的排版方式，如：置中、垂直、等距等等
• flex 解決了這樣問題，並且具更優於 float 的彈性
• 詳細 flex 可參考我另一篇 blog：CSS3 Flexbox 重點精華

Layout

.container

• 用來定義最外層的容器
• 種類：
  • 滿版寬 (.container-fluid)
    • 不需要嚴謹定義最大寬度
    • width: auto;
  • 階段固定寬 (.container)
    • 階段美感要求、需最大寬度限制
    • 低於 575px：width: auto;
    • 大於 575px：width: 540px;
    • 大於 768px：width: 720px;
    • 大於 992px：width: 960px;
    • 大於 1200px：width: 1140px;
• 使用到 grid system 一定要用 .container 作為最外層包裝，會補回 gutter on outside (margin-x: 15px)

Utilities

Flex

官方文件：https://getbootstrap.com/docs/4.0/utilities/flex/

• 外層要有 flex 的屬性
• direction 是排序方法
• justify-content 主軸線對齊
• align-item 交錯軸對齊
• align-self 自己這個元件的交錯軸對齊

bs 就是做成了 class，並加上響應式項目 (組合技)：屬性名-尺寸-屬性值

其他特別 (少用) 屬性：

• flex-wrap
  • 物件超出範圍的時候，要不要做換行
  • row 預設會加上 wrap，會強制換行
  • flex-wrap 換行、flex-nowrap 不換行
• align-content
  • 在 wrap (換行) 屬性下才能使用
  • 全體元件對齊屬性 (不是僅針對換行的元件)
• order
  • 排列順序
  • .order-1、.order-2，數值小的會往前排列
  • 行動跟 PC 有不同排序的時候

Spacing

官方文件：https://getbootstrap.com/docs/4.0/utilities/spacing/

• 讓元件友善加上 margin 與 padding 的屬性
• 屬性-方向-尺寸 (組合技)：
  • {property}{sides}-{size} for xs
  • {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl
  • sides 沒填就是 4 個方向都填
  • size：0 ~ 5，$spacer * (0、.25、.5、1、1.5、3)
  • .m*-auto 可運用在 flex (很常用到)

 

以上是通用的 bootstrap 屬性與類別介紹，針對細部的 utilities 與 components 讓我們另闢 blog 介紹囉！

• Bootstrap 4 Utilities 重點精華
• Bootstrap 4 Components 重點精華

 

---

參考資料：

• Bootstrap 4 超詳盡解析
• Bootstrap 官方文件
• A Complete Guide to Flexbox