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>