案例1:实现搜索书籍页面
用到组件:媒体对象-Media object
<div class="media">
<img src="img/1.png" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0"><b>冷间谍</b></h5>
<p>书籍价格:9.9元</p>
<p>作者:张强钓丝</p>
<p>出版社:T280/p>
<p>书籍简介:夏日炎炎,油腻超甜</p>
<p>
<button class="btn btn-danger">加入购物车</button>
<button class="btn btn-danger">立即购买</button>
</p>
</div>
</div>
<hr />
<div class="media">
<img src="img/3.png" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0"><b>狂人日记</b></h5>
<p>书籍价格:9.9元</p>
<p>作者:小钓丝</p>
<p>出版社:T280/p>
<p>书籍简介:夏日炎炎,油腻超甜</p>
<p>
<button class="btn btn-danger">加入购物车</button>
<button class="btn btn-danger">立即购买</button>
</p>
</div>
</div>
<hr />
效果图:
案例2:实现购物车页面布局
用到页面内容:表格-Table
<!-- 右9-轮播图&新书上架&热门书籍 -->
<table class="table table-hover">
<thead class="bg-primary">
<tr>
<th scope="col">书籍名称</th>
<th scope="col">单价</th>
<th scope="col">购买数量</th>
<th scope="col">小计</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>冷间谍</td>
<td>19.9</td>
<td><input value="2"/></td>
<td>39.8元</td>
<td><a>删除</a></td>
</tr>
<tr>
<th scope="row">1</th>
<td>狂人日记</td>
<td>19.9</td>
<td><input value="2"/></td>
<td>39.8元</td>
<td><a>删除</a></td>
</tr>
<tr>
<th scope="row">1</th>
<td>时间都在</td>
<td>19.9</td>
<td><input value="2"/></td>
<td>39.8元</td>
<td><a>删除</a></td>
</tr>
</tbody>
</table>
<p class="xxx">
<button class="btn btn-danger">清空购物车</button>
<button class="btn btn-success">继续购物</button>
<button class="btn btn-primary">点我结算</button>
</p>
效果图
案例3:实现购物车页面订单信息
用到组件:模态框-Modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">订单详情</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
1......
2.......
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">确定</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
效果图:
案例4:图标组件的使用
用到组件:模态框-Modal
效果图