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 介紹囉!

 


參考資料:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料