上一节:
下一节:

  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> 中： 
    <div class="container">
   <h1>块引用</h1>
   <p>blockquote元素用于呈现其他来源的内容：</p>
   <blockquote class="blockquote">
     <p>50年来，世界自然基金会一直在保护自然的未来。 世界自然基金会（WWF）是世界领先的自然保护组织，在100个国家/地区开展工作，得到了美国120万会员和全球近500万会员的支持。</p>
     <footer class="blockquote-footer">来自世界自然基金会的网站</footer>
   </blockquote>
</div>
    尝试一下

    <dl>

    Bootstrap 将通过以下方式设置 HTML <dl> 元素的样式： 
    <div class="container">
   <h1>描述列表</h1>
   <p>dl元素表示描述列表：</p>
   <dl>
     <dt>咖啡</dt>
     <dd>-黑热饮</dd>
     <dt>牛奶</dt>
     <dd>-白冷饮</dd>
   </dl>
</div>
    尝试一下

    <code>

    Bootstrap 将通过以下方式设置 HTML <code> 元素的样式： 
    <div class="container">
   <h1>代码段</h1>
   <p>内联代码片段应嵌入到code元素中：</p>
   <div>以下HTML元素：<code>span</code>，<code>section</code> 和 <code>div</code> 定义了文档中的一个部分</div>
</div>
    尝试一下

    <kbd>

    Bootstrap 将通过以下方式设置 HTML <kbd> 元素的样式：
    使用ctrl + p 打开“打印”对话框。
    尝试一下

    <pre>

    Bootstrap 将通过以下方式设置 HTML <pre> 元素的样式： 
    <div class="ontainer">
   <h1>多行代码</h1>
   <p>对于多行代码，请使用pre元素：</p>
   <pre>
      前置元素中的文字
      以固定宽度显示
      字体，并保留
      空格和
      换行符。
   </pre>
</div>
    尝试一下

  • 更多文字样式类

    可以添加以下 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 所有类参考。
上一节:
下一节: