Bootstrap 基礎內容文件要點說明

| Reboot 重置 |

CH4 14
路徑 : Content / Reboot

Bootstrap Reboot 像 CSS 的 Reset
Native font stack

| 字體 |

路徑 : Content / Reboot_ Native font stack

Windows 中文預設明體，建議 CSS 載入微軟正黑體 Microsoft JhengHei ，讓整體畫面協調性更一致
建議把微軟正黑體加入第2個指定已知的系統字體這邊

body{
    font-family:-apple-system,BlinkMacSystemFont,"Microsoft JhengHei UI","Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

因層級關係，記得把字體 css 放置 Bootstrap CSS 下方，微軟正黑體才會顯示出來

<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- 客製 CSS -->
    <link rel="stylesheet" href="/css/all.css">
</head>

// 出處為六角學院 ▼
Bootstrap-六角系統預設字體01

// 出處為六角學院 ▼
Bootstrap-六角ppt02

| Typography |

CH4 15
Bootstrap 路徑 :　Content / Typography

| 段落文字想與某標題文字粗細一樣大的方式 |

段落文字不會和標題一樣具語意，只有樣式一樣

把標題當寫在 class 內

<h2>我是標題具語意</h2>
<p class="h2">我不是標題，不具語意</p>

| 其餘文字與排版用法 |

Display headings 用法

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>

Inline Text Element 行內文字元素
插在整個文字段落內的標籤，不會造成斷行

<!--語意:highligh的文字 ▼-->
<p>You can use the mark tag to <mark>highlight</mark> text.</p> 

<!-- <del> 和 <s>長的一樣 -->
    <!--語意:被刪除的內容 ▼-->
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <!--語意:不確定的內容 ▼-->
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>  

<!-- <del> 和 <s>長的一樣 -->
    <!--語意:補充的內容 ▼-->
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <!--語意:下底線的效果 ▼-->
    <p><u>This line of text will render as underlined</u></p>
<!--語意:字體變小 ▼-->
<p><small>This line of text is meant to be treated as fine print.</small></p>

<!-- <strong> 和 <b>長的一樣 -->
    <!--語意:強調的粗體本文 ▼-->
    <p><strong>This line rendered as bold text.</strong></p>
    <!--語意:突出顯示，而不增加重要性 ▼-->
    <p><b>This line rendered as bold text.</b></p>

<!-- <i> 和 <em>長的一樣 -->
    <!--語意:斜體字，具語音、技術用語 ▼-->
    <p><i>This line rendered as bold text.</i></p>
    <!--語意:單純斜體字 ▼-->
    <p><em>This line rendered as italicized text.</em></p>

<!-- span 是行內元素的群組，沒有帶任何語意 ▼ -->
<p><span>This line rendered as italicized text.</span></p>

// inline text elements 示意圖語意 -出處為六角學院 ▼
Bootstrap-六角inline-text-elements-01

Abbreviations
- 滑鼠滑入會顯示文字

Bootstrap-Abbreviations-縮寫示意圖

Blockquote 引用文字 + Naming a source
- 文章、論文的章節內容引用

Bootstrap-Blockquote-引用文字

list
- 如想清除 ul li 前方會出現的預設標籤樣式，可加上 .list-unstyled
  –inline行內
- 想要在一行內表達完語意 ( 下方圖示達爾文、米開朗基羅、拉斐爾 ) ▼

Bootstrap-inline行內示意圖

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Description list alignment
- 描述型清單，較常使用在名詞解釋，左方名詞右方解釋
- dl 為描述型清單的最外框，dt 左邊標題， dd 右邊描述
- 網頁範例中出現的 .text-truncate 會把太長的文字裁切掉
- 順序
  - dl.row
    - dt.col-sm-3
    - dd.col-sm9

Bootstrap-Description list alignment示意圖

| Images |

CH4 16
路徑 : Content / images

Responsive images
- 不管圖片大於或小於容器，建議加上 .img-fluid 讓圖片 max-width:100%; 和 height:auto; ( 圖片放大不會大於原始尺寸 ) 可參考此文章
圖片對齊方式-置中
- a. 把 img 從行內元素變區塊元素 .d-block 並使用 .mx-auto 使其置中
- b. 以 .text-center 包 img ，內層圖片文字皆水平置中

<!--a.-->
<img class="img-fluid mx-auto d-block" width="500" src="http://lorempixel.com/1920/1000/food/1" alt="">

<!--b-->
<div class="text-center">
    <img class="ing-fluid" width="500" src="http://lorempixel.com/1920/1000/food/1" alt="">
    <h3>title</h3>
</div>

另外這邊使用 .float-left 與 .float-right 要記得使用 clearfix 清除浮動
- 路徑 Utilities / Clearfix

| Figures 圖片與描述 |

路徑 : Content / Figures

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

| Tables 表格 |

CH4 17
路徑 : Content / Tables

Bootstrap 滿重視表格的結構
表格的表頭會用 <thead></thead> 包起
- <th scope="col">#</th> 代表 # 下的一整個直式欄位 → 1 2 3
表格主要內容於 <tbody></tbody> 內
- 一個 tr 代表一個橫列
  - tr 橫列內可放入此橫列的標題 th 與內容 td
  - <th scope="row">1</th> 代表 1的那一整個橫式欄位 → Mark Otto @mdo
Captions
- 類似表格的註解，會出現於表格下方，有助於幫助瀏覽者了解表格是做甚麼用的
- <caption>此在輸入字</caption>
表格完成後，可於 table 加上 Class， Bootstrap 內提供不同樣式可參考
響應式表格 Responsive tables
- 需於 <table> 外層加上一個 div .table-responsive
- 亦可於 Breakpoint specific 選擇想要的斷點進行響應式表格
- 寬度在中斷點以下時會出現水平捲軸，寬度以上時，則會維持正常

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

統整 table 程式順序
- table
  - thead
    - tr
      - th → <th scope="col"> </th>
  - tbody
    -tr
    - th → <th scope="row"> </th>
    - td
  - tfoot 類似網頁裡的footer標籤出處

Bootstrap-table表格示意圖

<table class="table">
  <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>

資料來源

六角學院 – 精通 Bootstrap 4 開發超強不解釋
六角中譯 Bootstrap 官網
Bootstrap 官方網站