分类：WEB前端 时间：
本文主要介绍下Bootstrap文本常用的一些class。包括标题、页面主体、强调、小号文本、着重、斜体、缩略语、地址对齐、强调、描述、水平排列的描述。
1、h1~h6标题
HTML中的所有标题标签，从<h1>到<h6>均可用。另外，还提供了.h1到.h6 class，为的是给inline属性的文本赋予标题的样式，在标题内还可以包含<small>标签或.small元素，用来标记副标题。例如：
1 2 3 4 5 6 |
效果：
2、页面主体和普通段落
Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外，<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)，通过添加.lead可以让段落突出显示，字体为21px,font-weight:为300。例如：
a、小号文本
对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%，有斜体的效果。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small以代替任何<small>标签，例如：
b、着重
通过增加font-weight强调一段文本，例如：
c、斜体
用斜体强调一段文本，还可以使用HTML5中定义的<b>和<i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示，<i>大部分用于发言、技术短语等情况。例如：
d、强调class
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
1 2 3 4 5 6 |
e、缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性，为缩略语添加.initialism可以将其font-size设置的更小些。例如：
1 2 |
f、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式，例如：
1 2 3 4 5 |
效果：
3、对齐方式
通过文本对齐class，可以简单方便的将文字重新对齐，例如：
下表提供了 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使用心得之文本
联系客服
