组件:媒体对象
Bootstrap提供了两种类型的媒体对象:媒体(.media)和媒体列表(.media-list)。媒体用来展示单个对象,媒体列表用来展示多个对象。
默认情况下,媒体由一个向左或向右浮动的媒体对象(如,图像、视频、音频等)和媒体内容构成。一个媒体中,可以嵌套另一个媒体。
<div class="media">
<img src="img/1.png" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">笑话</h5>
<p>书籍价格:10.9元</p>
<p>书籍作者:欧某</p>
<p>出版社:小白出版社</p>
<p>书籍简介:乱写的</p>
<p>
<button class="btn btn-danger">加入购物车</button>
<button class="btn btn-danger">我要结算</button>
</p>
</div>
</div>
组件:表格 table-hover
鼠标悬停高亮的表格,当鼠标停到表格中该表格区域会有高亮效果
<div class="col-9">
<!-- 右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">《笑话》</th>
<td>9.9k</td>
<td><input value="1"/> </td>
<td>9.9</td>
<td><a href="#">删除</a> </td>
</tr>
<tr>
<th scope="row">《笑话1》</th>
<td>10.9k</td>
<td><input value="1"/> </td>
<td>10.9</td>
<td><a href="#">删除</a> </td>
</tr>
<tr>
<th scope="row">《笑话2》</th>
<td>11.9k</td>
<td><input value="1"/> </td>
<td>11.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>
</div>
组件:模态框 Modal
bootstrap中的模态框(modal),不同于Tooltips,模态框以 弹出对话框的形式出现,具有最小和最实用的功能集。
- 为 .modal 添加 role="dialog",用于指定模态框为对话框。
- 为 .modal-dialog 添加 aria-hidden="true" 属性。
- 通过 aria-describedby 属性为模态框 .modal 添加描述性信息
<!-- 模态框的HTML 建议作为body标签的子元素 -->
<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、ssssss
订单总价xx元
</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>