Bootstrap4 文字排版

Bootstrap 4 默認設置

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

<h1> - <h6>

Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。請看下面的示例：

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>h1 Bootstrap 標題 (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap 標題 (2rem = 32px)</h2>
  <h2>h2 Bootstrap 標題 (1.75rem = 28px)</h2>
  <h4>h4 Bootstrap 標題 (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap 標題 (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap 標題 (1rem = 16px)</h6>
</div>
</body>
</html>

測試看看 ?/?

Display 標題類

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <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>
</div>
</body>
</html>

測試看看 ?/?

<small>

在 Bootstrap 4 中 HTML <small> 元素用于創(chuàng)建字號更小的顏色更淺的文本:

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>更小文本標題</h1>
  <p>small 元素用于字號更小的顏色更淺的文本:</p>       
  <h1>h1 標題 <small>副標題</small></h1>
  <h2>h2 標題 <small>副標題</small></h2>
  <h2>h2 標題 <small>副標題</small></h2>
  <h4>h4 標題 <small>副標題</small></h4>
  <h5>h5 標題 <small>副標題</small></h5>
  <h6>h6 標題 <small>副標題</small></h6>
</div>
</body>
</html>

測試看看 ?/?

<mark>

Bootstrap 4 定義 <mark> 為黃色背景及有一定的內邊距:

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>高亮文本</h1>    
  <p>使用 mark 元素來 <mark>高亮</mark> 文本。</p>
</div>
</body>
</html>

測試看看 ?/?

<abbr>

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Abbreviations</h1>
  <p>abbr元素用于標記縮寫或首字母縮寫:</p>
  <p><abbr title="World Health Organization">WHO</abbr>成立于1948年.</p>
</div>
</body>
</html>

測試看看 ?/?

<blockquote>

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Blockquotes</h1>
  <p>blockquote元素用于呈現(xiàn)其他來源的內容:</p>
  <blockquote class="blockquote">
    <p>50年來，世界自然基金會一直在保護自然的未來。 世界自然基金會(WWF)是世界領先的自然保護組織，在100個國家/地區(qū)開展工作，
    得到了美國120萬會員和全球近500萬會員的支持。</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>
</body>
</html>

測試看看 ?/?

<dl>

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>描述列表</h1>    
  <p>dl元素表示描述列表:</p>
  <dl>
    <dt>咖啡</dt>
    <dd>- 黑熱飲</dd>
    <dt>牛奶</dt>
    <dd>- 白冷飲</dd>
  </dl>     
</div>
</body>
</html>

測試看看 ?/?

<code>

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>代碼片段</h1>
  <p>可以將一些代碼元素放到 code 元素里面:</p>
  <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定義部分文檔內容。</p>
</div>
</body>
</html>

測試看看 ?/?

<kbd>

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>鍵盤輸入</h1>
  <p>要指示通常通過鍵盤輸入的輸入，請使用kbd元素:</p>
  <p>使用<kbd>ctrl + p</kbd>打開“打印”對話框.</p>
</div>
</body>
</html>

測試看看 ?/?

<pre>

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

示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>多行代碼</h1>
<p>對于多行代碼，使用pre元素:</p>
<pre>
前置元素中的文本
以固定寬度顯示
字體，并保留
空間和
換行符。
</pre>
</div>
</body>
</html>

測試看看 ?/?

類名	描述	示例
.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> 元素可滾動，代碼塊區(qū)域最大高度為340px,一旦超出這個高度,就會在Y軸出現(xiàn)滾動條	嘗試一下

Bootstrap4 菜鳥教程

Bootstrap4 文字排版

Bootstrap 4 默認設置

<h1> - <h6>

Display 標題類

<small>

<mark>

<abbr>

<blockquote>

<dl>

<code>

<kbd>

<pre>

更多排版類