By

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

CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

筆記

  • 1067 行以前大多是基本、字型、圖示設定，圖示寫法和 Font-Awesome 雷同。

  • 全部都使用 border-box。 border-box

  • 1080 行，html 設 font-size: 10px; 已知有問題。 font-size

  • -webkit-tap-highlight-color 這個屬性只用於 iOS (iPhone和iPad)。當你點擊一個連結或者通過 Javascript 定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。可以設置 -webkit-tap-highlight-color 為任何顏色。想要禁用這個高亮，設置顏色的 alpha 值為 0 即可。

  • img 預設 display: inline-block; ，如需置中使用 text-align: center; ；但 .thumbnail 和 .carousel-inner(幻燈片) 裡面的 img 被設為 display: block;，如果需置中使用 margin: 0 auto; 如果 class="img-responsive" 需置中也是使用 margin: 0 auto; 。 .thumbnail

  • .img-circle 用於正方形的物件(img, div)變圓形，若長方形物件會變橢圓形。class 名稱會誤導人，不僅用於圖片。 .img-circle

  • .sr-only 螢幕閱讀器，無障礙網站使用。

全名為 Screen Reader Only，意為：（僅供）螢幕閱讀器，這個 class 主要用於增強 accessbility（可訪問性）。

有時候 UI 上會出現一些僅供視覺識別的元素，比如說「漢堡包功能表按鈕」，只有視力正常的人才能清楚辨識這些元素的作用。而殘障人士，比如弱勢或盲人是不可能知道這些視覺識別元素是什麼的。他們上網使用的是螢幕閱讀器，也就是 screen reader（sr），螢幕閱讀器需要找到能辨識的文本說明然後「讀」出來給用戶聽。問題是圖形元素怎麼可能「讀出來」呢？因此我們還要寫上這些元素的文本說明，但是又不需要展示給普通使用者看到，於是加上 sr-only 的意義就在於能保證螢幕閱讀器正確讀取且不會影響 UI 的視覺呈現。

Win10 用戶可使用 Ctrl + Win + Enter 可開啟網頁朗讀功能。

  • .lead 主要是字體變大變粗。有人說拿來做為前言段落使用，但想強調任何段落的重要性，應都可使用。 .lead

  • .mark 螢光筆。 .mark

  • .list-unstyled 和 .list-inline 是加在 ul 上的，都有做 list-style: none; 移除項目符號的功能，.list-inline 只是多了變成一行的功能。 .list-unstyled 和 .list-inline

  • BS3 使用 .list-line 空白字元問題之解法

  • abbr 一個「秀下線、問號游標」的標籤，常用在縮寫註解或輔助說明上，搭配 title 使用。 abbr

  • kbd 在提示輸入鍵盤那些按鈕的時候用，例如 Ctrl + P kbd

  • .pre-scrollable 會員條款，滾到底勾選我已閱讀 —>大家說謊區 .pre-scrollable

  • pull: 用 right » position

  • push: 用 left » position

  • offset: margin

  • BS 每一個欄寬 8.333333% ，年薪百萬的關鍵。100萬 / 12月 = 8.333333萬，每月要賺8.333333萬。

  • pull, push, offset 用法

  • 2514 行重複設定了 border-box ，先別急著罵它，我們可以思考一下為什麼。原因可以理解為 BS 提供了客製化模組下載，為避免被使用者遺漏勾選，所以這邊再設定一次。 border-box again

  • .form-control 寬度 100%，讓它可以換行。 .form-control

  • 下面範例可以試著把 .form-control 拿掉看看會怎樣。

  • .radio-inline 或 .checkbox-inline 有雷，第二行開始左邊會多出 10px ，無法對齊，只能手動覆寫掉。 .radio-inline 或 .checkbox-inline

  • .btn 按鈕如果要置中，用 text-align: center; 即可，因為它是 inline-block。 .btn

  • .fade 淡入淡出效果 .fade

  • .caret 箭頭，三角形 .caret

  • CSS 中的 空格、大於（>）、加號（+）和取代符號（~）的意思，請見下方參考文章。

空格：影響的是所有小孩的意思
大於(>)：影響的是直接的小孩(direct descendant/child)

EX: 
div p：下一層中，所有 p；
div>p：下一層中，直接接觸的所有 p。

空格大於比較示意圖

加號(+)：影響的是同一階層（siblings）的標籤
取代符號(~)：影響到同一階層的所有元素，也就是「毛毛蟲隔山打一群牛」

EX: 
div+p：同一層中，div 後面直接接觸的第一個 p；
div~p：同一層中，div 後面的所有 p。

加號示意圖 取代符號示意圖

  • CSS 空格 > + ~ 使用方法範例

  • BS 裡面所有的垂直距離都是 margin-bottom，所以如果要調整上下兩個項目的距離，直接改上方項目的 margin-bottom 即可。只有 pagination (分頁列) 是調整 margin-top 。

  • .breadcrumb (麵包屑) 路徑列，麵包屑這個術語是源自於童話故事糖果屋。漢賽爾與葛麗特在前往森林的路上放置麵包屑，這樣即使迷路了，也能順著先前丟棄的麵包屑找到回家的方向。 .breadcrumb (麵包屑)

  • 麵包屑要改斜線，就改 .breadcrumb > li + li:before 的 content 即可。

  • .pagination (分頁列) 清單類型的要套用 class 都是套用在 li 上，例如下圖的 .active 和 .disabled。 .pagination(分頁列)

  • :empty 用法：如果內容「空的」就會被選到，空格也算有內容，不會被選到。 .label:empty .badge:empty

  • .jumbotron 滿版，幾乎等於 .container。如果 .container 包 .jumbotron，會是一個帶圓角的滿版； 反之，如果是 .jumbotron 包 .container，則不會帶圓角。 .jumbotron

  • .media 用在留言區好用，也有人用於最新消息。注意其 .media-body 的 display 是使用 table-cell。 .media

  • BS4 捨棄了一些在 BS3 的使用習慣，例如在 BS3 的 4700 行 .breadcrumb 下面接 li 標籤，但在 BS4 改使用 .breadcrumb-item 這個 class。 使用習慣

  • .list-group 在 BS4 多了一個 .list-group-item-action 的 class。 .list-group

  • .panel 可以搭配其他項目使用，例如搭配 .list-group 可以做出功能選單。但直接套入 .list-group 會很醜，因為有 padding。可以直接移除 .panel-body，以 .list-group 取代之即可。

  • .embed-responsive 嵌入 Google 地圖、 YouTube 影片、iframe等，使用 .embed-responsive 在父層；並視情況設定比例使用 .embed-responsive-16by9 或 .embed-responsive-4by3 ；最後在子層使用 .embed-responsive-item 。 .embed-responsive
  • .well 有雷！如果想要換背景色彩，例如加上 .bg-info 會沒有作用，原因是 .bg-info 寫在前方，會被 .well 的背景色蓋掉。 .well 在 BS4 已經拿掉。 .well

參考