bootstrap03

用组件：媒体对象-Media object实现搜索书籍页面

<div class="media">
					  <img src="img/1.png" class="mr-3" alt="...">
					  <div class="media-body">
					    <h5 class="mt-0">冷间谍</h5>
					    <p>书籍价格:9.9元</p>
					    <p>书籍作者：工藤野</p>
					    <p>出版社：？？？？</p>
					    <p>书籍简介：经典书籍</p>
					    <p>
							<button class="btn badge-danger">加入购物车</button>
							<button class="btn badge-danger">我要结算</button>
						</p>
					  </div>

效果：

 

页面内容：表格-Table

实现购物车页面布局

 

<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>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <th scope="row">冷间谍</th>
					      <td>9.9</td>
					      <td><input type="text"value="1" /></td>
					      <td><a href="#">删除</a></td>
					    </tr>
					    <tr>
					      <th scope="row">第一商会</th>
					      <td>913</td>
					    <td><input type="text"value="1" /></td>
					    <td><a href="#">删除</a></td>
					    </tr>
					    <tr>
					      <th scope="row">宽仁日记</th>
						  <td>913</td>
					     <td><input type="text"value="1" /></td>
					     <td><a href="#">删除</a></td>
					    </tr>
					  </tbody>
					</table>
					<p class="q"><button type="button" class="btn btn-danger">清空购物车</button>
					<button type="button" class="btn btn-primary">继续购物</button>
					<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">立即结算</button></p>
					

 

组件：模态框-Modal

<!-- 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">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        所需支护：元
		      </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>

扩展内容-图标（购物车图标）

<i class="bi bi-cart-check text-danger"></i>