Bootstrap-文本样式

最新推荐文章于 2025-06-05 09:23:20 发布

原创最新推荐文章于 2025-06-05 09:23:20 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #文本样式

Bootstrap 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了全局文本样式的设定，包括字号、行高、颜色、字体等基础属性，以及如何通过不同类名来强调文本内容，实现颜色区分。此外，还讲解了文本的对齐方式及其应用。

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

全局的文本样式

<p>全局文本字号为14px(font-size)；<br>
行高为1.42857143（line-height），大约是20px；<br>
颜色为深灰色（#333）；<br>
字体为"Helvetica Neue", Helvetica, Arial, sans-serif；<br>
默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度（p元素的margin值）。
</p>

强调内容

<p class="lead">强调的段落内容会增大文本字号(16px)，加粗文本(200)，而且对行高(1.4)和margin(底部20px)也做相应的处理</p>

<p>对部分内容<strong>加粗(bold)</strong>处理</p>

<p>对部分内容<b>加粗(bold)</b>处理</p>

<p>对部分内容<small>缩小</small>处理</p>

<p>对部分内容<cite>斜体</cite>处理</p>

<p>对部分内容<em>斜体</em>处理</p>

<p>对部分内容<i>斜体</i>处理</p>

类名强调文本内容,颜色区分

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

<p class="text-muted">你该学习了</p>

<p class="text-primary">你的主要任务就是学习</p>

<p class="text-success">你学的很棒</p>

<p class="text-info">08:00-23:00为学习时间</p>

<p class="text-warning">再不学习你就惨了</p>

<p class="text-danger">you are so bad</p>

文本对齐方式

<p class="text-left">我居左</p>

<p class="text-center">我居中</p>

<p class="text-right">我居右</p>

<p class="text-justify">我两端对齐(有问题的,慎用)</p>