Bootstrap 4 預設的
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 标題 (2.5rem = 40px)</h1>
<h2>h2 Bootstrap 标題 (2rem = 32px)</h2>
<h3>h3 Bootstrap 标題 (1.75rem = 28px)</h3>
<h4>h4 Bootstrap 标題 (1.5rem = 24px)</h4>
<h5>h5 Bootstrap 标題 (1.25rem = 20px)</h5>
<h6>h6 Bootstrap 标題 (1rem = 16px)</h6>
</div>
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 4 中 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 4 定義 <mark> 為黃色背景及有一定的内邊距:
<h1>高亮文本</h1>
<p>使用 mark 元素來 <mark>高亮</mark> 文本。</p>
Bootstrap 4 定義 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 4 定義 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 4 定義 HTML <code> 元素的樣式如下:
<h1>代碼片段</h1>
<p>可以将一些代碼元素放到 code 元素裡面:</p>
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定義部分文檔内容。</p>
Bootstrap 4 定義 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 4 定義 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>
下表提供了 Bootstrap4 更多排版類的執行個體:
類名
描述
執行個體
.font-weight-bold
加粗文本
嘗試一下
.font-weight-normal
普通文本
.font-weight-light
更細的文本
.font-italic
斜體文本
.lead
讓段落更突出
.small
指定更小文本 (為父元素的 85% )
.text-left
左對齊
.text-center
居中
.text-right
右對齊
.text-justify
設定文本對齊,段落中超出螢幕部分文字自動換行
.text-nowrap
段落中超出螢幕部分不換行
.text-lowercase
設定文本小寫
.text-uppercase
設定文本大寫
.text-capitalize
設定單詞首字母大寫
.initialism
顯示在 <abbr> 元素中的文本以小号字型展示,且可以将小寫字母轉換為大寫字母
.list-unstyled
移除預設的清單樣式,清單項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅适用于直接子清單項
(如果需要移除嵌套的清單項,你需要在嵌套的清單中使用該樣式)
.list-inline
将所有清單項放置同一行
.pre-scrollable
使 <pre> 元素可滾動,代碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條