天天看點

Bootstrap5 文字排版

Bootstrap 5 預設的

font-size 為 16px,

line-height 為 1.5。

預設的 font-family 為 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外,所有的 <p> 元素

margin-top: 0 、 margin-bottom: 1rem (16px)。

Bootstrap 中定義了所有的 HTML 标題(h1 到 h6)的樣式。請看下面的執行個體:

<div class="container">

<h1>h1 Bootstrap 标題</h1>

<h2>h2 Bootstrap 标題</h2>

<h3>h3 Bootstrap 标題</h3>

<h4>h4 Bootstrap 标題</h4>

<h5>h5 Bootstrap 标題</h5>

<h6>h6 Bootstrap 标題</h6>

</div>

你也可以使用 .h1 到 .h6 類來設定元素的樣式:

<p class="h1">h1 Bootstrap 标題</p>

<p class="h2">h2 Bootstrap 标題</p>

<p class="h3">h3 Bootstrap 标題</p>

<p class="h4">h4 Bootstrap 标題 </p>

<p class="h5">h5 Bootstrap 标題</p>

<p class="h6">h6 Bootstrap 标題</p>

Bootstrap 還提供了四個 Display 類來控制标題的樣式: .display-1, .display-2, .display-3, .display-4。

<h1>Display 标題</h1>

<p>Display 标題可以輸出更大更粗的字型樣式。</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>

在 Bootstrap 5 中 HTML <small> 元素用于建立字号更小的顔色更淺的文本:

<h1>更小文本标題</h1>

<p>small 元素用于字号更小的顔色更淺的文本:</p>

<h1>h1 标題 <small>副标題</small></h1>

<h2>h2 标題 <small>副标題</small></h2>

<h3>h3 标題 <small>副标題</small></h3>

<h4>h4 标題 <small>副标題</small></h4>

<h5>h5 标題 <small>副标題</small></h5>

<h6>h6 标題 <small>副标題</small></h6>

Bootstrap 5 定義 <mark> 标簽及 .marked 類為黃色背景及有一定的内邊距:

<h1>高亮文本</h1>

<p>使用 mark 元素來 <mark>高亮</mark> 文本。</p>

Bootstrap 5 定義 HTML <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框:

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

對于引用的内容可以在 <blockquote> 上添加 .blockquote 類 :

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

Bootstrap 5 定義 HTML <dl> 元素的樣式如下:

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

Bootstrap 5 定義 HTML <code> 元素的樣式如下:

<h1>代碼片段</h1>

<p>可以将一些代碼元素放到 code 元素裡面:</p>

<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定義部分文檔内容。</p>

Bootstrap 5 定義 HTML <kbd> 元素的樣式如下:

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

Bootstrap 5 定義 HTML <pre> 元素的樣式如下:

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

下表提供了 Bootstrap5 更多排版類的執行個體:

類名

描述

執行個體

.lead

讓段落更突出

嘗試一下

.small

指定更小文本 (為父元素的 85% )

.text-start

左對齊

.text-center

居中

.text-end

右對齊

.text-justify

設定文本對齊,段落中超出螢幕部分文字自動換行

.text-nowrap

段落中超出螢幕部分不換行

.text-lowercase

設定文本小寫

.text-uppercase

設定文本大寫

.text-capitalize

設定單詞首字母大寫

.initialism

顯示在 <abbr> 元素中的文本以小号字型展示,且可以将小寫字母轉換為大寫字母

.list-unstyled

移除預設的清單樣式,清單項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅适用于直接子清單項

(如果需要移除嵌套的清單項,你需要在嵌套的清單中使用該樣式)

.list-inline

将所有清單項放置同一行