排版

Bootstrap 排版的文档和示例,包括全局设置、标题、正文、列表等。

标题

所有 HTML 标题,从 <h1> 到 <h6>,都可用。

标签 效果
<h1></h1> h1. 第一回 北汉主屏逐忠臣 呼延赞激烈报仇
<h2></h2> h1. 第一回 北汉主屏逐忠臣 呼延赞激烈报仇
<h3></h3> h3. 第三回 金头娘征场斗艺 高怀德大战潞州
<h4></h4> h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能
<h5></h5> h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄
<h6></h6> h6. 第六回 潘仁美奉诏宣召 呼延赞单骑救驾

.h1 到 .h6 类也可用,当您想要匹配标题的字体样式但不能使用关联的 HTML 元素时。

h1. 第一回 北汉主屏逐忠臣 呼延赞激烈报仇

h2. 第二回 李建忠力救义士 呼延赞梦神教武

h3. 第三回 金头娘征场斗艺 高怀德大战潞州

h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能

h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄

h6. 第六回 潘仁美奉诏宣召 呼延赞单骑救驾

<p class="h1">h1. 第一回 北汉主屏逐忠臣 呼延赞激烈报仇</p>
      <p class="h2">h2. 第二回 李建忠力救义士 呼延赞梦神教武</p>
      <p class="h3">h3. 第三回 金头娘征场斗艺 高怀德大战潞州</p>
      <p class="h4">h4. 第四回 讲和议杨业回兵 迎銮驾豪杰施能</p>
      <p class="h5">h5. 第五回 宋太祖遗嘱后事 潘仁美计逐英雄</p>
      <p class="h6">h6. 第六回 潘仁美奉诏宣召 呼延赞单骑救驾</p>
自定义标题

使用包含的实用程序类从 Bootstrap 3 重新创建小的二级标题文本。

花式显示标题 With faded secondary text

<h3>
        花式显示标题 <small class="text-muted">带有褪色的次要文本</small>
      </h3>
显示属性标题

传统的标题元素旨在最适合您的页面内容。 当您需要突出标题时,请考虑使用显示标题——一种更大、更自以为是的标题样式。

艾虎三更追女寇

包公开封府内丢相印

青石梁上杀猛兽

因酒醉睡熟丢利刃

见爹爹细说京都事

亚侠女在家中比武

<h1 class="display-1">艾虎三更追女寇</h1>
      <h1 class="display-2">包公开封府内丢相印</h1>
      <h1 class="display-3">青石梁上杀猛兽</h1>
      <h1 class="display-4">因酒醉睡熟丢利刃</h1>
      <h1 class="display-5">见爹爹细说京都事</h1>
      <h1 class="display-6">亚侠女在家中比武</h1>
突出的

通过添加 .lead 使段落脱颖而出。

二五方成耦,中宫有骊姬。势看俱集菀,鹤禁顿生危。

<p class="lead">
        二五方成耦,中宫有骊姬。势看俱集菀,鹤禁顿生危。
      </p>
内联文本元素

您可以使用 mark 标签 高亮 文本.

这行文本将被视为已删除文本。

这行文字将被视为不再准确。

这行文字将被视为文档的补充。

这行文本将呈现为带下划线的文本。

这一行文字应被视为小一号字体。

这一行呈现为粗体文本。

这一行呈现为斜体文本。

<p>您可以使用 mark 标签 <mark>高亮</mark> 文本.</p>
      <p><del>这行文本将被视为已删除文本。</del></p>
      <p><s>这行文字将被视为不再准确。</s></p>
      <p><ins>这行文字将被视为文档的补充。</ins></p>
      <p><u>这行文本将呈现为带下划线的文本。</u></p>
      <p><small>这一行文字应被视为小一号字体。</small></p>
      <p><strong>这一行呈现为粗体文本。</strong></p>
      <p><em>这一行呈现为斜体文本。</em></p>

请注意,这些标签应用于语义目的:

  • <mark> 表示为参考或符号目的而标记或突出显示的文本。
  • <small> 代表旁注和小字,如版权和法律文本。
  • <s> 表示不再相关或不再准确的元素。
  • <u> 表示内联文本的范围,应该以表明它具有非文本注释的方式呈现。

如果要设置文本样式,则应改用以下类:

  • .mark 将应用与 <mark> 相同的样式。
  • .small 将应用与 <small> 相同的样式。
  • .text-decoration-underline 将应用与 <u> 相同的样式。
  • .text-decoration-line-through 将应用与 <s> 相同的样式。

虽然上面没有显示,但请随意在 HTML5 中使用 <b> 和 <i>。 <b> 旨在突出单词或短语而不传达额外的重要性,而 <i> 主要用于语音、技术术语等。

缩写

HTML <abbr> 元素的风格化实现,用于缩写和首字母缩略词,以在悬停时显示扩展版本。 缩写具有默认下划线并获得帮助光标,以在悬停时和辅助技术用户提供额外的上下文。

将 .initialism 添加到略小的字体大小的缩写。

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
      <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
块引用

用于引用文档中其他来源的内容块。 将 <blockquote class="blockquote"> 包裹在任何 HTML 周围作为引号。

笑春风三尺花,骄白雪一团玉。痴凝秋水为神,瘦认梨云是骨。

<blockquote class="blockquote">
        <p>笑春风三尺花,骄白雪一团玉。痴凝秋水为神,瘦认梨云是骨。</p>
      </blockquote>
命名源

HTML 规范要求将块引用属性放在 <blockquote> 之外。 提供属性时,将您的 <blockquote> 包装在 <figure> 中,并在 .blockquote-footer 类中使用 <figcaption> 或块级元素(例如 <p>)。 请务必将源作品的名称也包含在 <cite> 中。

爱上一个地方,就应该背上包去旅游,走得更远。

<figure>
        <blockquote class="blockquote">
          <p>爱上一个地方,就应该背上包去旅游,走得更远。</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          出自商务印书馆的  <cite title="《新华字典》">《新华字典》</cite>
        </figcaption>
      </figure>
对齐

根据需要使用文本实用程序来更改块引用的对齐方式。

爱上一个地方,就应该背上包去旅游,走得更远。

<figure class="text-center">
        <blockquote class="blockquote">
          <p>爱上一个地方,就应该背上包去旅游,走得更远。</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          出自商务印书馆的  <cite title="《新华字典》">《新华字典》</cite>
        </figcaption>
      </figure>

爱上一个地方,就应该背上包去旅游,走得更远。

<figure class="text-end">
        <blockquote class="blockquote">
          <p>爱上一个地方,就应该背上包去旅游,走得更远。</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          出自商务印书馆的  <cite title="《新华字典》">《新华字典》</cite>
        </figcaption>
      </figure>
列表
无样式

删除列表项的默认列表样式和左边距(仅限直接子项)。 这仅适用于直接子列表项,这意味着您还需要为任何嵌套列表添加类。

  • 这是一个列表
  • 它看起来完全没有样式。
  • 从结构上讲,它仍然是一个列表。
  • 但是,此样式仅适用于直接子元素。
  • 嵌套列表:
    • 不受这种风格的影响
    • 仍会显示圆点
    • 并有适当的左边距
  • 在某些情况下,这可能仍然派上用场。
<ul class="list-unstyled">
        <li>这是一个列表</li>
        <li>它看起来完全没有样式。</li>
        <li>从结构上讲,它仍然是一个列表。</li>
        <li>但是,此样式仅适用于直接子元素。</li>
        <li>嵌套列表:
          <ul>
            <li>不受这种风格的影响</li>
            <li>仍会显示圆点</li>
            <li>并有适当的左边距</li>
          </ul>
        </li>
        <li>在某些情况下,这可能仍然派上用场。</li>
      </ul>
内联的

删除列表的项目符号并使用两个类的组合应用一些浅边距,.list-inline 和 .list-inline-item。

  • 这是一个列表项。
  • 还有一个。
  • 但它们是内联显示的。
<ul class="list-inline">
        <li class="list-inline-item">这是一个列表项。</li>
        <li class="list-inline-item">还有一个。</li>
        <li class="list-inline-item">但它们是内联显示的。</li>
      </ul>
描述列表对齐

使用我们网格系统的预定义类(或语义混合)水平对齐术语和描述。 对于更长的术语,您可以选择添加一个 .text-truncate 类来用省略号截断文本。

《侠骨丹心》
道尽“独行长剑一杯酒,孤客高楼万里情;侠骨柔情现正义,青天碧海映丹心。
《云海玉弓缘》

主要讲述了清朝中期,江湖浪子金世遗的传奇经历和与厉胜男、谷之华之间的爱恨情仇故事。

是梁氏武侠天山系列最出名的两部小说之一,主要是厉胜男向魔头孟神通复仇并借此成为另一个“女魔头”的故事。

《冰河洗剑录》
该小说讲述了江南与邹绛霞的孩子江海天的感情和江湖故事。
《经乱离后天恩流夜郎,忆旧游,书怀赠江夏韦太守良宰》
唐代诗人李白创作的一首自传体长诗,是李白集中最长的一首诗。其中“清水出芙蓉,天然去雕饰”两句流传甚广,可看成李白诗风的写照。
《萍踪侠影录》
以明代土木堡之变为背景
交织成一个豪侠浪漫美好绝伦的传奇。
<dl class="row">
        <dt class="col-sm-3">《侠骨丹心》</dt>
        <dd class="col-sm-9">道尽“独行长剑一杯酒,孤客高楼万里情;侠骨柔情现正义,青天碧海映丹心。</dd>

        <dt class="col-sm-3">《云海玉弓缘》</dt>
        <dd class="col-sm-9">
          <p>主要讲述了清朝中期,江湖浪子金世遗的传奇经历和与厉胜男、谷之华之间的爱恨情仇故事。</p>
          <p>是梁氏武侠天山系列最出名的两部小说之一,主要是厉胜男向魔头孟神通复仇并借此成为另一个“女魔头”的故事。</p>
        </dd>

        <dt class="col-sm-3">《冰河洗剑录》</dt>
        <dd class="col-sm-9">该小说讲述了江南与邹绛霞的孩子江海天的感情和江湖故事。</dd>

        <dt class="col-sm-3 text-truncate">《经乱离后天恩流夜郎,忆旧游,书怀赠江夏韦太守良宰》</dt>
        <dd class="col-sm-9">唐代诗人李白创作的一首自传体长诗,是李白集中最长的一首诗。此诗作于李白从流放夜郎途中被赦免后滞留江夏时,诗人回顾了自己的人生历程,开篇叙述了自己谪仙人的来历以及自己的遭遇,又讲述了与朋友结交的过程,表达了自己在政治上的清白主张以及积极入仕的愿望,抒发了自己的政治感慨。其中“清水出芙蓉,天然去雕饰”两句流传甚广,可看成李白诗风的写照。</dd>

        <dt class="col-sm-3">《萍踪侠影录》</dt>
        <dd class="col-sm-9">
          <dl class="row">
            <dt class="col-sm-4">以明代土木堡之变为背景</dt>
            <dd class="col-sm-8">交织成一个豪侠浪漫美好绝伦的传奇。</dd>
          </dl>
        </dd>
      </dl>