Bootstrap

组件：媒体对象

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，模态框以 弹出对话框的形式出现，具有最小和最实用的功能集。

1. 为 .modal 添加 role="dialog"，用于指定模态框为对话框。
2. 为 .modal-dialog 添加 aria-hidden="true" 属性。
3. 通过 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">&times;</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>