排版 | Typography

排版

引导打印的文档和示例，包括全局设置、标题、正文、列表等。

全局设置

引导设置基本的全局显示、排版和链接样式。当需要更多的控制时，请查看文本实用程序类...

  • 用本机字体堆栈选择最好的font-family对于每个操作系统和设备。

  • 对于更具包容性和可访问性的类型扩展，我们假设浏览器默认根目录font-size(通常是16 px），这样访问者就可以根据需要自定义他们的浏览器默认值。

  • 使用$font-family-base，，，$font-size-base，和$line-height-base属性作为我们的打印基应用于<body>...

  • 设置全局链接颜色$link-color并仅在:hover...

  • 使用$body-bg设置background-color在<body>%28#fff默认情况下%29。

这些样式可以在_reboot.scss中定义的全局变量_variables.scss.确保$font-size-base在rem...

标题

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

标题例
<H1> </ H1>H1.Bootstrap标题
<H2> </ H2>H2.Bootstrap标题
<H3> </ H3>H3.Bootstrap标题
<H4> </ H4>H4.Bootstrap标题
<H5> </ H5>H5.Bootstrap标题
<H6> </ H6>H6.Bootstrap标题

<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元素时。

打开getbootstrap.com上的示例

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

定制标题

使用包含的实用工具类重新创建Bootstrap 3中的小辅助标题文本。

打开getbootstrap.com上的示例

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

显示标题

传统的标题元素被设计为在页面内容的内容中发挥最佳效果。当您需要一个突出的标题时，请考虑使用显示标题-一种更大、稍微更固执己见的标题风格。

打开getbootstrap.com上的示例

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

Lead

在某一段中加上.lead...

打开getbootstrap.com上的示例

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

内联文本元素

常见的内联HTML 5元素的样式。

打开getbootstrap.com上的示例

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.mark和.small类还可以应用与<mark>和<small>同时避免了标签带来的任何不必要的语义影响。

虽然上面没有显示，但请随意使用<b>和<i>在HTML 5中。<b>意思是突出强调单词或短语，而不传递额外的重要性。<i>主要用于语音、技术术语等。

文本实用程序

更改文本对齐、转换、样式、重量和颜色文本实用程序...

缩略语

HTML的样式化实现<abbr>元素的缩写和缩略词，以显示悬停上的扩展版本。缩写具有默认下划线，并获得帮助光标，以便在悬停和辅助技术的用户上提供附加上下文。

加.initialism缩写为略小一点的字体大小。

打开getbootstrap.com上的示例

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

区块引号

引用文档中另一个源的内容块。包扎<blockquote class="blockquote">任何HTML的引号。

打开getbootstrap.com上的示例

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

命名源

加一个<footer class="blockquote-footer">来确认来源。将源工作的名称包装在<cite>...

打开getbootstrap.com上的示例

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

对齐

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

打开getbootstrap.com上的示例

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

打开getbootstrap.com上的示例

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表

未定型

删除默认值list-style和列表项%28直接子项上的左边距仅为%29。这仅适用于直接子列表项。，这意味着您还需要为任何嵌套列表添加类。

打开getbootstrap.com上的示例

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

内联

删除列表中的子弹，并施加一些光线margin两个班的组合，.list-inline和.list-inline-item...

打开getbootstrap.com上的示例

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

描述列表对齐

通过使用网格系统的预定义类%28或语义混合%29，水平对齐术语和描述。长期而言，您可以选择添加.text-truncate类以省略号截断文本。

打开getbootstrap.com上的示例

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

反应式排版

反应式排版指通过简单地调整根元素的文本和组件font-size在一系列媒体查询中。引导并不能为您完成这个任务，但是如果您需要它，添加它是相当容易的。

这是一个实践中的例子。随便选择font-sizeS和媒体查询您的愿望。

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

 © 2011–2017 Twitter, Inc.

© 2011–2017 The Bootstrap Authors

根据MIT许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。