bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略

2020-04-27 07:53:15易采站长站整理

很明显第一行左对齐,第二行居中,第三行右对齐。

5.强调class

这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

复制代码
<h1>强调Class</h1>
<p class=”text-muted”>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class=”text-primary”>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class=”text-success”>.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class=”text-info”>Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class=”text-warning”>Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class=”text-danger”>.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<h1></h1>

缩略图

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的

<abbr>
元素的增强样式。缩略语元素带有
title
属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

基本缩略语

如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含

title
属性。

复制代码
<abbr title=”attribute”>attr</abbr>

看到效果了,就是没办法截到图。

Initialism

为缩略语添加

.initialism
可以将其font-size设置的更小些。

复制代码
<abbr title=”HyperText Markup Language” class=”initialism”>HTML</abbr>

还是只上代码自己看效果。

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加

<br>
可以保留需要的样式。

复制代码
<address>
<strong>Twitter, Inc.</strong>
Folsom Ave, Suite 600
San Francisco, CA 94107
<abbr title=”Phone”>P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong>
<a href=”<a href=”mailto:#”>first.ldddddddast@examdddddddple.com</a”>mailto:#”>first.ldddddddast@examdddddddple.com</a</a>>
</address>