Bootstrap 內容

tags: BootStrap

Date : 2022/05/18

重置 (Reboot)

請參照文件 https://bootstrap5.hexschool.com/docs/5.1/content/reboot/

若要改變字體/顏色/大小等等,
建議從變數中改變,可以保持風格統一。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

繼承

  • 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>

結果:

12345
12345
      <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> 保留結束行的格式。
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  • sub,sup 上下標

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


  • blockquote 引言
    blockquote 的預設 margin 為 1em 40px ,我們將它重新設定為 0 0 1rem 以便和其他元素有更多的一致性。
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  • code 行內程式碼

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

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


  • 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>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 用戶輸入

使用 < 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>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


*,
*::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;

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


前導主題

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


行內文本元素

請注意,這些標籤應用於語義目的:

  • <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>

attr

HTML


引用來源/引用

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>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

圖片 (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>