Bootstrap3.0学习第四轮：排版
|
<small>This line of text is meant to be treated as fine print.</small> 2.着重 通过增加font-weight强调一段文本。 <strong>rendered as bold text</strong> 3.斜体 用斜体强调一段文本。 <em>rendered as italicized text</em> 4.对齐class 通过文本对齐class，可以简单方便的将文字重新对齐。 <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> 很明显第一行左对齐，第二行居中，第三行右对齐。 5.强调class 这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
<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>可以保留需要的样式。
<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>
引用 在你的文档中引用其他来源的内容。 默认样式的引用 将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用，我们建议用<p>标签。 <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
引用选项 对于标准样式的<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>
会多一个Source Title 另一种展示风格 使用.pull-right可以让引用展现出向右侧移动、对齐的效果。 <blockquote class="pull-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
向右对齐移动了额，当然也有相应的pull-left。 列表 无序列表 顺序无关紧要的一列元素。
<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> （编辑：佛山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
<h1>强调Class</h1>
<address>
<ul>
