BootStrap
Date : 2022/05/18
請參照文件 https://bootstrap5.hexschool.com/docs/5.1/content/reboot/
若要改變字體/顏色/大小等等,
建議從變數中改變,可以保持風格統一。
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:inheit">BBBBB</div>
https://ithelp.ithome.com.tw/articles/10219679
<address>
元素重置瀏覽器的預設 font-style,由 italic 轉為 normal。line-height 現在也可以繼承屬性,另外增加 margin-bottom: 1rem。<address>
用來表示作者(或是產品主體)的聯絡資訊。使用 <br>
保留結束行的格式。blockquote
的預設 margin 為 1em 40px ,我們將它重新設定為 0 0 1rem 以便和其他元素有更多的一致性。使用 <code>
來包覆行內片段的程式碼。請確保是用跳脫字元轉譯 HTML 尖括號 。
For example, <code><section></code> should be wrapped as inline.
<pre><code> < p > Sample text here... < /p >
<p>And another line of sample text here...</p>
</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>
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
跑錨點用滑動的(EX:TOP)
會影響到動畫。要注意。
一般的標題元素能在頁面內容繁多時發揮最佳作用。當你需要突出一個標題時,請考慮使用 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>
呈現相同樣式。<small>
呈現相同樣式。<u>
呈現相同樣式。 <s>
呈現相同樣式。<b>
和 <i>
。<b>
旨在突出顯示單詞或短語,而不會增加重要性,而 <i>
主要用於語音,技術術語等。.<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>
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 讓圖片呈現圓角 1px 的邊框。
mx-auto => margin-left / right : auto
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 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>
/
<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>
<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>