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

一. 文本排版和样式设置

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

1. 标题

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

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

2. 对齐

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

类名	含义
.text-left类	文本内容左对齐
.text-center类	文本内容居中对齐
.text-right类	文本内容右对齐

示例：

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

效果如下图：

3. 改变大小写

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

类名	含义
.text-lowercase类	字母全部小写
.text-uppercase类	字母全部大写
.text-capitalize类	在一段文本中，首字母大写

 示例：

<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. 文本修饰

类名	效果	含义
text-muted	将文本颜色设置为灰色	不重要或被忽略的信息
text-primary	将文本颜色设置为深蓝色	主要信息或强调
text-success	将文本颜色设置为深绿色	成功或正面的信息
text-info	将文本颜色设置为浅蓝色	一般信息或提示
text-warning	将文本颜色设置为黄色	警告或需要注意的信息
text-danger	将文本颜色设置为红色	错误或危险信息

示例：

    <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的排版和颜色类与这些标签结合，以创建更吸引人的代码示例、用户输入提示、代码块展示等。

标签名	含义	应用场景
<code> 标签	内联代码： 包裹内联样式的代码片段	在编程教程、文档或博客文章中，可以使用<code>标签来展示代码片段。这有助于读者更好地理解和学习代码的用法和语法。
<kbd> 标签	用户输入： 标记用户通过键盘输入的内容	在软件使用指南或操作手册中，可以使用<kbd>标签来指示用户需要按下哪些键或执行哪些操作。这有助于用户快速了解如何与软件进行交互。
<pre> 标签	代码块： 多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理	在技术文档、API参考或示例代码中，可以使用<pre>标签来显示代码块。这有助于保持代码的格式和可读性，使读者能够轻松地复制和使用代码。
<var> 标签	变量： 通过 <var> 标签标记变量	在数学、物理或计算机科学等领域的教材或演示文稿中，可以使用<var>标签来表示变量。这有助于突出变量的作用和意义，帮助读者理解相关概念。
<samp> 标签	程序输出： 通过 <samp> 标签来标记程序输出的内容	在软件开发文档、测试报告或演示文稿中，可以使用<samp>标签来展示程序的输出结果。这有助于说明程序的功能和效果，帮助读者验证程序的正确性和可靠性。

示例：

<!-- 内联代码 -->
<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>

效果如下图：