Bootstrap响应式Web前端开发最新章节_王红著

2.3 图片

Bootstrap中对图片的设计主要包括设置响应式、圆角、圆形和镶边样式的图片。下面将具体介绍部分样式的使用方法以及表现形式。

2.3.1 响应式图片

图片是网页中不可或缺的一部分。如果创建响应式图片，那么图片在网页中会随浏览器的屏幕尺寸自动缩放。要创建响应式图片，仅需添加类名.img-fluid即可。

响应式图片

【例2-26】使用Bootstrap将明日科技网站的导航设置为响应式图片。具体代码如下：

<!--横向导航栏-->
<ul class="list-inline bg-dark text-white m-0 pl-5">
   <li class="list-inline-item p-2">首页</li>
   <li class="list-inline-item p-2">课程</li>
   <li class="list-inline-item p-2">读书</li>
   <li class="list-inline-item p-2">社区</li>
   <li class="list-inline-item p-2">服务中心</li>
   <li class="list-inline-item p-2">App下载</li>
</ul>
<img src="images/45.jpg" alt="" class="img-fluid w-100">

具体运行结果如图2-38所示。

图2-38　设置响应式图片

2.3.2 修饰图片

1．为图片添加圆角

Bootstrap中预设的图片样式主要有圆角、“药丸”形圆角和椭圆形图片，其样式如图2-39所示。

修饰图片

图2-39　Bootstrap中的图片样式

· 圆角：设置图片的边框弧度为0.25rem，为图形添加类名.rounded可设置此样式。

· “药丸”形圆角：设置图片的顶角弧度为50rem，为图形添加类名.rounded-pill可设置此样式。

· 椭圆形图片：设置图片的边框弧度为50%，为图形添加类名.rounded-circle可设置此样式。

【例2-27】使用Bootstrap制作淘宝网中好货推荐的商品展示页面。具体代码如下：

   <style type="text/css">
      body {
         background-color: #fff1c8;
      }
   </style>
<div class="col">
   <img src="images/44.jpg" alt="" class="rounded-pill col-4">
   <img src="images/50.jpg" alt="" class="rounded-circle col-2">
   <img src="images/47.jpg" alt="" class="rounded-circle  col-2">
   <img src="images/48.jpg" alt="" class="rounded-circle col-2">
   <img src="images/46.jpg" alt="" class="rounded-pill m-1 col-4">
   <img src="images/49.jpg" alt="" class="rounded m-1 col-2">
   <img src="images/51.jpg" alt="" class="rounded m-1 col-2">
   <img src="images/52.jpg" alt="" class="rounded m-1 col-2">
</div>

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

图2-40　为图片添加圆角

2．添加图片边框

添加图片边框时，将图片内边距设置为0.25rem，边框圆角设置为0.25rem，并且设置边框为白色。

【例2-28】使用Bootstrap制作明日科技课程列表页面模块。具体代码如下：

<style type="text/css">
   dl:hover {
      border: 1px solid #c8cbcf;
   }
</style>
<div class="text-center float-left row">
   <dl class="col-4">
      <dt><img src="images/42.jpg" alt="" class="img-thumbnail  p-3"></dt>
      <dd class="mt-2">第1讲 酒 店管理系统概述</dd>
   </dl>
   <dl class="col-4">
      <dt><img src="images/43.jpg" alt="" class="img-thumbnail  p-3"></dt>
      <dd class="mt-2"> 编写一个考试小程序</dd>
   </dl>
   <dl class="col-4">
      <dt><img src="images/41.png" alt="" class="img-thumbnail p-3"></dt>
      <dd class="mt-2">第1讲 甜 橙音乐网开发背景</dd>
   </dl>
</div>

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

图2-41　为图片添加边框