建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 文字排版
Bootstrap 5 默認(rèn)設(shè)置
Bootstrap 5 默認(rèn)的 font-size 為 16px, line-height 為 1.5。
默認(rèn)的 font-family 為 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的
元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
-
Bootstrap 中定義了所有的 HTML 標(biāo)題（h1 到 h6）的樣式。請(qǐng)看下面的實(shí)例：
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
h1 Bootstrap 標(biāo)題
h1
>
<
h2
>
h2 Bootstrap 標(biāo)題
h2
>
<
h3
>
h3 Bootstrap 標(biāo)題
h3
>
<
h4
>
h4 Bootstrap 標(biāo)題
h4
>
<
h5
>
h5 Bootstrap 標(biāo)題
h5
>
<
h6
>
h6 Bootstrap 標(biāo)題
h6
>
div
>
嘗試一下 ?
你也可以使用 .h1 到 .h6 類來(lái)設(shè)置元素的樣式：
實(shí)例
<
div
class
=
"
container
"
>
<
p
class
=
"
h1
"
>
h1 Bootstrap 標(biāo)題
p
>
<
p
class
=
"
h2
"
>
h2 Bootstrap 標(biāo)題
p
>
<
p
class
=
"
h3
"
>
h3 Bootstrap 標(biāo)題
p
>
<
p
class
=
"
h4
"
>
h4 Bootstrap 標(biāo)題
p
>
<
p
class
=
"
h5
"
>
h5 Bootstrap 標(biāo)題
p
>
<
p
class
=
"
h6
"
>
h6 Bootstrap 標(biāo)題
p
>
div
>
嘗試一下 ?
Display 標(biāo)題類
Bootstrap 還提供了四個(gè) Display 類來(lái)控制標(biāo)題的樣式: .display-1, .display-2, .display-3, .display-4。
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
Display 標(biāo)題
h1
>
<
p
>
Display 標(biāo)題可以輸出更大更粗的字體樣式。
p
>
<
h1
class
=
"
display-1
"
>
Display 1
h1
>
<
h1
class
=
"
display-2
"
>
Display 2
h1
>
<
h1
class
=
"
display-3
"
>
Display 3
h1
>
<
h1
class
=
"
display-4
"
>
Display 4
h1
>
div
>
嘗試一下 ?
在 Bootstrap 5 中 HTML 元素用于創(chuàng)建字號(hào)更小的顏色更淺的文本:
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
更小文本標(biāo)題
h1
>
<
p
>
small 元素用于字號(hào)更小的顏色更淺的文本:
p
>
<
h1
>
h1 標(biāo)題
<
small
>
副標(biāo)題
small
>
h1
>
<
h2
>
h2 標(biāo)題
<
small
>
副標(biāo)題
small
>
h2
>
<
h3
>
h3 標(biāo)題
<
small
>
副標(biāo)題
small
>
h3
>
<
h4
>
h4 標(biāo)題
<
small
>
副標(biāo)題
small
>
h4
>
<
h5
>
h5 標(biāo)題
<
small
>
副標(biāo)題
small
>
h5
>
<
h6
>
h6 標(biāo)題
<
small
>
副標(biāo)題
small
>
h6
>
div
>
嘗試一下 ?
Bootstrap 5 定義 標(biāo)簽及 .mark 類為黃色背景及有一定的內(nèi)邊距:
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
高亮文本
h1
>
<
p
>
使用 mark 元素來(lái)
<
mark
>
高亮
mark
>
文本。
p
>
div
>
嘗試一下 ?
Bootstrap 5 定義 HTML 元素的樣式為顯示在文本底部的一條虛線邊框:
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
Abbreviations
h1
>
<
p
>
The abbr element is used to mark up an abbreviation or acronym:
p
>
<
p
>
The
<
abbr
title
=
"
World Health Organization
"
>
WHO
abbr
>
was founded in 1948.
p
>
div
>
嘗試一下 ?
對(duì)于引用的內(nèi)容可以在
上添加 .blockquote 類 :實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
Blockquotes
h1
>
<
p
>
The blockquote element is used to present content from another source:
p
>
<
blockquote
class
=
"
blockquote
"
>
<
p
>
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
p
>
<
footer
class
=
"
blockquote-footer
"
>
From WWF's website
footer
>
blockquote
>
div
>
嘗試一下 ?
Bootstrap 5 定義 HTML
元素的樣式如下:
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
Description Lists
h1
>
<
p
>
The dl element indicates a description list:
p
>
<
dl
>
<
dt
>
Coffee
dt
>
<
dd
>
- black hot drink
dd
>
<
dt
>
Milk
dt
>
<
dd
>
- white cold drink
dd
>
dl
>
div
>
嘗試一下 ?
Bootstrap 5 定義 HTML
元素的樣式如下:實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
代碼片段
h1
>
<
p
>
可以將一些代碼元素放到 code 元素里面:
p
>
<
p
>
以下 HTML 元素:
<
code
>
span
code
>
,
<
code
>
section
code
>
, 和
<
code
>
div
code
>
用于定義部分文檔內(nèi)容。
p
>
div
>
嘗試一下 ?Bootstrap 5 定義 HTML 元素的樣式如下:
實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
Keyboard Inputs
h1
>
<
p
>
To indicate input that is typically entered via the keyboard, use the kbd element:
p
>
<
p
>
Use
<
kbd
>
ctrl + p
kbd
>
to open the Print dialog box.
p
>
div
>
嘗試一下 ?Bootstrap 5 定義 HTML
元素的樣式如下:實(shí)例
<
div
class
=
"
container
"
>
<
h1
>
Multiple Code Lines
h1
>
<
p
>
For multiple lines of code, use the pre element:
p
>
<
pre
>
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
pre
>
div
>
嘗試一下 ?更多排版類
下表提供了 Bootstrap5 更多排版類的實(shí)例：
類名 描述 實(shí)例 .lead 讓段落更突出 嘗試一下 .small 指定更小文本 (為父元素的 85% ) 嘗試一下 .text-start 左對(duì)齊 嘗試一下 .text-center 居中 嘗試一下 .text-end 右對(duì)齊 嘗試一下 .text-justify 設(shè)定文本對(duì)齊,段落中超出屏幕部分文字自動(dòng)換行 嘗試一下 .text-nowrap 段落中超出屏幕部分不換行 嘗試一下 .text-lowercase 設(shè)定文本小寫 嘗試一下 .text-uppercase 設(shè)定文本大寫 嘗試一下 .text-capitalize 設(shè)定單詞首字母大寫 嘗試一下 .initialism 顯示在 元素中的文本以小號(hào)字體展示，且可以將小寫字母轉(zhuǎn)換為大寫字母 嘗試一下 .list-unstyled 移除默認(rèn)的列表樣式，列表項(xiàng)中左對(duì)齊 ( 和
中)。 這個(gè)類僅適用于直接子列表項(xiàng) (如果需要移除嵌套的列表項(xiàng)，你需要在嵌套的列表中使用該樣式)
嘗試一下 .list-inline 將所有列表項(xiàng)放置同一行 嘗試一下
本文名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5文字排版
網(wǎng)站路徑：http://m.fisionsoft.com.cn/article/ccsjijo.html
