Bootstrap响应式Web前端开发
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1.2 添加强调文本

1. 为段落添加强调文本

Bootstrap提供了多种标题文本的样式，在添加强调文本时，需要为文本设置类名.lead。强调文本预置的文本大小为1.25rem，文字粗细为300。具体样式如图2-5所示。

添加强调文本

图2-5　强调文本的样式

【例2-4】使用Bootstrap实现《零基础学HTML5+CSS3》的图书简介。新建一个HTML5文件，在该文件中引入Bootstrap文件，然后在<body>标签中添加强调文本的样式。具体代码如下：

<img src="images/2.jpg" alt="" class="float-left" width="200">
<div class="float-left w-75">
   <h2>零基础学HTML5+CSS3</h2>
   <p class="lead">《零基础学HTML5+CSS3》是针对零基础编程学习者全新研发的HTML5+CSS3入门教程。本书通过通俗的语言、流行有趣的实例，详细地介绍使用HTML5+CSS3进行程序开发需要掌握的知识和技术。全书共分20章，包括HTML基础、文本、图像和超链接、CSS3概述、CSS3高级应用、多媒体、HTML5特性、离线Web应用程序、响应式网页设计，以及51购商城等。书中所有知识都结合具体示例进行讲解，并给出设计的程序代码的详细注释，可以使读者轻松领会网页设计的精髓，快速提高开发技能。</p>
</div>

上面代码的运行效果如图2-6所示。

图2-6　为段落添加强调文本

2. 文本内联元素

HTML有一些添加文本样式的内联元素，例如<strong>、<em>和<del>等，使用这些元素可以自动为文本添加一些样式，例如加粗、斜体和删除线等。Bootstrap中亦是如此，并且Bootstrap还对这些元素的样式进行了优化。当用户需要使用这些样式时，直接添加标签即可。

【例2-5】使用Bootstrap制作明日学院联系页面。实现时，需要在HTML文件中引入Bootstrap文件，然后添加明日学院的Logo图片、联系方式等。关键代码如下：

<style type="text/css">
   body {
      background: url("images/5.jpg") no-repeat;
   }
</style>
<img src="images/3.png" alt="" class="img-fluid">
<div>
   <div>
      <strong>工 作时间：周一至周五  08:30—17:00<br></strong>
      <em>客服E-mail：mingrisoft@******</em>
   </div>
   <br>
   <div>
      <small>公司地址：吉林省长春市南关区财富领域<br></small>
      <em>邮政编码：130000</em>
   </div>
</div>
<img src="images/4.png" alt="" class="img-fluid">

上面代码的效果如图2-7所示。

图2-7　文本内联元素应用实例效果

说明

该例中通过为<img>标签设置类名.img-fluid来实现图片随浏览器的显示尺寸自动缩放。关于图片的样式，后面小节有具体介绍。

3. 通过类名设置强调文本的对齐方式

Bootstrap中通过添加类名可以设置强调文本的对齐方式。设置文本的对齐方式时，其可选的类名如下所示。

• .text-left：设置文字水平向左对齐。

• .text-center：设置文字水平居中对齐。

• .text-right：设置文字水平向右对齐。

• .text-justify：设置文字两端对齐。

【例2-6】使用Bootstrap实现支付宝蚂蚁森林模块中消息公告的效果。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容，并且通过<style>标签为网页自定义背景样式。具体代码如下：

<style type="text/css">
   body {
  background: url("images/6.jpg") no-repeat;
   }
</style>
<div class="pt-5">
   <br>
   <p class="text-left">木木对你说：你这偷能量贼</p>
   <p class="text-center"> 木木开启了森林防护罩</p>
   <p class="text-right"> 阿呆获得森林环卫的称号</p>
</div>

该例的运行效果如图2-8所示。

图2-8　蚂蚁森林消息公告效果

当然，Bootstrap还可以通过一些颜色来实现强调文本的效果，并且Bootstrap也提供了一些类名来设置文字的颜色。具体可见例2-7。

具体预设的文字颜色属性值如下。

• .text-primary：设置文字颜色为#007bff。

• .text -secondary：设置文字颜色为#6c757d。

• .text -success：设置文字颜色为#28a745。

• .text -danger：设置文字颜色为#dc3545。

• .text -warning：设置文字颜色为#ffc107。

• .text -info：设置文字颜色为#17a2b8。

• .text -light：设置文字颜色为#f8f9fa。

• .text -dark：设置文字颜色为#343a40。

• .text -white：设置文字颜色为#fff（白色）。

• .text –black-50：设置文字颜色为rgba(0,0,0,0.5)。

• .text –white-50：设置文字颜色为rgba(255,255,255,0.5)。

• .text –muted：设置文字颜色为#6c757d。

• .text –body：设置文字颜色为#212529。

【例2-7】使用Bootstrap制作拼多多中获取水滴的页面。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容，并且通过<style>标签为网页自定义背景样式。具体代码如下：

<style type="text/css">
   body{
      background: url("images/7.jpg") no-repeat;
   }
</style>
<div class="pt-4 mt-5    text-center">
   <p><strong>添加3名好友</strong></p>
   <p class="text-danger">未领取</p>
</div>
<div class="mt-5 text-center">
   <p class="mb-1 pt-3"><strong>每 日免费领水</strong></p>
   <p class="text-muted">奖励10 ～20g,剩余2次</p>
</div>
<div    class="mt-5 text-center">
   <p class="mb-1 pt-3"><strong>浏览商品1分钟</strong></p>
   <p class="text-primary">奖励20g,剩余2次</p>
</div>
<div class="mt-5 text-center">
   <p class="mb-1 pt-3"><strong>收 集水滴雨</strong></p>
   <p class="text-success">已完成</p>
</div>
<div class="mt-5 text-center">
   <p class="mb-1 pt-3"><strong>三 日水滴礼包</strong></p>
   <p class="text-warning">还差一天</p>
</div>
<div class="mt-5 text-center">
   <p class="mb-1 pt-3"><strong>拼 单领水滴</strong></p>
   <p class="text-info">去拼单</p>
</div>

上述代码的运行效果如图2-9所示。

图2-9　使用文字颜色强调文本

上一章目录下一章