搜索书籍界面:组件媒体对象 Media-Object
购物车界面:组件表格 table table-hover
订单界面:组件模态框 modal data-toggle="modal" data-target="#aa"
图标的使用:
下载 解压 font 页面中引入icon.css style="font-size color"
其他组件:折叠 滚动监听 路径导航 ....
案例一 目录
<div class="media">
<img src="img/3.png" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">狂人日记</h5>
<p>书籍价格:60</p>
<p>书籍作者:花湖</p>
<p>出版社:清华出版社</p>
<p>评价:牛逼</p>
<p>
<button class="btn-danger">我要结算</button>
<button class="btn-danger">加入购物车</button>
</p>
</div>
案例二 购物车
<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">狂人日记</th>
<td>60</td>
<td><input type="text" value="1" /></td>
<td>60</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<th scope="row">ARRC</th>
<td>20</td>
<td><input type="text" value="1" /></td>
<td>20</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<th scope="row">自动化运维</th>
<td>40</td>
<td><input type="text" value="1" /></td>
<td>40</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
<div id="aa">
<button class="btn btn-danger">清空购物车</button>
<button class="btn btn-info">清空购物车</button>
<button class="btn btn-success" data-toggle="modal" data-target="#exampleModal">清空购物车</button>
</div>
案例三 弹出框
<!-- 模态框 建议作为body的直接子元素-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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">Modal title</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-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">结算</button>
</div>
</div>
</div>
</div>
案例四:小图标
<div class="col">
<figure class="figure">
<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption"><b>冷间谍<i class="bi bi-cart3 text-danger" ></i></b></figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption"><b>冷间谍<i class="bi bi-cart3"></i></b></figcaption>
</figure>
</div>