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 所有类参考