Bootstrap 排版樣式
阿新 • • 發佈：2019-02-03
頁面排版
1.頁面主體
Bootstrap將全域性：
- font-size 設定為14px;
- line-height 設定為1.428（20px）;
- p標籤 設定為1/2行高（10px）;
建立包含段落突出的文字：
新增 class=”lead”，得到更大更粗、行高更高的文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link 執行結果：
2.標題
Bootstrap 定義了所有的 HTML 標題（h1 到 h6）的樣式,i可以嵌入一個small元素作為副標題。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" 執行結果：
3.內聯文字元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--新增標記-->
<p><mark>標記1</mark></p>
<p class="mark">標記2</p>
<!--加線條的文字-->
<del> Boostrap del; </del>
<s> Bootstrap s; </s>
<ins> Bootstrap ins; </ins>
<!--強調-->
<br />
<small>small 標準字號的85%; </small>
<strong> 加粗 700; </strong>
<em> em 設定為斜體 ;</em>
</body>
</html>執行結果：
4.對齊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<p class="text-left">向左對齊文字</p>
<p class="text-center">居中對齊文字</p>
<p class="text-right">向右對齊文字</p>
</body>
</html>執行結果：
5.大小寫及縮寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--設定英文大小寫-->
<p class="text-lowercase">Bootstrap 小寫;</p>
<p class="text-uppercase">Bootstrap 大寫;</p>
<!--設定單詞首字母大寫-->
<p class="text-capitalize">bootstrap 大寫;</p>
<!--設定縮寫-->
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>執行結果：
6.地址address
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--去掉了傾斜，設定了行高，底部20px-->
<address>
<strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
</body>
</html>執行結果：
7.引用文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--預設：增加了邊線，設定了字型大小和內外邊距-->
<blockquote>預設Bootstrap 引用</blockquote>
<!--反向引用-->
<blockquote class="blockquote-reverse">反向引用</blockquote>
</body>
</html>執行結果：
8.列表排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 例項 - 列表</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--有序列表和無序列表-->
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!--移出預設樣式-->
<ul class="list-unstyled">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!--設定成內聯-->
<ul class="list-inline">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!--定義列表-->
<dl>
<dt>描述1</dt>
<dd>列表1</dd>
<dt>描述2</dt>
<dd>列表2</dd>
</dl>
<!--水平排列定義列表-->
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
</body>
</html>執行結果：
9.程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<!--內聯程式碼-->
<code><section></code>
<!--使用者輸入-->
press <kbd>ctrl +</kbd>
<!--程式碼塊-->
<pre><p>Please input...</p></pre>
</body>
</html>執行結果：
