Bootstrap/docs/4.5/content/typography
版式
Bootstrap排版的文档和示例,包括全局设置,标题,正文,列表等。
全局设置
Bootstrap设置基本的全局显示,版式和链接样式。 如果需要更多控制,请查看 文本实用程序类 .
- 用一个 本机字体堆栈 选择最好的
font-family每个操作系统和设备。 - 为了获得更具包容性和访问性的类型比例,我们假定浏览器为默认根目录
font-size（通常为16像素）,因此访问者可以根据需要自定义其浏览器默认值。 - 使用
$font-family-base,$font-size-base,和$line-height-base属性作为应用于我们的印刷基础<body>. - 通过设置全局链接颜色
$link-color并仅在以下位置应用链接下划线:hover. - Use
$body-bg设置一个background-color在...上<body>(#fff默认情况下）。
这些样式可以在 _reboot.scss ,并且全局变量在 _variables.scss 。确保设置 $font-size-base in rem.
标题
所有HTML标题, <h1> 通过 <h6> 可用。
| 标题 | 例 |
|---|---|
<h1></h1>
|
h1. Bootstrap heading |
<h2></h2>
|
h2. Bootstrap heading |
<h3></h3>
|
h3. Bootstrap heading |
<h4></h4>
|
h4. Bootstrap heading |
<h5></h5>
|
h5. Bootstrap heading |
<h6></h6>
|
h6. Bootstrap heading |
.h1 通过 .h6 类也可用于想要匹配标题的字体样式但不能使用关联的HTML元素的情况。
h1. 自举标题
h2. 自举标题
h3. 自举标题
h4. 自举标题
h5. 自举标题
h6. 自举标题
<p class="h1"> h1. 自举标题 </p>
<p class="h2"> h2. 自举标题 </p>
<p class="h3"> h3. 自举标题 </p>
<p class="h4"> h4. 自举标题 </p>
<p class="h5"> h5. 自举标题 </p>
<p class="h6"> h6. 自举标题 </p>自定义标题
使用随附的实用程序类从Bootstrap 3重新创建小的辅助标题文本。
花式显示标题 带有褪色的辅助文字
<h3> 花式显示标题 <small class="text-muted"> 带有褪色的辅助文字 </small>
</h3>显示标题
传统的标题元素旨在最有效地处理您页面内容的内容。 当您需要醒目的标题时,请考虑使用 显示标题 —更大,更自以为是的标题样式。 请注意,默认情况下这些标题没有响应,但是可以启用 响应字体大小 .
| Display 1 |
| Display 2 |
| Display 3 |
| Display 4 |
<table class="table">
<tbody>
<tr>
<td><span class="display-1">Display 1</span></td>
</tr>
<tr>
<td><span class="display-2">Display 2</span></td>
</tr>
<tr>
<td><span class="display-3">Display 3</span></td>
</tr>
<tr>
<td><span class="display-4">Display 4</span></td>
</tr>
</tbody>
</table>Display 2
Display 3
Display 4
Lead
通过添加段落使段落突出 .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。 Duis mollis,est non commodo luctus。
<p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。 Duis mollis,est non commodo luctus。 </p>内联文字元素
常见的嵌入式HTML5元素的样式。
您可以使用标记标签 突出 文本。
此行文本应视为已删除的文本。
此行文本已被视为不再准确。
这行文字应视为对文档的补充。
这行文字将显示为下划线
这行文字应被视为精美印刷品。
此行显示为粗体文本。
此行显示为斜体文本。
<p> 您可以使用标记标签 <mark> 突出 </mark> 文本。 </p>
<p><del> 此行文本应视为已删除的文本。 </del></p>
<p><s> 此行文本已被视为不再准确。 </s></p>
<p><ins> 这行文字应视为对文档的补充。 </ins></p>
<p><u> 这行文字将显示为下划线 </u></p>
<p><small> 这行文字应被视为精美印刷品。 </small></p>
<p><strong> 此行显示为粗体文本。 </strong></p>
<p><em> 此行显示为斜体文本。 </em></p>.mark and .small 类也可以应用与以下样式相同的样式 <mark> and <small> 同时避免标签会带来任何不必要的语义影响。
虽然上面没有显示,但请随意使用 <b> and <i> 在HTML5中 <b> 旨在突出显示单词或短语而不传达其他重要性,而 <i> 主要用于语音,技术术语等。
文字工具
使用我们的更改文字对齐方式,变换,样式,粗细和颜色 文字工具 and 色彩工具 .
缩略语
HTML的样式化实现 <abbr> 缩写和首字母缩写的元素,以显示悬停时的扩展版本。 缩写带有默认下划线,并获得帮助光标,以提供有关悬停和辅助技术用户的其他上下文。
Add .initialism 缩写为略小的字体大小。
attr
HTML
<p><abbr title="attribute"> attr </abbr></p>
<p><abbr class="initialism" title="HyperText Markup Language"> HTML </abbr></p>块引用
用于引用文档中其他来源的内容块。 Wrap <blockquote class="blockquote"> 围绕任何 HTML 作为报价。
文字填充文字填充文字填充文字填充 整数posere删除前注。
<blockquote class="blockquote">
<p class="mb-0"> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
</blockquote>命名来源
添加一个 <footer class="blockquote-footer"> 用于识别来源。 将源工作的名称包装在 <cite>.
文字填充文字填充文字填充文字填充 整数posere删除前注。
<blockquote class="blockquote">
<p class="mb-0"> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer class="blockquote-footer"> 某人在 <cite title="Source Title"> 资料标题 </cite></footer>
</blockquote>对准
根据需要使用文本实用程序来更改块引用的对齐方式。
文字填充文字填充文字填充文字填充 整数posere删除前注。
<blockquote class="blockquote text-center">
<p class="mb-0"> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer class="blockquote-footer"> 某人在 <cite title="Source Title"> 资料标题 </cite></footer>
</blockquote>文字填充文字填充文字填充文字填充 整数posere删除前注。
<blockquote class="blockquote text-right">
<p class="mb-0"> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer class="blockquote-footer"> 某人在 <cite title="Source Title"> 资料标题 </cite></footer>
</blockquote>清单
无样式
删除默认 list-style 并在列表项上保留页边距（仅适用于即时儿童）。 这仅适用于直属子级列表项 ,这意味着您还需要为所有嵌套列表添加类。
- Lorem ipsum dolor坐着
- 保守的精英
- Massa的整数痣
- Facilisis在prenis中的aliquet
- Nulla volutpat aliquam velit
- 豆
- 普氏粉菌
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- 紫红色porta lacus fringilla vel
- Aenean Sit Amet Erat Nunc
- Eget Porttitor lorem
<ul class="list-unstyled">
<li> Lorem ipsum dolor坐着 </li>
<li> 保守的精英 </li>
<li> Massa的整数痣 </li>
<li> Facilisis在prenis中的aliquet </li>
<li> Nulla volutpat aliquam velit <ul>
<li> 豆 </li>
<li> 普氏粉菌 </li>
<li> Vestibulum laoreet porttitor sem </li>
<li> Ac tristique libero volutpat at </li>
</ul>
</li>
<li> 紫红色porta lacus fringilla vel </li>
<li> Aenean Sit Amet Erat Nunc </li>
<li> Eget Porttitor lorem </li>
</ul>排队
删除列表的项目符号并施加一些光 margin 结合两个类别, .list-inline and .list-inline-item.
- Lorem ipsum
- 豆
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item"> Lorem ipsum </li>
<li class="list-inline-item"> 豆 </li>
<li class="list-inline-item"> Nulla volutpat </li>
</ul>说明列表对齐
使用我们的网格系统的预定义类（或语义混合）,水平对齐术语和说明。 对于更长的期限,您可以选择添加一个 .text-truncate 类,用省略号截断文本。
- 说明清单
- 描述列表非常适合定义术语。
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia dioo sem nec elit。
Donec id elit non mi porta gravida在eget metus。
- Malesuada门
- Etiam porta sem malesuada magna mollis euismod。
- 截断词被截断
- Fusce dapibus,Tusus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo amet risus。
- 套料
-
- 嵌套定义列表
- Aenean posuere,tor sed cursus feugiat,nunc augue blandit nunc。
<dl class="row">
<dt class="col-sm-3"> 说明清单 </dt>
<dd class="col-sm-9"> 描述列表非常适合定义术语。 </dd>
<dt class="col-sm-3"> Euismod </dt>
<dd class="col-sm-9">
<p> Vestibulum id ligula porta felis euismod semper eget lacinia dioo sem nec elit。 </p>
<p> Donec id elit non mi porta gravida在eget metus。 </p>
</dd>
<dt class="col-sm-3"> Malesuada门 </dt>
<dd class="col-sm-9"> Etiam porta sem malesuada magna mollis euismod。 </dd>
<dt class="col-sm-3 text-truncate"> 截断词被截断 </dt>
<dd class="col-sm-9"> Fusce dapibus,Tusus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo amet risus。 </dd>
<dt class="col-sm-3"> 套料 </dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4"> 嵌套定义列表 </dt>
<dd class="col-sm-8"> Aenean posuere,tor sed cursus feugiat,nunc augue blandit nunc。 </dd>
</dl>
</dd>
</dl>自适应字体大小
Bootstrap v4.3附带了启用响应字体大小的选项,允许文本在设备和视口大小之间更自然地缩放。 RFS 可以通过更改 $enable-responsive-font-sizes Sass变量 true 并重新编译Bootstrap。
支持 RFS ,我们使用Sass mixin代替我们的常规 font-size 属性。 自适应字体大小将被编译为 calc() 具有以下功能 rem 和视口单元以启用响应缩放行为。 更多关于 RFS 其配置可以在其上找到 GitHub资料库 .
