# Bootstrap 內容
###### tags: `BootStrap`
Date : 2022/05/18

## 重置 (Reboot)
請參照文件 https://bootstrap5.hexschool.com/docs/5.1/content/reboot/
:::danger
若要改變字體/顏色/大小等等，
建議從變數中改變，可以保持風格統一。

:::
### 繼承
- `currentColor` : 父元素的顏色

  <div style="color:red">
    <span style="border: 2px solid currentColor;">12345</span>
  </div>
   <div style="color:blue">
    <span style="border: 2px solid currentColor;">12345</span>
  </div>

結果：
<div style="color:red">
<span style="border: 2px solid currentColor;">12345</span>
</div>

<div style="color:blue">
<span style="border: 2px solid currentColor;">12345</span>
</div>

      <div style="color:inheit">BBBBB</div>

https://ithelp.ithome.com.tw/articles/10219679

-------------------------------
+ **address 地址**
`<address>` 元素重置瀏覽器的預設 font-style，由 italic 轉為 normal。line-height 現在也可以繼承屬性，另外增加 margin-bottom: 1rem。`<address> `用來表示作者（或是產品主體）的聯絡資訊。使用 `<br>` 保留結束行的格式。

-------------
+ **sub,sup 上下標**


--------------
+ **blockquote 引言**
`blockquote` 的預設 margin 為 1em 40px ，我們將它重新設定為 0 0 1rem 以便和其他元素有更多的一致性。

----------
+ **code 行內程式碼**

使用 `<code>` 來包覆行內片段的程式碼。請確保是用跳脫字元轉譯 HTML 尖括號 。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.


-----------

+ **pre 程式碼區塊**
pre> 用於多行的程式碼。再提醒一次，請確保程式碼中的任何尖括號有用跳脫字元進行轉譯。\<pre> 移除 margin-top 以及使用 rem 作為 margin-bottom 的單位。

<pre><code> &lt; p &gt; Sample text here... &lt; /p &gt; 
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>


+ **用戶輸入**

使用 `< kbd >`標籤來表示透過鍵盤輸入的指令。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>


------------------------
:::warning

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

跑錨點用滑動的(EX:TOP)
會影響到動畫。要注意。
:::

--------------------

## 文字排版 (Typography)

### display-1/ 2/ 3/ 4/ 5 文字標題
一般的標題元素能在頁面內容繁多時發揮最佳作用。當你需要突出一個標題時，請考慮使用 display heading 以獲得更大、更細、稍具有風格化的標題樣式。

  <h1>顯示標題</h1>
  <p class="display-1">大標題的字</p>
  <p class="display-2">大標題的字</p>
  <p class="display-3">大標題的字</p>
  <p class="display-4">大標題的字</p>
  <p class="display-5">大標題的字</p>
  <p class="display-6">大標題的字</p>

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;


-------------------

### 前導主題

---------------
### 行內文本元素
請注意，這些標籤應用於語義目的：

- `<mark>` 代表被標記或是重點強調的文本，以供參考或標記。
- `<small>` 代表旁註和小字體，例如版權聲明和版權文字。
- `<s>` 代表不再相關或不再準確的元素。
- `<u> `代表一定範圍的行內文字，應指示其具有非文本註釋的方式呈現。

/
如果你只是想要在文本上加入樣式，你應該改使用以下類別：

- .mark 與 `<mark> `呈現相同樣式。
- .small 與 `<small> `呈現相同樣式。
- .text-decoration-underline 與 `<u>` 呈現相同樣式。
- .text-decoration-line-through 與` <s>` 呈現相同樣式。
當以上未顯示時，請自行使用 HTML5 中的`<b>`和 `<i>`。`<b>` 旨在突出顯示單詞或短語，而不會增加重要性，而` <i>` 主要用於語音，技術術語等。.

-------------------
### 縮寫abbr

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

---------------
### 引用來源/引用
HTML 規範要求將 blockquote 歸屬於 `<blockquote>` 之外。當提供來源歸屬，需要將 `<blockquote>` 包在 `<figure>` 之內，並且使用` <figure>` 和加上 .blockquote-footer 類別的 `<figcaption>` 或是一個區塊元素(例如：`<p>`)。還要確保將來源的名稱包在 `<cite>` 中。

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>


## 圖片 (Images)
### .img-fluid
img-fluid 確保圖片比容器還大，才會有作用。
/
當圖片比容器還大的時候，會將圖片限制到100%
**必須確保圖片比容器大**

.img-fluid {
  max-width: 100%;
  height: auto;
}

  <div class="row">
    <div class="col">
      <img class="img-fluid" src="https://picsum.photos/1920/600/?random=10">
    </div>
  </div>

### img-thumbnail 圓角
`img-thumbnail`
除了我們的 邊框-圓角 通用類別 之外，你可以使用 .img-thumbnail 讓圖片呈現圓角 1px 的邊框。


### 圖片對齊

> mx-auto => margin-left / right : auto
>

### picture 圖片標籤
HTML `<picture>` 元素 包含了零或零以上個 `<source>` (en-US) 元素以及一個` <img>` (en-US) 元素，==以為不同顯示器/裝置提供同張圖片的不同版本==。

瀏覽器將會考慮每個 `<source> `元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 `<picture>` 元素——則 `<img>` 屬性的 URL 會被選擇。被選擇的圖片將會在 `<img>` 元素存在的位置顯示。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

範例

  <picture>
    <source srcset="./orange.jpg" media="(min-width: 1200px)" class="img-fluid">
    <source srcset="./lime.jpg" media="(min-width: 576px)" class="img-fluid">
    <img src="./banana.jpg" class="img-fluid img-thumbnail">
  </picture>

## 表格

<table class="table">
  <thead> <!-- t-head -->
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody> <!-- t-body -->
    <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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
  <!-- <tfoot> t-foot -->
</table>


### 變數

- **情境顏色可以寫在 table 上**

    <table class="table table-primary">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>

/
- **情境顏色可以寫在 tr 上**

    <table class="table">
      <tr class="table-success">
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>

- **情境顏色可以寫在 td 上**

    <table class="table">
      <tr>
        <td class="table-info">1</td>
        <td class="table-danger">2</td>
        <td class="table-warning">3</td>
      </tr>
      <tr>
        <td class="table-dark">1</td>
        <td class="table-secondary">2</td>
        <td class="table-light">3</td>
      </tr>
    </table>

### 條紋與滑入變化
使用 .table-striped 在 `<tbody>` 範圍內任何表格行增加條紋樣式。
添加 .table-hover 以便在 `<tbody>` 範圍內的表格行上能夠呈現已滑入的狀態。

<table class="table table-dark table-striped table-hover">
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <!-- table-active 啟用此列中 -->
  <tr class="table-active table-success">
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <trxs>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
</table>

### 帶框的表格
使用 table-bordered 為表格和儲存格的四邊加上邊框，也可以加上邊框顏色。

<table class="table table-bordered">
  ...
</table>


<table class="table table-bordered border-primary">
  ...
</table>


### 無框的表格
使用 .table-borderless 使表格呈現無外部邊框。

### 垂直對齊


<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>