Bootstrap 排版


Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其預設的字體堆疊。

使用 Bootstrap 的排版特性，您可以建立標題、段落、清單及其他內嵌元素。

標題

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

實例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标题</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

</body>
</html>

#運行實例»

點擊"運行實例" 按鈕查看線上實例

內聯子標題

如果需要在任何標題上新增一個內聯子標題，只需要簡單地在元素兩旁加上<small>，或是加上. small class，這樣子您就能得到一個字號更小的顏色更淺的文本，如下面實例所示：

<!DOCTYPE html>
<html> ;
<head>
   <title>Bootstrap 實例 - 內聯子標題</title>
   < stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.jsjs ;</script>
</head>
<body>

<h1>我是標題1 h1. <small>我是副標題1 h1</small> </h1> 
<h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
<lth3>我是標題3></h2>
<lth3>我是標題3>h3. < ;small>我是副標題3 h3</small></h3>
<h4>我是標題4 h4. <small>我是副標題4 h4</small><small>我是副標題4 h4</small><small>我是副標題4 h4</small></#h4> #<h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
<h6>我是標題6 h6. <
#<h6>我是副標題6 h6. <small>我是副標題我是副標題我是副標題 我是副標題; h6</small></h6>

</body>
</html>

範例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联子标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例


引導主體副本

為了給段落添加強調文本，則可以添加class="lead"，這將得到更大更粗、行高更高的文本，如下面實例所示：
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

實例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>
####
運行實例»

點擊"運行實例" 按鈕查看線上實例

#強調

HTML 的預設強調標籤< small>（設定文字為父親文字大小的85%）、<strong>（設定文字為更粗的文字）、<em>（設定文字為斜體）。

Bootstrap 提供了一些用於強調文字的類，如下面實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在 <em> 标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#縮寫

HTML元素提供了用於縮寫的標記，如WWW 或HTTP。 Bootstrap 定義 <abbr> 元素的樣式為顯示在文字底部的一條虛線邊框，當滑鼠懸停在上面時會顯示完整的文字（只要您為 <abbr> title 屬性新增了文字）。為了得到一個更小字體的文本，請添加 .initialism 到 <abbr>。 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

</body>
</html>

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

</body>
</html>

#執行實例»

點擊"運行實例" 按鈕查看線上實例

地址（Address）

使用<address> 標籤，您可以在網頁上顯示聯絡資訊。由於 <address> 預設為 display:block;，您需要使用
標籤來為封閉的位址文字新增換行。 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

</body>
</html>

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

引用（Blockquote）

您可以在任意的 HTML 文字旁邊使用預設的 <blockquote>。其他選項包括，新增一個 <small> 標籤來識別引用的來源，使用 class .pull-right 向右對齊引用。下面的實例示範了這些功能：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例實例實例; /title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.
#   <script src="/scripts/jquery.min.
   <script src="/scripts/jquery。 </script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

#</head>
<body>

#</head>
<body>

<blockquote><p>
這是一個預設的參考實例。這是一個預設的引用實例。這是一個預設的引用實例。這是一個預設的引用實例。這是一個預設的引用實例。這是一個預設的引用實例。這是一個預設的引用實例。這是一個預設的引用實例。 </p></blockquote>
<blockquote>這是一個帶有來源標題的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>##<)</small></blockquote>##<quote;/small></blockquote>##<quotequote&Too;blockquote class="pull-gt;是一個向右對齊的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote</cite></small></blockquote<
##</body> /html>


實例

#

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引用</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<blockquote><p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

</body>
</html>

###運行實例»######點擊"運行實例" 按鈕查看線上實例######

列表

Bootstrap 支援有序列表、無序列表和定義列表。

  • 有序列表：有序列表是指以數字或其他有序字元開頭的列表。

  • 無序號表：無序號表是指沒有特定順序的列表，是以傳統風格的著重號開頭的列表。如果您不想顯示這些著重號，您可以使用 class .list-unstyled 來移除樣式。您也可以透過使用 class .list-inline 把所有的清單項目放在同一行中。

  • 定義清單：在這個類型的清單中，每個清單項目可以包含 <dt> 和 <dd> 元素。 <dt> 代表 定義術語，就像字典，這是被定義的屬於（或短語）。接著，<dd> 是 <dt> 的描述。您可以使用 class dl-horizo​​ntal 把 <dl> 行中的屬於與描述並排顯示。

下面的實例示範了這些類型的清單：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列表</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列表</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#


更多排版類別

下表提供了Bootstrap 更多排版類別的實例：

##.pre-scrollable#使<pre> 元素可捲動scrollable試試看
類別描述實例
.lead使段落反白顯示嘗試
.small設定小文字(設定為父文字的85% 大小)試試看
.text-left設定文字左對齊#試試看
.text-center#設定文字居中對齊嘗試
.text-right設定文字右對齊嘗試
.text-justify設定文字對齊,段落中超出螢幕部分文字自動​​換行嘗試
.text-nowrap段落中超出螢幕部分不換行嘗試
.text-lowercase設定文字小寫嘗試
.text-uppercase設定文字大寫試試看
.text-capitalize設定單字首字母大寫#試試看
.initialism#顯示在<abbr> 元素中的文字以小號字體展示嘗試
.blockquote-reverse設定引用右對齊試試看
.list-unstyled#移除預設的清單樣式，清單項目中左對齊( <ul> 和< ol> 中)。 這個類別僅適用於直接子列表項目   (如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式)嘗試
.list-inline 將所有清單項目放置同一行嘗試
.dl-horizo​​ntal該類別設定了浮動和偏移，應用於<dl> 元素與<dt> 元素中，具體實作可以檢視實例試試看