Bootstrap4 教程
Bootstrap4 采用了一些簡(jiǎn)單易用的自定義排版元素，讓用戶可以對(duì)標(biāo)題、正文、表格等等能夠自由定義。下面大家就一起來(lái)看看具體內(nèi)容吧。
Bootstrap 4 默認(rèn)的 font-size 為 16px, line-height 為 1.5。
默認(rèn)的 font-family 為 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
Bootstrap 中定義了所有的 HTML 標(biāo)題（h1 到 h6）的樣式。請(qǐng)看下面的實(shí)例：
Bootstrap 還提供了四個(gè) Display 類(lèi)來(lái)控制標(biāo)題的樣式: .display-1, .display-2, .display-3, .display-4。
在 Bootstrap 4 中 HTML <small> 元素用于創(chuàng)建字號(hào)更小的顏色更淺的文本:
Bootstrap 4 定義 <mark> 為黃色背景及有一定的內(nèi)邊距:
Bootstrap 4 定義 HTML <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框:
對(duì)于引用的內(nèi)容可以在 <blockquote> 上添加 .blockquote 類(lèi) :
Bootstrap 4 定義 HTML <dl> 元素的樣式如下:
Bootstrap 4 定義 HTML <code> 元素的樣式如下:
Bootstrap 4 定義 HTML <kbd> 元素的樣式如下:
Bootstrap 4 定義 HTML <pre> 元素的樣式如下:
下表提供了 Bootstrap4 更多排版類(lèi)的實(shí)例：
| 類(lèi)名 | 描述 | 實(shí)例 |
|---|---|---|
| .font-weight-bold | 加粗文本 | 運(yùn)行代碼 |
| .font-weight-normal | 普通文本 | 運(yùn)行代碼 |
| .font-weight-light | 更細(xì)的文本 | 運(yùn)行代碼 |
| .font-italic | 斜體文本 | 運(yùn)行代碼 |
| .lead | 讓段落更突出 | 運(yùn)行代碼 |
| .small | 指定更小文本 (為父元素的 85% ) | 運(yùn)行代碼 |
| .text-left | 左對(duì)齊 | 運(yùn)行代碼 |
| .text-center | 居中 | 運(yùn)行代碼 |
| .text-right | 右對(duì)齊 | 運(yùn)行代碼 |
| .text-justify | 設(shè)定文本對(duì)齊,段落中超出屏幕部分文字自動(dòng)換行 | 運(yùn)行代碼 |
| .text-nowrap | 段落中超出屏幕部分不換行 | 運(yùn)行代碼 |
| .text-lowercase | 設(shè)定文本小寫(xiě) | 運(yùn)行代碼 |
| .text-uppercase | 設(shè)定文本大寫(xiě) | 運(yùn)行代碼 |
| .text-capitalize | 設(shè)定單詞首字母大寫(xiě) | 運(yùn)行代碼 |
| .initialism | 顯示在 <abbr> 元素中的文本以小號(hào)字體展示，且可以將小寫(xiě)字母轉(zhuǎn)換為大寫(xiě)字母 | 運(yùn)行代碼 |
| .list-unstyled | 移除默認(rèn)的列表樣式，列表項(xiàng)中左對(duì)齊 ( <ul> 和 <ol> 中)。 這個(gè)類(lèi)僅適用于直接子列表項(xiàng) (如果需要移除嵌套的列表項(xiàng)，你需要在嵌套的列表中使用該樣式) | 運(yùn)行代碼 |
| .list-inline | 將所有列表項(xiàng)放置同一行 | 運(yùn)行代碼 |
| .pre-scrollable | 使 <pre> 元素可滾動(dòng)，代碼塊區(qū)域最大高度為340px,一旦超出這個(gè)高度,就會(huì)在Y軸出現(xiàn)滾動(dòng)條 | 運(yùn)行代碼 |
以上就是為大家?guī)?lái)的Bootstrap4 排版的相關(guān)設(shè)置，希望對(duì)大家有所幫助。