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