Bootstrap4 排版

2018-11-12 16:54 更新

排版

Bootstrap4 采用了一些簡單易用的自定義排版元素，讓用戶可以對標題、正文、表格等等能夠自由定義。下面就一起來看看具體內(nèi)容吧。

Bootstrap4 默認設(shè)置

Bootstrap4 默認的 font-size 為 16px, line-height 為 1.5。

默認的 font-family 為 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

標題

Bootstrap4 中定義了所有的 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>

Display 標題類

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <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>
</div>
</body>
</html>

<mark>

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

<div class="container">
  <h1>高亮文本</h1>    
  <p>使用 mark 元素來 <mark>高亮</mark> 文本。</p>
</div>

<abbr>

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h1>Abbreviations</h1>
  <p>abbr用來在文本下顯示一條虛線邊框</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
</body>
</html>

<blockquote>

對于引用的內(nèi)容可以在 <blockquote> 上添加 .blockquote 類 :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h1>Blockquotes</h1>
  <p>blockquote元素用于呈現(xiàn)引用的內(nèi)容：</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>
</body>
</html>

<dl>

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h1>Description Lists</h1>    
  <p>DL元素用于指示描述列表</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>
</body>
</html>

<code>

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h1>代碼片段</h1>
  <p>可以將一些代碼元素放到 code 元素里面:</p>
  <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定義部分文檔內(nèi)容。</p>
</div>
</body>
</html>

<kbd>

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h1>鍵盤輸入</h1>
  <p>要指示通常通過鍵盤輸入的輸入，請使用kbd元素</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
</body>
</html>

<pre>

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h1>多行代碼</h1>
<p>對于多行代碼，請使用pre元素:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>
</body>
</html>

更多排版類

下表提供了 Bootstrap4 更多排版類的說明：

類名描述
.font-weight-bold加粗文本
.font-weight-normal普通文本
.font-weight-light更細的文本
.font-italic斜體文本
.lead讓段落更突出
.small指定更小文本 (為父元素的 85% )
.text-left左對齊
.text-center居中
.text-right右對齊
.text-justify設(shè)定文本對齊,段落中超出屏幕部分文字自動換行
.text-nowrap段落中超出屏幕部分不換行
.text-lowercase設(shè)定文本小寫
.text-uppercase設(shè)定文本大寫
.text-capitalize設(shè)定單詞首字母大寫
.initialism顯示在 <abbr> 元素中的文本以小號字體展示，且可以將小寫字母轉(zhuǎn)換為大寫字母
.list-unstyled移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用于直接子列表項 (如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式)
.list-inline將所有列表項放置同一行
.pre-scrollable使 <pre> 元素可滾動，代碼塊區(qū)域最大高度為340px,一旦超出這個高度,就會在Y軸出現(xiàn)滾動條

以上就是為大家?guī)淼腂ootstrap4 排版的相關(guān)設(shè)置，希望對大家有所幫助。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號