参考手册
Bootstrap 3 教程
Bootstrap 3 网格
Bootstrap 3 表格

Bootstrap 文本/排版

Bootstrap 的默认设置

Bootstrap 的全局默认 font-size（字体大小） 是 14 px, 以及 line-height（行高） 是 1.428。

这个样式将应用于 <body> 元素以及所有的 <p> 元素。

此外，所有的 <p> 元素都有一个底边距，它等于 line-height (默认 10 px) 的一半。

Bootstrap 与 浏览器默认样式

在本章中，我们将介绍一些 HTML 元素，它们的样式通过 Bootstrap 将与浏览器默认设置略有不同。

<h1> - <h6>

默认情况下，Bootstrap 以一下方式将设置 HTML 标题的样式 (<h1> 至 <h6>):

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>h1 Bootstrap 标题 (36px)</h1>
  13.   <h2>h2 Bootstrap 标题 (30px)</h2>
  14.   <h3>h3 Bootstrap 标题 (24px)</h3>
  15.   <h4>h4 Bootstrap 标题 (18px)</h4>
  16.   <h5>h5 Bootstrap 标题 (14px)</h5>
  17.   <h6>h6 Bootstrap 标题 (12px)</h6>
  18. </div>
运行一下

<small>

在 Bootstrap 中，HTML <small> 元素用于在任何标题中创建更轻的次要从属文本:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>较轻的，从属文本</h1>
  13.   <p>small 元素用于在任何标题中创建较轻的从属文本:</p>
  14.   <h1>h1 标题 <small>从属文本</small></h1>
  15.   <h2>h2 标题 <small>从属文本</small></h2>
  16.   <h3>h3 标题 <small>从属文本</small></h3>
  17.   <h4>h4 标题 <small>从属文本</small></h4>
  18.   <h5>h5 标题 <small>从属文本</small></h5>
  19.   <h6>h6 标题 <small>从属文本</small></h6>
  20. </div>
  22. </body>
  23. </html>
运行一下

<mark>

Bootstrap will style the HTML <mark> element in the following way:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>高亮文本</h1>
  13.   <p>使用 mark 元素来 <mark>高亮</mark> 文本</p>
  14. </div>
  16. </body>
  17. </html>
运行一下

<abbr>

Bootstrap 将按照以下方式设置 HTML <abbr> 元素的样式:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>缩写</h1>
  13.   <p>abbr 元素用于标记缩写或首字母缩略词:</p>
  14.   <p><abbr title="World Health Organization">WHO</abbr> 建立于 1984 年</p>
  15. </div>
  17. </body>
  18. </html>
运行一下

<blockquote>

Bootstrap将以以下方式设置 HTML <blockquote> 元素的样式:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>Blockquotes</h1>
  13.   <p>blockquote 元素用于显示来自其他来源的内容:</p>
  14.   <blockquote>
  15.     <p>50 年来，WWF(世界自然基金会)一直在保护自然的未来。世界自然基金会是世界领先的保护组织，在 100 个国家开展工作，得到了美国 120 万会员和全球近 500 万会员的支持。</p>
  16.     <footer>摘自 WWF 的网站</footer>
  17.   </blockquote>
  18. </div>
  20. </body>
  21. </html>
运行一下

<dl>

Bootstrap 将按照以下方式设置 HTML <dl> 元素的样式:

实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>描述列表</h1>
  13.   <p>dl 元素表示描述列表:</p>
  14.   <dl>
  15.     <dt>Coffee</dt>
  16.     <dd>- black hot drink</dd>
  17.     <dt>Milk</dt>
  18.     <dd>- white cold drink</dd>
  19.   </dl>
  20. </div>
  22. </body>
  23. </html>
运行一下

<code>

Bootstrap 将按照以下方式设置 HTML <code> 元素的样式:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>代码片段</h1>
  13.   <p>内联代码片段应该嵌入到 code 元素中:</p>
  14.   <p>下面是 HTML 元素: <code>span</code>, <code>section</code>, 与 <code>div</code> 定义文档中的部分。</p>
  15. </div>
  17. </body>
  18. </html>
运行一下

<kbd>

Bootstrap 将按照以下方式设置 HTML <kbd> 元素的样式:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h1>键盘输入</h1>
  13.   <p>要指示通常通过键盘输入的输入，请使用 kbd 元素:</p>
  14.   <p>使用 <kbd>ctrl + p</kbd> 打开 "打印" 对话框。</p>
  15. </div>
  17. </body>
  18. </html>
运行一下

<pre>

Bootstrap 将按以下方式设置 HTML <pre> 元素的样式:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12. <h1>多行代码</h1>
  13. <p>对于多行代码，请使用 pre 元素:</p>
  14. <pre>
  15. Text in a pre element
  16. is displayed in a fixed-width
  17. font, and it preserves
  18. both      spaces and
  19. line breaks.
  20. </pre>
  21. </div>
  23. </body>
  24. </html>
运行一下

上下文颜色和背景

Bootstrap 还有一些上下文类，可以用来提供 "有含义的颜色"。

这些文本的样式类有:.text-muted, .text-primary, .text-success, .text-info,.text-warning, and .text-danger:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>上下文颜色</h2>
  13.   <p>使用上下文样式来提供 &quot;有含义的颜色&quot;:</p>
  14.   <p class="text-muted">这个文本是安静的</p>
  15.   <p class="text-primary">这个文本是重要的</p>
  16.   <p class="text-success">这个文本表示成功</p>
  17.   <p class="text-info">这个文代表了一些信息</p>
  18.   <p class="text-warning">这个文本表示警告</p>
  19.   <p class="text-danger">这段文字代表危险</p>
  20. </div>
  22. </body>
  23. </html>
运行一下

还有一些背景样式类:.bg-primary, .bg-success, .bg-info, .bg-warning, 与 .bg-danger:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8. </head>
  9. <body>
  11. <div class="container">
  12.   <h2>上下文背景</h2>
  13.   <p>使用上下文背景来提供 &quot;有含义的颜色&quot;:</p>
  14.   <p class="bg-primary">这个文本是重要的</p>
  15.   <p class="bg-success">这个文本表示成功</p>
  16.   <p class="bg-info">这个文代表了一些信息</p>
  17.   <p class="bg-warning">这个文本表示警告</p>
  18.   <p class="bg-danger">这段文字代表危险</p>
  19. </div>
  21. </body>
  22. </html>
运行一下

更多版面设计样式

下面的 Bootstrap 样式类可以进一步添加到样式 HTML 元素中:

样式类描述实例
.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将所有列表项放在一行上试一试
.dl-horizontal将 <dl> 元素中的术语（<dt>）和描述（<dd>）并排排列。开始时与默认 <dl> 类似，但当浏览器窗口扩展时，它将并排排列试一试
.pre-scrollable使 <pre> 元素可滚动试一试

完整 Bootstrap 排版参考引用

有关所有排版元素/类的完整参考，请访问 这里。

另外，请查看本站的 Bootstrap Helper 类参考，以了解有关 contextual 上下文类的更多信息。

Bootstrap 3 网格
Bootstrap 3 表格

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML