Bootstrap每天必学之基础排版(2)

很明显第一行左对齐,第二行居中,第三行右对齐。
5.强调class
 这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

<h1>强调Class</h1> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p>.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p>.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <h1></h1>

Bootstrap每天必学之基础排版

四、缩略图
   当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

<abbr title="attribute">attr</abbr>

看到效果了,就是没办法截到图。
Initialism
为缩略语添加.initialism可以将其font-size设置的更小些。

<abbr title="HyperText Markup Language">HTML</abbr>

还是只上代码自己看效果。  
五、地址
 让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>

Bootstrap每天必学之基础排版


六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,我们建议用<p>标签。

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>

Bootstrap每天必学之基础排版

 

引用选项
对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容。
命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote>

Bootstrap每天必学之基础排版

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。   

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>

Bootstrap每天必学之基础排版

向右对齐移动了额,当然也有相应的pull-left。  
七、列表
 无序列表 
顺序无关紧要的一列元素。

<ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzjgp.html