Bootstrap 文字/排版
-
默认设置
Bootstrap 使用默认的字体大小为 16px,其行高为 1.5。默认字体系列为 “Helvetica Neue”,Helvetica,Arial,sans-serif。此外,所有 <p> 元素的 margin-top:0 和 margin-bottom:1rem(默认为16px)。
-
<h1> - <h6>
Bootstrap 设置 HTML 标题(<h1> 至 <h6>)的样式,其字体粗细和字体大小增大:h1 Bootstrap 标题 (2.5rem = 40px)h2 Bootstrap 标题 (2rem = 32px)h3 Bootstrap 标题 (1.75rem = 28px)h4 Bootstrap 标题 (1.5rem = 24px)h5 Bootstrap 标题 (1.25rem = 20px)h6 Bootstrap 标题 (1rem = 16px) -
显示标题
显示标题比普通标题(较大的字体大小和较轻的字体粗细)更引人注目,并且有四种类别可供选择:.display-1,.display-2,.display-3,.display-4:Display 1
Display 2
Display 3
Display 4
-
HTML 标签元素
<small>
在 Bootstrap 中,HTML <small> 元素用于在任何标题中创建较浅的辅助文本:h1 标题 small次要文字h2 标题 small次要文字h3 标题 small次要文字h4 标题 small次要文字h5 标题 small次要文字h6 标题 small次要文字<mark>
在 Bootstrap 将使用黄色背景色和一些填充来设置 HTML <mark>元素的样式:使用mark元素突出显示文本。<abbr>
在 Bootstrap 将用虚线边框底部的样式设置 HTML <abbr>元素的样式:菜鸟教程 域名为www.cainiaoya.com<blockquote>
当引用另一个来源的内容块时,将.blockquote 类添加到 <blockquote> 中:<dl>
Bootstrap 将通过以下方式设置 HTML <dl> 元素的样式:<code>
Bootstrap 将通过以下方式设置 HTML <code> 元素的样式:<kbd>
Bootstrap 将通过以下方式设置 HTML <kbd> 元素的样式:使用ctrl + p 打开“打印”对话框。<pre>
Bootstrap 将通过以下方式设置 HTML <pre> 元素的样式: -
更多文字样式类
可以添加以下 Bootstrap 类来进一步设置 HTML 元素样式:类名 描述 .font-weight-bold 加粗文本。尝试一下 .font-weight-bolder 粗体文本。尝试一下 .font-italic 斜体文本。尝试一下 .font-weight-light 轻量文本。尝试一下 .font-weight-lighter 较轻的文本。尝试一下 .font-weight-normal 普通文本。尝试一下 .lead 使段落突出。尝试一下 .small 表示较小的文本(设置为父级大小的80%)。尝试一下 .text-left 表示左对齐的文本。尝试一下 .text-*-left 指示在小,中,大或超大屏幕上的左对齐文本。尝试一下 .text-break 防止长文本破坏布局。尝试一下 .text-center 表示居中对齐的文本。尝试一下 .text-*-center 表示在小,中,大或超大屏幕上居中对齐的文本。尝试一下 .text-decoration-none 从链接中删除下划线。尝试一下 .text-right 表示右对齐的文本。尝试一下 .text-*-right 表示在小,中,大或超大屏幕上的右对齐文本。尝试一下 .text-justify 表示对齐的文本。尝试一下 .text-monospace 等宽文本。尝试一下 .text-nowrap 表示没有自动换行。尝试一下 .text-lowercase 表示小写文本。尝试一下 .text-reset 重置文本或链接的颜色(继承其父级的颜色)。尝试一下 .text-uppercase 表示大写的文本。尝试一下 .text-capitalize 表示大写文本。尝试一下 .initialism 以较小的字体大小显示<abbr>元素内的文本。尝试一下 .list-unstyled 删除列表项的默认列表样式和左边界(在<ul>和<ol>上均可)此类仅适用于直接子级列表项。尝试一下 .list-inline 将所有列表项放在一行上(与每个<li>元素上的.list-inline-item一起使用) 尝试一下 .pre-scrollable 使<pre>元素可滚动。 尝试一下 有关 Bootstrap 中可用的所有 CSS 类的完整参考,请访问我们的 Bootstrap 所有类参考。