返回列表 发帖

Bootstrap 5 文字/排版

Bootstrap 5 默认设置
Bootstrap 5 默认 font-size 为 1rem(默认为 16px),line-height 为 1.5。

此外,所有 <p> 元素都设置了 margin-top: 0 和 margin-bottom: 1rem (默认为 16px)。

<h1> - <h6>
Bootstrap 5 把 HTML 标题(<h1> 到 <h6>)的样式设置为有更粗的 font-weight 以及响应式的 font-size。

实例
亲自试一试
如果需要,您还可以在其他元素上使用 .h1 到 .h6 类,使它们表现为标题:

实例
<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>
亲自试一试
display 标题
display 标题用于比普通标题更突出(更大的 font-size 和更细的 font-weight),有六个类可供选择:.display-1 到 .display-6:

实例
亲自试一试
<small>
在 Bootstrap 5 中,HTML <small> 元素(和 .small 类)用于在任何标题中创建较小的辅助文本:

实例
亲自试一试
<mark>
Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 <mark> 和 .mark 的样式:

实例
亲自试一试
<abbr>
Bootstrap 5 将 HTML <abbr> 元素的样式设置为底部带有虚线边框,悬停时带有问号的光标:

实例
亲自试一试
<blockquote>
当引用其他来源的内容块时,请将 .blockquote 类添加到 <blockquote>。当命名来源时,例如“来自世界自然基金会的网站”,请使用 .blockquote-footer 类:

实例
亲自试一试
<dl>
Bootstrap 5 将通过以下方式设置 HTML <dl> 元素的样式:

实例
亲自试一试
<code>
Bootstrap 5 将通过以下方式设置 HTML <code> 元素的样式:

实例
亲自试一试
<kbd>
Bootstrap 5 将通过以下方式设置 HTML <kbd> 元素的样式:

实例
亲自试一试
<pre>
Bootstrap 5 将通过以下方式设置 HTML <pre> 元素的样式:

实例
亲自试一试
更多排版类
下面的 Bootstrap 5 类可以进一步添加到 HTML 元素的样式中:

类        描述        例子
.lead        突出段落。        试一试
.text-left        规定左对齐文本。        试一试
.text-break        防止长文本破坏布局。        试一试
.text-center        规定居中对齐的文本。        试一试
.text-decoration-none        删除链接中的下划线。        试一试
.text-end        规定右对齐文本。        试一试
.text-nowrap        规定文本不换行。        试一试
.text-lowercase        规定小写文本。        试一试
.text-uppercase        规定大写文本。        试一试
.text-capitalize        规定大写文本。        试一试
.initialism        以稍小的字体显示 <abbr> 元素内的文本。        试一试
.list-unstyled        删除列表项的默认 list-style 和左外边距(适用于 <ul> 和 <ol>)。
此类仅适用于直接子列表项。
如需从任何嵌套列表中删除默认列表样式,也请将此类应用于嵌套列表。        试一试
.list-inline        将所有列表项放在一行上。
请与每个 <li> 元素上的 .list-inline-item 一起使用。        试一试
BS5 网格基础
BS5 颜色

JavaScript 测验


W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通

返回列表