标题
HTML 中的所有标题标签,<h1>
到 <h6>
均可使用。另外,还提供了 .h1
到 .h6
类,为的是给内联(inline)属性的文本赋予标题的样式。
h1. Bootstrap heading |
Semibold 36px |
h2. Bootstrap heading |
Semibold 30px |
h3. Bootstrap heading |
Semibold 24px |
h4. Bootstrap heading |
Semibold 18px |
h5. Bootstrap heading |
Semibold 14px |
h6. Bootstrap heading |
Semibold 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
在标题内还可以包含 <small>
标签或赋予 .small
类的元素,可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
页面主体
Bootstrap 将全局 font-size
设置为 14px,line-height
设置为 1.428。这些属性直接赋予 <body>
元素和所有段落元素。另外,<p>
(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
内联文本元素
Marked text
<mark>
标签 会使文字高亮
You can use the mark tag to <mark>highlight</mark> text.
被删除的文本
对于被删除的文本使用 <del>
标签。
<del>This line of text is meant to be treated as deleted text.</del>
利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本,使用 <small>
标签包裹,其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small>
元素被设置不同的 font-size
。
你还可以为行内元素赋予 .small
类以代替任何 <small>
元素。
<small>This line of text is meant to be treated as fine print.</small>
着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜体
用斜体强调一段文本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
在 HTML5 中可以放心使用 <b>
和 <i>
标签。<b>
用于高亮单词或短语,不带有任何着重的意味;而 <i>
标签主要用于发言、技术词汇等。
对齐
通过文本对齐类,可以简单方便的将文字重新对齐。
text-left 左对齐 text-center 居中 看代码
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写
通过这几个类可以改变文本的大小写。
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何 HTML 元素包裹在 <blockquote>
中即可表现为引用样式。对于直接引用,我们建议用 <p>
标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
多种引用样式
对于标准样式的 <blockquote>
,可以通过几个简单的变体就能改变风格和内容。
命名来源
添加 <footer>
用于标明引用来源。来源的名称可以包裹进 <cite>
标签中。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
另一种展示风格
通过赋予 .blockquote-reverse
类可以让引用呈现内容右对齐的效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote class="blockquote-reverse">
...
</blockquote>
代码
内联代码
通过 <code>
标签包裹内联样式的代码片段。
For example, <code><section></code> should be wrapped as inline.
用户输入
通过 <kbd>
标签标记用户通过键盘输入的内容。
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代码块
多行代码可以使用 <pre>
标签。为了正确的展示代码,注意将尖括号做转义处理。
<pre><p>Sample text here...</p></pre>
还可以使用 .pre-scrollable
类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。