【Bootstrap V4系列】学习入门教程之 页面内容排版

按钮上的指针

页面内容样式的设置包括对role=“button”的增强，可以将默认光标更改为指针。将此属性添加到元素中，以帮助指示元素是交互式的。<button>元素不需要此角色，因为它们会自己更改光标。

<!-- Pointers on buttons -->
<span role="button" tabindex="0">Non-button element button</span>

页面展示效果：

排版

Bootstrap排版的文档和示例，包括全局设置、标题、正文、列表等。

一、Global settings 全局设置

• 使用本机字体堆栈，为每个操作系统和设备选择最佳字体系列。
• 为了获得更具包容性和可访问性的字体比例，我们使用浏览器的默认根字体大小（通常为16px），以便访问者可以根据需要自定义浏览器默认值。

二、Headings 标题

所有HTML标题，从<h1>到<h6>，都是可用的。

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

.h1到.h6类也可用，用于当您想匹配标题的字体样式但无法使用相关的HTML元素时。

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

页面展示效果：

2.1 Customizing headings 自定义标题

使用附带的实用程序类从Bootstrap 3中重新创建小的次要标题文本。

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

页面展示效果：

2.2 Display headings 显示标题

传统的标题元素旨在在页面内容中发挥最佳作用。当你需要一个突出的标题时，可以考虑使用一个显示标题——一种更大、稍微更有主见的标题风格。请记住，这些标题默认情况下不是响应式的，但可以启用响应式字体大小。

<!-- Display headings -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

页面展示效果：

2.3 Lead 引导

通过添加.lead使段落突出。

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

页面展示效果：

三、Blockquotes 块引用

用于引用文档中其他来源的内容块。将<blockquote class=“blockquote”>包裹在任何HTML周围作为引号。

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

页面展示效果：

3.1 Naming a source 命名源

添加一个<footer class=“blockquote footer”>来标识源。将源代码的名称括在中。

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

页面展示效果：

3.2 Alignment 对齐

根据需要使用文本实用程序更改的块引用对齐方式。

<!--居中对齐-->
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

页面展示效果：

<!--右对齐-->
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

页面展示效果：

四、Lists 列表

4.1 Unstyled 无样式

删除默认列表样式和列表项的左边距（仅限直接子项）。这仅适用于直接的子列表项，这意味着您也需要为任何嵌套列表添加类。

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

页面展示效果：

4.2 Inline 内联

删除列表的项目符号，并使用.list-inline内联和.list-inline-item内联项这两个类的组合应用一些小边距。

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

页面展示效果：

4.3 Description list alignment 描述列表对齐

使用网格系统的预定义类（或语义混合）水平对齐术语和描述。对于较长的术语，您可以选择添加.text truncate类，用省略号截断文本。

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

页面展示效果：