(1) Bootstrap 5 筆記

語系設置

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p lang="zh-TW">繁中台灣 zh-TW: 骨，花、學、崎、雨</p>
    <p lang="zh-HK">繁中香港 zh-HK: 骨，花、學、崎、雨</p>
    <p lang="zh-CN">簡中 zh-CN: 骨，花、學、崎、雨</p>
    <p lang="ja">日文 ja: 骨，花、學、崎、雨</p>
</body>
</html>

文件介紹

知識點：box-sizing

由於 padding 及 border 會改變元素運算後的寬度，避免麻煩的計算(margin 不算)。
Bootstrap 預設載入 box-sizing: border-box。定義的寬度 = 實際呈現的寬度。

知識點：CSS Variables

定義 css 變數的兩大方法，

定義在全域
定義在區域

/* 全域 */
:root{
    --primary: blue;
}

.bg-primary{
    background-color: var(--primary);
}

/* 區域變數 */
.local{
    --primary: orange;
}

.box{
    height: 100px;
    width: 100px;
    padding: 20px;
    border: #eee 5px solid;
}

<div class="box bg-primary"></div> //藍色
<div class="local">
    <div class="box bg-primary"></div> // 橘色
</div>

知識點：rem 單位

此單位可以視為一種倍率的計算，例如: 2rem 就是兩倍。

em 採用繼承的模式，會採用外層的大小，再重新做計算。
rem 採用最外層的 px，比較可以預期變化。

網頁預設大小為 16px，可以在檔案中加入以下程式，可以將預設改為 10px，計算上更為方便。

1
2
3

:root{
    font-size: 62.5%;
}

知識點：系統預設字體

系統	系統預設	英文字體	中文字體
Windows		Segoe	Microsoft JhengHei / 微軟正黑體
Mac OS	-apple-system	San Francisco / Helvetica Neue	PingFang(蘋方) / Heiti TC
IOS	-apple-system	San Francisco / Helvetica Neue	PingFang(蘋方) / Heiti TC
Android		Roboto	Noto Sans

CSS Reset 做了什麼

Reboot 專用 CSS

Bootstrap 做的改變

會套用 Bootstrap 預設字體、字體大小、行間距離
套用 box-sizing
套用 list 等其他標準 Normalize 樣式
包含 Bootstrap 所釋出的變數色彩

1 2	`<div class="box" style="background-color: var(--bs-primary);"> </div>`

文字排版

標題

1 2	`<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2>`

不能直接使用 HTML 元素時，可使用 .h1 到 .h6 的類別

1 2	`<p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p>`

小標題文本

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

顯示標題

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

前導主題

1
2
3

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>

行內文本元素

<s>、<u> 標籤大部分已被棄用，雖然他的與<del>、<ins>效果相同。

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

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

<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>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

縮寫

1 2	`<p><attr title="attribute">attr</attr></p> <p><abbr title="HyperText Markup Language" class="initialism">加入 initialism</abbr></p>`

引用

1
2
3

<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

引用來源

有大小字之分的引用來源

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

對齊

left => start
right => end

<!-- text-end 定位在後方 -->
<figure class="text-center">
<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>

列表

無樣式

<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
  <ul>
    <li>are unaffected by this style</li>
    <li>will still show a bullet</li>
    <li>and have appropriate left margin</li>
  </ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>

行內

<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>

描述型列表對齊

本段主要使用格線系統進行排版，建議等熟悉格線系統後再來回顧練習。

<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>

<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
  <p>Definition for the term.</p>
  <p>And some more placeholder definition text.</p>
</dd>

<!-- 加入 text-truncate 避免文字過長 -->
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
</dl>

響應式圖片

img-fluid

1	`<img src="https://images" class="img-fluid" alt="...">`

圖片縮略圖

.img-thumbnail，讓圖片呈現圓角 1px 的邊框。
rounded，圖片圓角

1	`<img src="https://images" class="img-fluid rounded img-thumbnail " alt="..." >`

對齊圖片

用輔助方法浮動類別 或是文字對齊類別 讓圖片對齊。
屬性為block的圖片可以使用.mx-auto margin通用類別置中。
使用 float 的話，外層需要使用 clearfix。

<div class="clearfix">
    <img src="https://images" class="rounded float-start" 
    alt="..." style="width: 200px; height: 200px; object-fit: cover;">
    <img src="https://images" class="rounded float-end" 
    alt="..." style="width: 200px; height: 200px; object-fit: cover;">
</div>

置中

加入 mx-auto 來置中對齊

1 2	`<img src="https://images" class="rounded mx-auto d-block" alt="..." style="width: 200px; height: 200px; object-fit: cover;">`

加入 text-center 來置中對齊(使用在外層 div)

<div class="text-center">
    <img src="https://images" class="rounded" alt="..." 
    style="width: 200px; height: 200px; object-fit: cover;">
</div>

圖片區

需要顯示一段內容，例如包含可選擇標題的圖檔時，可以考慮使用 <figure>。

<figure class="figure">
    <img src="https://images.unsplash.com/photo-1580912534328-fbc00d6f7e9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=747&q=80" class="figure-img img-fluid rounded" alt="..." style="width: 400px; height: 300px; object-fit: cover;">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

使用 text-center, text-end 來對齊它

<figure class="figure">
    <img src="https://images.unsplash.com/photo-1580912534328-fbc00d6f7e9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=747&q=80" class="figure-img img-fluid rounded" alt="..." style="width: 400px; height: 300px; object-fit: cover;">
    <figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>

Bootstrap

#HTML&CSS

(1) Bootstrap 5 筆記

https://phoebeho.com/Bootstrap/20220401/102023594/

作者

Phoebe

發布於

2022年4月1日

許可協議

(2) Bootstrap 5 筆記上一篇

認識 socket.io 下一篇