排版
Bootstrap排版的文档和示例,包括标题,正文,列表等。更新于: 2023-04-30 14:28:21 查看: 862
发布于: 2021-8-19 16:47 发布者: 大米
标题
<h1>
到 <h6>
都可用。标题 | 示例 | |
---|---|---|
<h1></h1> |
h1. Bootstrap heading |
|
<h2></h2> |
h2. Bootstrap heading |
|
<h3></h3> |
h3. Bootstrap heading |
|
<h4></h4> |
h4. Bootstrap heading |
|
<h5></h5> |
h5. Bootstrap heading |
|
<h6></h6> |
h6. Bootstrap heading |
当你想匹配标题的字体样式但不想使用相关联的HTML元素时,也可以使用 .h1
到 .h6
。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
自定义标题
使用附带的实用程序类从Bootstrap 重新创建小的辅助标题文本。
Fancy display heading With faded secondary text
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
显示标题
传统的标题元素旨在最有效地处理您页面内容的内容。 当您需要一个标题来突出显示时,请考虑使用 显示标题 一种较大的,略显自省的标题样式。
显示标题 1
显示标题 2
显示标题 3
显示标题 4
显示标题 5
显示标题 6
<h1 class="display-1">显示标题 1</h1>
<h1 class="display-2">显示标题 2</h1>
<h1 class="display-3">显示标题 3</h1>
<h1 class="display-4">显示标题 4</h1>
<h1 class="display-5">显示标题 5</h1>
<h1 class="display-6">显示标题 6</h1>
Lead中心内容
通过添加 .lead
使段落突出。
这是一个前导段落,从普通段落中脱颖而出。
<p class="lead">
这是一个前导段落,从普通段落中脱颖而出。
</p>
内联文字元素
常见内联HTML5元素的样式。
你可以使用 mark tag 来 突显 文本.
这一行文本将被视为已删除的文本.
这一行文字意味着不再准确.
这一行文本意味着作为文档的附加部分处理.
这一行文本将呈现为下划线.
这行文字应该被当作小字.
这一行显示为粗体文本.
这一行呈现为斜体字文本.
<p>你可以使用 mark tag 来 <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>
主要用于语音,技术术语等。
Abbr缩略语
HTML的 <abbr>
元素的缩写和首字母缩略词的样式化实现,以显示悬停时的扩展版本。 缩写带有默认下划线,并获得帮助光标,以提供有关悬停和辅助技术用户的其他上下文。
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>
之外。 提供属性时,请将 <blockquote>
包裹在 <figure>
中,并在 .blockquote-footer
类中使用 <figcaption>
或块级元素(例如 <p>
)。 还要确保将源代码的名称也包装在 <cite>
中。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<figure>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
对齐
根据需要使用文本工具来更改块引用的对齐方式。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<figure class="text-center">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<figure class="text-end">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
列表
无样式
删除列表项的默认 list-style
和左边距(仅适用于子级)。 这仅适用于直接子级列表项,这意味着你还需要为任何嵌套列表添加类。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
内联并排
移除列表的项目符号,并结合使用两个类( .list-inline
和 .list-inline-item
)来增加一些 margin
。
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
列表对齐
使用网格系统的预定义类(或语义混合),水平对齐术语和描述。 对于较长的语句,你可以选择添加 .text-truncate
类以用省略号截断文本。
- Description lists
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>