1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - 排版( Typography)

Bootstrap - 排版( Typography)

Bootstrap在其默认字体堆栈中使用Helvetica Neue，Helvetica，Arial和sans-serif。 使用Bootstrap的排版功能，您可以创建标题，段落，列表和其他内联元素。 让我们看看以下各节中的每一个。

Headings

所有HTML标题（h1到h6）都在Bootstrap中设置样式。 一个例子如下所示 -

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

使用Bootstrap的上述代码段将产生以下结果 -

新页面打开

内联副标题

要为任何标题添加内联子标题，只需在任何元素周围添加或添加.small类，您将获得更浅的文本，如下例所示 -

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

使用Bootstrap的上述代码段将产生以下结果 -

新页面打开

铅体复印件

要为段落添加一些重点，请添加class =“lead”。 这将为您提供更大的字体，更轻的重量和更高的线高，如下例所示 -

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

新页面打开

Emphasis

HTML的默认强调标记（例如）将文本设置为父级大小的85％，强调具有较重字体权重的文本，强调斜体文本。

Bootstrap提供了一些可用于强调文本的类，如以下示例所示 -

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<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-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

新页面打开

缩写(Abbreviations)

HTML 元素为缩写或首字母缩略词提供标记，如WWW或HTTP。 Bootstrap样式元素，底部带有浅色虚线边框，并在悬停时显示全文（只要将该文本添加到 title属性）。 要获得稍小的字体大小，请将.initialism添加到。

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

新页面打开

Addresses

使用address标记可以在网页上显示联系信息。由于address默认显示:block; 你需要使用 p 用于向包含的地址文本添加换行符的标记。

<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>

新页面打开

Blockquotes (Blockquotes)

您可以在任何HTML文本周围使用默认的

。

其他选项包括添加标签以识别引用源并使用类.pull-right对齐blockquote。 以下示例演示了所有这些功能 -

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>
<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

新页面打开

Lists

Bootstrap支持有序列表，无序列表和定义列表。

• Ordered lists - 有序列表是按照某种顺序排列的列表，以数字开头。

• Unordered lists - 无序列表是一个没有任何特定顺序的列表，传统上使用项目符号进行样式设置。 如果您不希望显示项目符号，则可以使用.list-unstyled类删除样式。 您还可以使用.list-inline类将所有列表项放在一行中。

• Definition lists - 在这种类型的列表中，每个列表项都可以包含“dt”和“dd”元素。 “dt”代表definition term ，并且像字典一样，这是正在定义的术语（或短语）。 随后，“dd”是“dt”的定义。 您可以使用dl-horizontal类将“dl”中的术语和描述并排dl-horizontal 。

以下示例演示了这些类型中的每一种 -

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

新页面打开