分類：WEB前端 時(shí)間：
本文主要介紹下Bootstrap文本常用的一些class。包括標(biāo)題、頁面主體、強(qiáng)調(diào)、小號文本、著重、斜體、縮略語、地址對齊、強(qiáng)調(diào)、描述、水平排列的描述。
1、h1~h6標(biāo)題
HTML中的所有標(biāo)題標(biāo)簽，從<h1>到<h6>均可用。另外，還提供了.h1到.h6 class，為的是給inline屬性的文本賦予標(biāo)題的樣式，在標(biāo)題內(nèi)還可以包含<small>標(biāo)簽或.small元素，用來標(biāo)記副標(biāo)題。例如：
1 2 3 4 5 6 |
效果：
2、頁面主體和普通段落
Bootstrap將全局font-size設(shè)置為14px，line-height為1.428。這些屬性直接賦給<body>和所有段落元素。另外，<p>(段落)還被設(shè)置了等于1/2行高的底部外邊距(margin)(即10px)，通過添加.lead可以讓段落突出顯示，字體為21px,font-weight:為300。例如：
a、小號文本
對于不需要強(qiáng)調(diào)的inline或block類型的文本，使用<small>標(biāo)簽包裹，其內(nèi)的文本將被設(shè)置為父容器字體大小的85%，有斜體的效果。標(biāo)題元素中嵌套的<small>元素被設(shè)置不同的font-size。你還可以為行內(nèi)元素賦予.small以代替任何<small>標(biāo)簽，例如：
b、著重
通過增加font-weight強(qiáng)調(diào)一段文本，例如：
c、斜體
用斜體強(qiáng)調(diào)一段文本，還可以使用HTML5中定義的<b>和<i>元素。<b>表示在不增加額外重要性的同時(shí)將詞或短語高亮顯示，<i>大部分用于發(fā)言、技術(shù)短語等情況。例如：
d、強(qiáng)調(diào)class
這些class通過顏色來表示強(qiáng)調(diào)。也可以應(yīng)用于鏈接，當(dāng)鼠標(biāo)盤旋于鏈接上時(shí)，其顏色會(huì)變深，就像默認(rèn)的鏈接樣式。
1 2 3 4 5 6 |
e、縮略語
如想看完整的內(nèi)容可把鼠標(biāo)懸停在縮略語上, 但需要包含title屬性，為縮略語添加.initialism可以將其font-size設(shè)置的更小些。例如：
1 2 |
f、地址
讓聯(lián)系信息以最接近日常使用的格式呈現(xiàn)。在每行結(jié)尾添加<br>可以保留需要的樣式，例如：
1 2 3 4 5 |
效果：
3、對齊方式
通過文本對齊class，可以簡單方便的將文字重新對齊，例如：
下表提供了 Bootstrap更多排版類的實(shí)例：
| 類 | 描述 |
|---|---|
| .lead | 使段落突出顯示 |
| .small | 設(shè)定小文本 (設(shè)置為父文本的 85% 大小) |
| .text-left | 設(shè)定文本左對齊 |
| .text-center | 設(shè)定文本居中對齊 |
| .text-right | 設(shè)定文本右對齊 |
| .text-justify | 設(shè)定文本對齊,段落中超出屏幕部分文字自動(dòng)換行 |
| .text-nowrap | 段落中超出屏幕部分不換行 |
| .text-lowercase | 設(shè)定文本小寫 |
| .text-uppercase | 設(shè)定文本大寫 |
| .text-capitalize | 設(shè)定單詞首字母大寫 |
| .initialism | 顯示在 <abbr> 元素中的文本以小號字體展示 |
| .blockquote-reverse | 設(shè)定引用右對齊 |
| .list-unstyled | 移除默認(rèn)的列表樣式，列表項(xiàng)中左對齊 ( <ul> 和 <ol> 中)。 這個(gè)類僅適用于直接子列表項(xiàng) (如果需要移除嵌套的列表項(xiàng)，你需要在嵌套的列表中使用該樣式) |
| .list-inline | 將所有列表項(xiàng)放置同一行 |
| .dl-horizontal | 該類設(shè)置了浮動(dòng)和偏移，應(yīng)用于 <dl> 元素和 <dt> 元素中，具體實(shí)現(xiàn)可以查看實(shí)例 |
| .pre-scrollable | 使 <pre> 元素可滾動(dòng) scrollable |
有用，打賞點(diǎn)飯錢唄~
標(biāo)簽：Bootstrap教程
來源：Bootstrap使用心得之文本
