Bootstrap 5 Matanin Koyarwa / Farfadowa

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 用于在任何标题中创建较小的辅助文本：

实例

亲自试一试

Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 和 .mark 的样式：

实例

亲自试一试

Bootstrap 5 将 HTML 元素的样式设置为底部带有虚线边框，悬停时带有问号的光标：

实例

亲自试一试

当引用其他来源的内容块时，请将 .blockquote 类添加到

。当命名来源时，例如“来自世界自然基金会的网站”，请使用 .blockquote-footer 类：

实例

亲自试一试

Bootstrap 5 将通过以下方式设置 HTML

元素的样式：

实例

亲自试一试

Bootstrap 5 将通过以下方式设置 HTML 元素的样式：

实例

亲自试一试

Bootstrap 5 将通过以下方式设置 HTML 元素的样式：

实例

亲自试一试



Bootstrap 5 将通过以下方式设置 HTML 
 元素的样式：


实例



亲自试一试






更多排版类


下面的 Bootstrap 5 类可以进一步添加到 HTML 元素的样式中：





类
描述
例子




.lead
突出段落。
Gudanar




.text-left
规定左对齐文本。
Gudanar




.text-break
防止长文本破坏布局。
Gudanar




.text-center
规定居中对齐的文本。
Gudanar




.text-decoration-none
删除链接中的下划线。
Gudanar




.text-end
规定右对齐文本。
Gudanar




.text-nowrap
规定文本不换行。
Gudanar




.text-lowercase
规定小写文本。
Gudanar




.text-uppercase
规定大写文本。
Gudanar




.text-capitalize
规定大写文本。
Gudanar




.initialism
以稍小的字体显示  元素内的文本。
Gudanar




.list-unstyled
删除列表项的默认 list-style 和左外边距（适用于 
     和 
      ）。
      此类仅适用于直接子列表项。
      如需从任何嵌套列表中删除默认列表样式，也请将此类应用于嵌套列表。

Gudanar




.list-inline
Gudanar yankuna kanau kowane wata.
Gudanar kuma kowane <li> kanau .list-inline-item.		
Gudanar