上机指导

本例将通过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>