Bootstrap 排版的文档和示例,包括全局设置、标题、正文、列表等。
全局设置
Bootstrap 设置基本的全局显示、排版和链接样式。当需要更多控制时,请查看文本实用程序类。
- 使用为每个操作系统和设备选择最佳字体的本机字体堆栈。
font-family
- 对于更具包容性和可访问性的类型比例,我们假设浏览器默认根
font-size
(通常为 16 像素),因此访问者可以根据需要自定义浏览器默认值。
- 使用
$font-family-base
、$font-size-base
和$line-height-base
属性作为我们应用于<body>
.
- 通过设置全局链接颜色
$link-color
并仅在 上应用链接下划线:hover
。
- 用于在(默认情况下)上
$body-bg
设置 a 。background-color
<body>
#fff
这些样式可以在 中找到_reboot.scss
,全局变量在 中定义_variables.scss
。确保设置$font-size-base
在rem
.
标题
所有 HTML 标题,<h1>
通过<h6>
,都可用。
标题 |
例子 |
<h1></h1> |
h1。引导标题 |
<h2></h2> |
h2。引导标题 |
<h3></h3> |
h3。引导标题 |
<h4></h4> |
h4。引导标题 |
<h5></h5> |
h5。引导标题 |
<h6></h6> |
h6. 引导标题 |
.h1
through.h6
类也可用,当您想匹配标题的字体样式但不能使用关联的 HTML 元素时。
h1。引导标题
h2。引导标题
h3。引导标题
h4。引导标题
h5。引导标题
h6. 引导标题
自定义标题
使用包含的实用程序类从 Bootstrap 3 重新创建小的二级标题文本。
带有褪色辅助文本的精美显示标题
显示标题
传统的标题元素旨在最适合您的页面内容。当您需要突出标题时,请考虑使用显示标题——一种更大、更自以为是的标题样式。请记住,这些标题默认情况下是不响应的,但可以启用响应式字体大小。
带领
通过添加使段落脱颖而出.lead
。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。
内联文本元素
常用内联 HTML5 元素的样式。
您可以使用标记标签强调文本。
这行文本将被视为已删除的文本。
这行文本将被视为不再准确。
这行文本被视为对文档的补充。
这行文本将呈现为下划线
这行文本应被视为精美印刷品。
此行呈现为粗体文本。
此行呈现为斜体文本。
.mark
和.small
类也可用于应用与标签相同的样式<mark>
,<small>
同时避免标签带来的任何不需要的语义含义。
<b>
虽然上面没有显示,但请随意使用<i>
HTML5。<b>
旨在突出单词或短语而不传达额外的重要性,而<i>
主要用于语音、技术术语等。
文本实用程序
使用我们的文本实用程序和颜色实用程序更改文本对齐、变换、样式、粗细和颜色。
缩写
<abbr>
用于缩写和首字母缩略词的 HTML 元素的风格化实现,以在悬停时显示扩展版本。缩写具有默认下划线并获得帮助光标,以在悬停时和辅助技术用户提供额外的上下文。
添加.initialism
一个略小的字体大小的缩写。
块引用
用于引用文档中其他来源的内容块。环绕<blockquote class="blockquote">
任何HTML作为引用。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
命名源
添加一个<footer class="blockquote-footer">
用于识别来源。将源作品的名称包装在<cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
结盟
根据需要使用文本实用程序来更改块引用的对齐方式。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。
列表
无样式
删除list-style
列表项的默认值和左边距(仅限直接子项)。这仅适用于直接子列表项,这意味着您还需要为任何嵌套列表添加类。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- 马萨的整数 molestie lorem
- pretium nisl aliquet 的促进作用
- Nulla volutpat aliquam velit
- 菜豆
- Purus sodales ultricies
- 前庭前庭端口扫描仪
- Ac tristique libero volutpat 在
- Faucibus porta lacus fringilla vel
- Aenean sat amet erat nunc
- Eget porttitor lorem
排队
删除列表的项目符号并使用margin
两个类的组合应用一些光,.list-inline
和.list-inline-item
.
- Lorem ipsum
- 菜豆
- Nulla volutpat
描述列表对齐
使用我们网格系统的预定义类(或语义混合)水平对齐术语和描述。对于更长的术语,您可以选择添加一个.text-truncate
类以使用省略号截断文本。
-
描述列表
-
描述列表非常适合定义术语。
-
欧伊斯莫德
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
-
马勒苏阿达门
-
Etiam porta sem malesuada magna mollis euismod。
-
被截断的术语被截断
-
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。
-
嵌套
-
-
嵌套定义列表
-
Aenean posuere,tortor sed cursus feugiat,nunc augue blandit nunc。
响应式字体大小
从 v4.3.0 开始,Bootstrap 附带启用响应式字体大小的选项,允许文本更自然地跨设备和视口大小缩放。可以通过将Sass 变量更改为并重新编译 Bootstrap来启用RFS 。$enable-responsive-font-sizes
true
为了支持RFS,我们使用 Sass mixin 来替换我们的正常font-size
属性。响应式字体大小将被编译为calc()
具有混合rem
和视口单元的函数,以启用响应式缩放行为。有关RFS及其配置的更多信息,请参见其GitHub 存储库。