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

标题。样式：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>

 

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

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>

 

 

 

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

 

段落<p>标签

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

这里就不做演示。

 

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

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

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

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

 

 

强调相关类

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

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

同样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>