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

上机指导

本例将通过Bootstrap布局网页底部的广告页面，具体效果如图1-8所示。

图1-8　用Bootstrap实现的广告效果

开发步骤如下。

首先引入Bootstrap相关文件，然后添加代码实现广告的页面效果。具体代码如下：

<div class="border border-primary" style="width :300px; height: 300 px; margin:0 auto; ">
   <div class="d-flex justify-conten t-between py-1 px-2 table-secon dary">
      <span class="initialism">赞助广告</span><span> &timesb;</span>
   </div>
   <div  class="table-danger  text-center  px-3  py-2"><img  src="image/xc.png"  alt=""  width="200">
</div>
   <div class="bg-white text-center">
      <h4  class="my-3"><span  class="text-danger">越南旅游</span><span  class="ml-2">天天低价</span></h4>
      <h4 class="my-3"><span class="font-weight-bold">年中大促</span></h4>
      <h6 class="my-3">仅<span class="text-danger h4">2165</span><span class="text-danger">元</span>起</h6>
      <h6 class="d-inline-block bg-danger text-white rounded-lg py-2 p x-3"><span>去看看</span><span> &blacktriangleright;</span></h6>
   </div>
</div>

习题

（1）简述什么是Bootstrap。

（2）从网格布局的角度讲，Bootstrap 4与Bootstrap 3的区别是什么？

（3）Bootstrap的优点有哪些？

（4）简述Bootstrap 1至Bootstrap 4各版本的特点。

（5）创建一个HTML文件，然后按顺序引用Bootstrap相关文件。