排版助手

我们的助手类允许您更快地搭建某些印刷样式。

文本对齐

您可以通过向元素添加 .text-left、.text-right、.text-center 或 .text-justify 来更改元素的文本对齐方式。

在文本对齐类的前面添加断点将导致它仅应用于该尺寸屏幕或更大的屏幕。例如，.medium-text-center 将在最小屏幕上保持文本左对齐，但在中等屏幕和更大屏幕上切换到居中对齐。

<p class="text-left"><!-- ... --></p>
<p class="text-right"><!-- ... --></p>
<p class="text-center"><!-- ... --></p>
<p class="text-justify"><!-- ... --></p>

此文本左对齐。 《基地》设定在银河帝国建立 12,000 年的川陀首都，以“基地纪元”（F.E.）元年为起点。虽然帝国表面上稳定而强大，但它正在以与西罗马帝国衰落相似的方式缓慢衰败。

此文本右对齐。 《基地》设定在银河帝国建立 12,000 年的川陀首都，以“基地纪元”（F.E.）元年为起点。虽然帝国表面上稳定而强大，但它正在以与西罗马帝国衰落相似的方式缓慢衰败。

此文本居中对齐。 《基地》设定在银河帝国建立 12,000 年的川陀首都，以“基地纪元”（F.E.）元年为起点。虽然帝国表面上稳定而强大，但它正在以与西罗马帝国衰落相似的方式缓慢衰败。

此文本两端对齐。 《基地》设定在银河帝国建立 12,000 年的川陀首都，以“基地纪元”（F.E.）元年为起点。虽然帝国表面上稳定而强大，但它正在以与西罗马帝国衰落相似的方式缓慢衰败。

副标题

通过向任何标题元素添加 .subheader 类来淡化标题。

观看视频中的这部分

<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader

h6.subheader

引导段落

比正常文本块稍大，适用于平台、宣传语或其他描述性文本。

观看视频中的这部分

<p class="lead">What are your cats <em>really</em> dreaming about while they sleep?</p>

您的猫在睡觉时*真正*梦想着什么？

无项目符号列表

在 Foundation 中，<ul> 默认是项目符号列表，<ol> 默认是编号列表，但您可以添加 .no-bullet 类来分别删除项目符号和编号。

无序列表

观看视频中的这部分

<ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

具有更长描述或更多内容的列表项。
列表项
列表项
- 嵌套列表项
- 嵌套列表项
- 嵌套列表项
列表项
列表项
列表项

有序列表

<ol class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ol>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ol>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

具有更长描述或更多内容的列表项。
列表项
列表项
1. 嵌套列表项
2. 嵌套列表项
3. 嵌套列表项
列表项
列表项
列表项

字体比例

通过覆盖元素的默认大小来调整字体大小。这对于使用 Foundation 现有的标题大小来调整 <p> 或 <h1> 到 <h6> 的大小非常有用。

特别有用，因为：在构建文档时，避免跳过标题级别非常重要，因为它会混淆屏幕阅读器。例如，在代码中使用 <h2> 后，下一个使用的标题应该是 <h2> 或 <h3>。如果您需要标题看起来更大或更小以匹配特定样式，请使用 CSS 覆盖默认大小。

对于标题

<h2 class="h1">Lorem Ipsum Dolor</h2>
<h3 class="h2">Lorem Ipsum Dolor</h3>
<h4 class="h3">Lorem Ipsum Dolor</h4>
<h5 class="h4">Lorem Ipsum Dolor</h5>
<h6 class="h5">Lorem Ipsum Dolor</h6>

对于文本

<p class="h1">Lorem Ipsum Dolor</p>
<p class="h2">Lorem Ipsum Dolor</p>
<p class="h3">Lorem Ipsum Dolor</p>
<p class="h4">Lorem Ipsum Dolor</p>
<p class="h5">Lorem Ipsum Dolor</p>
<p class="h6">Lorem Ipsum Dolor</p>

Lorem Ipsum Dolor

统计数据

如果您正在构建仪表板，则可能需要*非常大*地显示一些重要数字。只需将 .stat 类添加到任何元素即可放大字体大小。

观看视频中的这部分

<p>Days without merge conflict</p>
<div class="stat">128</div>

没有合并冲突的天数

128

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$lead-font-size`	数字	`$global-font-size * 1.25`	引导段落的默认字体大小。
`$lead-lineheight`	字符串	`1.6`	引导段落的默认行高。
`$subheader-lineheight`	数字	`1.4`	副标题的默认行高。
`$subheader-color`	颜色	`$dark-gray`	副标题的默认字体颜色。
`$subheader-font-weight`	字符串	`$global-weight-normal`	副标题的默认字体粗细。
`$subheader-margin-top`	数字	`0.2rem`	副标题的默认顶部边距。
`$subheader-margin-bottom`	数字	`0.5rem`	副标题的默认底部边距。
`$stat-font-size`	数字	`2.5rem`	统计数字的默认字体大小。
`$cite-color`	颜色	`$dark-gray`	`.cite-block` 组件的文本颜色。
`$cite-font-size`	数字	`rem-calc(13)`	`.cite-block` 组件的字体大小。
`$cite-pseudo-content`	字符串	`'\2014 \0020'`	`.cite-block` 组件的伪内容。
`$code-color`	颜色	`$black`	`.code-inline` 和 `.code-block` 组件的文本颜色。
`$code-font-family`	字符串或列表	`$font-family-monospace`	`.code-inline` 和 `.code-block` 组件的字体系列。
`$code-font-weight`	字符串	`$global-weight-normal`	`.code-inline` 和 `.code-block` 组件中文本的字体粗细。
`$code-background`	颜色	`$light-gray`	`.code-inline` 和 `.code-block` 组件的背景颜色。
`$code-border`	列表	`1px solid $medium-gray`	`.code-inline` 和 `.code-block` 组件周围的边框。
`$code-padding`	数字或列表	`rem-calc(2 5 1)`	`.code-inline` 组件文本周围的填充。
`$code-block-padding`	数字或列表	`1rem`	`.code-block` 组件文本周围的填充。
`$code-block-margin-bottom`	数字	`1.5rem`	`.code-block` 组件下的边距。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

代码样式

@include code-style;

添加代码助手的基本样式。请参阅 code-inline 和 code-block 混合。

代码内联

@include code-inline;

使代码助手从 code-style 混合内联。用于生成 .code-inline

代码块

@include code-block;

使代码助手从 code-style 混合块。用于生成 .code-block