Bootstrap排版之超大标题

最新推荐文章于 2026-07-17 12:06:49 发布

转载最新推荐文章于 2026-07-17 12:06:49 发布 · 830 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.mk2048.com/blog/blog.php?id=jckhj21ab&title=Bootstrap%E6%8E%92%E7%89%88%E4%B9%8B%E8%B6%85%E5%A4%A7%E6%A0%87%E9%A2%98

收录于

前端

本文详细介绍Bootstrap框架中标题和文本样式的应用方法，包括从h1到h6的标题标签使用，以及如何通过.small类添加副标题。同时，文章还讲解了如何使用.lead类让段落文字突出显示。

标题

HTML 中的所有标题标签，

<h1>

到

<h6>

均可使用。另外，还提供了

.h1

到

.h6

类，为的是给内联（inline）属性的文本赋予标题的样式。

h1. Bootstrap heading	Semibold 36px
h2. Bootstrap heading	Semibold 30px
h3. Bootstrap heading	Semibold 24px
h4. Bootstrap heading	Semibold 18px
h5. Bootstrap heading	Semibold 14px
h6. Bootstrap heading	Semibold 12px

复制

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

在标题内还可以包含

<small>

标签或赋予

.small

类的元素，可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

复制

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

页面主体

Bootstrap 将全局

font-size

设置为 14px，

line-height

设置为 1.428。这些属性直接赋予

<body>

元素和所有段落元素。另外，

<p>

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

复制