---
# System prepended metadata

title: Bootstrap 內容
tags: [BootStrap]

---

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

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

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

```html
  <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>
  
```html    
      <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>` 保留結束行的格式。
![](https://i.imgur.com/AmdH2I2.png)

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

![](https://i.imgur.com/i0VP2BG.png)

--------------
+ **blockquote 引言**
`blockquote` 的預設 margin 為 1em 40px ，我們將它重新設定為 0 0 1rem 以便和其他元素有更多的一致性。
![](https://i.imgur.com/v65JQ8A.png)


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

使用 `<code>` 來包覆行內片段的程式碼。請確保是用跳脫字元轉譯 HTML 尖括號 。
```css
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
```
![](https://i.imgur.com/COowBAY.png)

-----------

+ **pre 程式碼區塊**
pre> 用於多行的程式碼。再提醒一次，請確保程式碼中的任何尖括號有用跳脫字元進行轉譯。\<pre> 移除 margin-top 以及使用 rem 作為 margin-bottom 的單位。
```css=
<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>
```
![](https://i.imgur.com/DqHugm0.png)


+ **用戶輸入**

使用 `< kbd >`標籤來表示透過鍵盤輸入的指令。
```css=
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>
```
![](https://i.imgur.com/GYSJMzn.png)

------------------------
:::warning
```css
*,
*::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 以獲得更大、更細、稍具有風格化的標題樣式。

```html
  <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>

```
```css=
$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;

```
![](https://i.imgur.com/q3H9iQp.png)

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

### 前導主題
![](https://i.imgur.com/IHou9Ax.png)

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

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

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

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


-------------------
### 縮寫abbr
```html
<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>` 中。
```html
<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>
```
![](https://i.imgur.com/NCkYxKM.png)

## 圖片 (Images)
### .img-fluid
img-fluid 確保圖片比容器還大，才會有作用。
/
當圖片比容器還大的時候，會將圖片限制到100%
 **必須確保圖片比容器大**
```css
.img-fluid {
  max-width: 100%;
  height: auto;
}
```
```html
  <div class="row">
    <div class="col">
      <img class="img-fluid" src="https://picsum.photos/1920/600/?random=10">
    </div>
  </div>

```
![](https://i.imgur.com/iljuBUn.png)
### img-thumbnail 圓角
`img-thumbnail`
除了我們的 邊框-圓角 通用類別 之外，你可以使用 .img-thumbnail 讓圖片呈現圓角 1px 的邊框。

![](https://i.imgur.com/XOki9eb.png)

### 圖片對齊
![](https://i.imgur.com/UJshZyj.png)

![](https://i.imgur.com/e6KHKIB.png)
> mx-auto => margin-left / right : auto
>  
![](https://i.imgur.com/slgioVF.png)

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

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

```html
<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
```
範例
```html    
  <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>
```

## 表格

```html
<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>
```
![](https://i.imgur.com/rFjWcJA.png)

### 變數
![](https://i.imgur.com/eszPiqC.png)

- **情境顏色可以寫在 table 上**
![](https://i.imgur.com/6m1Nd53.png)

```html
    <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 上**
![](https://i.imgur.com/kxvTDaL.png)
```html
    <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 上**
![](https://i.imgur.com/6SsuBzo.png)

```html
    <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>` 範圍內的表格行上能夠呈現已滑入的狀態。
![](https://i.imgur.com/lkFwsfH.png)

```html
<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 為表格和儲存格的四邊加上邊框，也可以加上邊框顏色。
```html
<table class="table table-bordered">
  ...
</table>
```
![](https://i.imgur.com/Nunc7xt.png)
```html
<table class="table table-bordered border-primary">
  ...
</table>
```
![](https://i.imgur.com/MX1YmC5.png)

### 無框的表格
使用 .table-borderless 使表格呈現無外部邊框。
![](https://i.imgur.com/bWZqu2e.png)

### 垂直對齊

![](https://i.imgur.com/pV5I3mL.png)
```html
<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>
```
