2.1.3 缩略语样式

HTML中使用<abbr>标签可以添加缩略语。Bootstrap中该标签的使用语法与HTML5中的相同，具体使用语法如下：

缩略语样式

<abbr title="World Wide Web">WWW</abbr>

上述语法中，WWW为网页中显示的内容，而title属性的值为“WWW”的完整内容，当鼠标指针悬停在上面时会显示完整的文本。例如，图2-10所示就是Bootstrap中缩略语的样式。

图2-10　缩略语样式

【例2-8】使用Bootstrap制作百度中搜索“零基础学Python”的结果页面。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容。具体代码如下：

<abbr title="零基础学Python，有它就够了">
   <span class="text-danger">零基础学Python</span>
   <span class="text-primary">_百度百科</span>
</abbr><br>
<img src="images/8.png" alt="">

具体代码的实现效果如图2-11所示。

图2-11　Bootstrap中缩略语样式

Bootstrap还提供了一个.initialism，可将文字大小设置为原文字的90%，并且若文字中含有英文字母，则英文字母全部转换为大写字母。

【例2-9】使用Bootstrap的.initialism实现《零基础学Python》的图书介绍。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容。具体代码如下：

<img src="images/9.png" class="float-left img-fluid w-25">
<div class="float-left w-75">
   <abbr title="零基础学Python， 有它就够了" class="text-primary initialism">零基础学Python</abbr>
   <p>
       零基础学Python是针对零基础编程学习者研发的Python入门教程，从初学者角度出发，通过通俗易懂的语言、流行有趣的实例，详细地介绍使用IDLE及Python框架进行程序管理的知识和技术。
   </p>
</div>

具体实现效果如图2-12所示。

图2-12　实现《零基础学Python》的图书介绍