排版

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>