媒体对象

                    <div class="col-9">
					<!-- 右9为  搜索书籍列表 -->
					
					<div class="media">
						<img src="img/pic_c10.png" class="align-self-start mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0">六度人脉</h5>
							<p>书籍价格:9.9</p>
							<p>书籍作者:999</p>
							<p>出版社:666</p>
							<p>书籍简介:天宫的剧情</p> 
							<p>
								<button class="btn btn-danger">加入购物车</button>
								<button class="btn btn-danger">我要结算</button>
							</p>
						</div>
					  </div>
					  <hr color="#000FFF">

 效果如下：

 表格

	                <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>9.9</td>
							<td><input value="1"></td>
							<td>9.9</td>
							<td><a href="#">删除</a></td>
						  </tr>
                        </tbody>
					  </table>
					
					  <p class="aaa">
						<button class="btn btn-danger">清空购物车</button>
						<button class="btn btn-primary">继续购物</button>
						<button class="btn btn-success">立即结算</button>
					  </p>

    

效果如下:

 模态框

 点击结算后的模态框

                       <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>9.9</td>
							<td><input value="1"></td>
							<td>9.9</td>
							<td><a href="#">删除</a></td>
						  </tr>
                        </tbody>
					  </table>
					
					  <p class="aaa">
						<button class="btn btn-danger">清空购物车</button>
						<button class="btn btn-primary">继续购物</button>
						<button class="btn btn-success">立即结算</button>
					  </p>

效果如下:

 扩展内容（图标）

 效果如下