下载掌阅APP，畅读海量书库
立即打开
本例将通过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> ⊠</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> ▸</span></h6>
</div>
</div>