目錄
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】。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。