您的位置: 首页  >  IT文章  >  bootstrap学习笔记<二>（标题，段落样式）

bootstrap学习笔记<二>（标题，段落样式）

分类: IT文章 • 2024-09-20 17:25:19

标题。样式：class="h1"~class="h6"

bootstrap中重新定义了h1~h6标签，具体差别如下：

在bootstrap中其他任何标签使用class="h1"~class="h6"都可以实现h1~h6的标题效果。

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

<p class="h1">title</p>
View Code

副标题。标签：<small></small>

bootstrap还提供了副标题功能

bootstrap学习笔记<二>（标题，段落样式）

副标题标签为<small></small>

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>
View Code

注意：small标签仅在h1~h6标签之内才生效副标题效果。

段落<p>标签

bootstrap对<p>标签也进行了优化，让段落更分明。

这里就不做演示。

强调效果。样式class="lead"

该样式会将文字字体相对同等标签放大。

<p>我是普通文本，我的样子长成这样我是普通文本</p>

<p class="lead">
我是特意要突出的文本，我的样子成这样。我是特意要突出的文本。
</p>
View Code

强调相关类

bootstrap为文字，按钮等元素提供多样的颜色警示和强调。


同样primary，success，info，warning，danger这些强调警示颜色也能用在其他元素，如：but

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
View Code

 bootstrap学习笔记<二>（标题，段落样式）

相关推荐