Bootstrap 斜体、文本对齐、缩略图、地址、列表等
目录
1、标题
2、页面主体
3、强调
a、小号文本
b、着重
c、斜体
d、对齐class
e、强调class
4、缩略语
5、地址
6、列表
a、无序列表
b、有序列表
c、无样式列表
d、内联列表
e、描述
f、水平排列的描述
1、标题
HTML中的所有标题标签，从<h1>到<h6>均可用。另外，还提供了.h1到.h6 class，为的是给inline属性的文本赋予标题的样式。例如：
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3>
在标题内还可以包含<small>标签或.small元素，用来标记副标题。例如：
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
2、页面主体
Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外，<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)，例如：
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
通过添加.lead可以让段落突出显示，例如：
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
3、强调
a、小号文本
对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何<small>标签，例如：
<small>This line of text is meant to be treated as fine print.</small>
b、着重
通过增加font-weight强调一段文本，例如：
<strong>rendered as bold text</strong>
c、斜体
用斜体强调一段文本，例如：
<em>rendered as italicized text</em>
注：可选元素
还可以使用HTML5中定义的<b>和<i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示，<i>大部分用于发言、技术短语等情况。
d、对齐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>
e、强调class
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
<p class="text-muted">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-primary">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-success">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-info">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-danger">Etiam porta sem malesuada magna mollis euismod....</p>
演示效果：
4、缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性，例如：
<abbr title="attribute">attr</abbr>
为缩略语添加.initialism可以将其font-size设置的更小些，例如：
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
5、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<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>
演示效果如下：
6、列表
a、无序列表
顺序无关紧要的一列元素，例如：
<ul> <li>Lorem ipsum dolor sit amet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Eget porttitor lorem</li> </ul>
b、有序列表
顺序至关重要的一组元素，例如：
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> </ol>
c、无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式，例如：
<ul class="list-unstyled"> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Eget porttitor lorem</li> </ul>
d、内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列，例如：
<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>
e、描述
带有描述的短语列表，例如：
<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
f、水平排列的描述
.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起，随着导航条逐渐展开而排列在一样，例如：
<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta fel</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodjusto sit amet risus.</dd> </dl>
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】。
如果，您希望更容易地发现我的新博客，不妨点击一下左下角的【关注我】。
如果，您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是【Ruthless】。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
