Bootstrap 5 基礎簡介
介紹初步排版內容及container相關應用及如何RWD
從檢查器觀察套用顏色
套用字型大小
- 第一種方式:class命名 h1~h6
如果想使用h1-h6的樣式,不一定要套HTML標籤,可以在class上設定,如下 - 第二種方式:class命名 display-1
66**顯示如下
使用**class display-1
前導部分
- 使用
.lead
讓一個段落脫穎而出。1
2
3<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
- 顯示效果
- 使用
<del>
跟<ins>
較新1
2
3
4
5
6
7
8<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>
清除block區塊
使用<list-inline
如果要有區隔(空白)附上<list-inline-item>
將過長文字去掉
使用<text-truncate>
將過長文字去掉,過長的文字會用…顯示,
圖片
隨視窗縮放圖片
<class="img-fluid">
隨著視窗縮放圖片
圖片加圓角
<class ="rounded"
在區塊上加邊框
加上
水平置中圖片
mx-auto
=>margin auto
或者<class="text-center">
格線系統
斷點
RWDdisplay-none
可以套用以上尺寸來達到多大視窗隱藏
行動版要隱藏 桌面板要顯示:
d-none d-xl-block
皆以行動版為預設>lg以上是桌面
container
格線系統
外層至少要有一層container,不會有水平卷軸
col-auto
隨內容調整寬度
RWD
邏輯要這樣:
遇單欄可不製作
預設即為單欄
Gutter
兩個容器兩側皆會有padding,
垂直水平皆套用