W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 排版



页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。


<h1> - <h6>

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

Example

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
尝试一下 »

<small>

对于不需要强调的inline或block类型的文本,使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。

Example

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
尝试一下 »

<mark>

若要在文中突出相关文本,请使用 <mark> 标记。

Example

Use the mark element to highlight text.

尝试一下 »

<abbr>

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。

Example

The WHO was founded in 1948.

尝试一下 »
Note 为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。

<blockquote>

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用,我们建议用 <p> 标签。

Example

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.

From WWF's website
尝试一下 »

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

Example

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.

From WWF's website
尝试一下 »

<dl>

<dl> 元素可用于带有描述的短语列表。

Example

Coffee
- black hot drink
Milk
- white cold drink
尝试一下 »

<code>

通过 <code> 标签包裹内联样式的代码片段。

Example

The following HTML elements: span, section, and div defines a section in a document.

尝试一下 »

<kbd>

通过 <kbd> 标签标记用户通过键盘输入的内容。

Example

Use ctrl + p to open the Print dialog box.

尝试一下 »

<pre>

多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。

Example

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
尝试一下 »

文本颜色与背景

Bootstrap 提供了一些用于强调文本的类,如下面实例所示:

这些文本颜色的类包括:.text-muted.text-primary.text-success.text-info.text-warning, 和 .text-danger

Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

尝试一下 »

这些背景颜色的类包括:.bg-primary .bg-successbg-infobg-warning, 和 .bg-danger

Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

尝试一下 »

更多的排版样式

The Bootstrap classes below can be added to style HTML elements further:

Class Description Example
.lead Makes a paragraph stand out 测试
.small Indicates smaller text (set to 85% of the size of the parent) 测试
.text-left Indicates left-aligned text 测试
.text-center Indicates center-aligned text 测试
.text-right Indicates right-aligned text 测试
.text-justify Indicates justified text 测试
.text-nowrap Indicates no wrap text 测试
.text-lowercase Indicates lowercased text 测试
.text-uppercase Indicates uppercased text 测试
.text-capitalize Indicates capitalized text 测试
.initialism Displays the text inside an <abbr> element in a slightly smaller font size 测试
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) 测试
.list-inline Places all list items on a single line 测试
.dl-horizontal Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side 测试
.pre-scrollable Makes a <pre> element scrollable 测试

Complete Bootstrap Typography Reference

For a complete reference of all typography elements/classes, go to our complete Bootstrap Typography Reference.

Also look at our Bootstrap Helper Classes Reference for more information about contextual classes.