BootStrap入门到实战：BootStrap全局CSS样式（二）- 文本排版和样式设置、 HTML5特殊文本标签的应用

一. 文本排版和样式设置

内容涵盖了标题、副标题、文本对齐、大小写转换、文本修饰以及缩略语等方面的样式设置。

1. 标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题

2. 对齐

通过文本对齐类，可以简单方便的将文字重新对齐

示例：

<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中对齐</p>
<p class="text-right">文本右对齐</p>

效果如下图：

3. 改变大小写

通过这几个类可以改变文本的大小写

 示例：

<p class="text-lowercase">hello WORLD</p>
<p class="text-uppercase">hello WORLD</p>
<p class="text-capitalize">hello WORLD</p>

 效果如下图：

4. 缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容

示例：

<p>这是 <abbr title="World Wide Web">WWW</abbr> 的缩写</p>

 效果如下图：

5. 文本修饰

示例：

    <p class="text-muted">hello world</p>
    <p class="text-primary">hello world</p>
    <p class="text-success">hello world</p>
    <p class="text-info">hello world</p>    
    <p class="text-warning">hello world</p>
    <p class="text-danger">hello world</p>

效果如下图：

二.HTML5特殊文本标签的应用

该内容并不直接属于Bootstrap框架的具体内容，而是HTML5中的一些标签元素，它们用于表示特定类型的文本内容，如代码、键盘输入、预格式化文本等。这些元素可以在任何HTML页面中使用，包括使用Bootstrap框架的页面。

在使用Bootstrap框架时，可以通过结合使用这些HTML标签和Bootstrap的样式类，来增强页面的视觉效果和用户体验。例如，可以使用Bootstrap的排版和颜色类与这些标签结合，以创建更吸引人的代码示例、用户输入提示、代码块展示等。

示例：

<!-- 内联代码 -->
<p class="code">这是一段内联代码<code>var a = 10;</code></p>

<!-- 用户输入 -->
<p>用户输入：<kbd>Ctrl + P</kbd></p>

<!-- 代码块 -->
<p>代码如下：<pre>&lt;bootstrap&gt;</pre></p>

<!-- 变量 -->
<p>变量：<var>y</var> = <var>m</var> * <var>x</var></p>

<!-- 程序输出 -->
<samp>hello BootStrap</samp>

效果如下图：