02 Bootstrap 排版

最新推荐文章于 2024-11-22 09:12:07 发布

努力挣钱的Dora

最新推荐文章于 2024-11-22 09:12:07 发布

阅读量180

点赞数 2

分类专栏： Bootstrap 文章标签： Bootstrap

本文链接：https://blog.youkuaiyun.com/beixiaohaizi/article/details/93135438

版权

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了Bootstrap相关排版知识，包括h1 - h6标签及.small作为副标题插入，class=“lead”用于强调段落文本，还提及文本强调、缩写、地址、块引用、列表等内容，以及.text-muted等更多排版类的颜色应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h1~h6标签
或者 class .small 作为副标题插入

	<h1>我是标题1 h1. <span class="small">我是副标题1 h1</span></h1> 
	<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
	<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
	<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
	<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
	<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

在这里插入图片描述
2. class=“lead”,引导主体副本
为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本

3. 文本的强调

4. 缩写
元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到在这里插入图片描述
5. 地址

<address>
	<strong>Some Company, Inc.</strong><br>
	007 street<br>
	Some City, State XXXXX<br>
	<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
	<strong>Full Name</strong><br>
	<a href="mailto:#">mailto@somedomain.com</a>
</address>

在这里插入图片描述
6. 块的引用

7. 列表

<h4>有序列表</h4>
<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
	<dt>Description 1</dt>
	<dd>Item 1</dd>
	<dt>Description 2</dt>
	<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
	 <dt>Description 1</dt>
	 <dd>Item 1</dd>
	 <dt>Description 2</dt>
	 <dd>Item 2</dd>
</dl>

在这里插入图片描述

更多排版类

在这里插入图片描述
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442