Bootstrap03(媒体对象&表格&模态框&图标&)

今天带大家了解一些组件 ：

1、媒体对象

媒体对象有助于构建复杂且重复的组件，其中一些媒体位于不环绕所述媒体的内容旁边。

<div class="media">
						<img src="img/1.png" class="mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0"><b>冷间谍</b></h5>
							<p>书籍价格:9.9元</p>
							<p>书籍作者:黄涛</p>
							<p>出版社:大冤种出版社</p>
							<p>书籍简介:舔狗的剧情~~~~</p>
							<p>
									<button class="btn btn-danger">加入购物车</button>
									<button  class="btn btn-danger">我要结算</button>
							</p>
						</div>
					</div>
					<hr color="#0000FF" />
					
					<div class="media">
						<img src="img/8.png" class="mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0"><b>万古神帝</b></h5>
							<p>书籍价格:91.9元</p>
							<p>书籍作者:飞天鱼</p>
							<p>出版社:咯可咯可出版社</p>
							<p>书籍简介:若尘如此</p>
							<p>
									<button class="btn btn-danger">加入购物车</button>
									<button  class="btn btn-danger">我要结算</button>
							</p>
						</div>
					</div>
					<hr color="#0000FF" />
					
					<div class="media">
						<img src="img/4.png" class="mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0"><b>完美世界</b></h5>
							<p>书籍价格:93.9元</p>
							<p>书籍作者:番茄</p>
							<p>出版社:空空出版社</p>
							<p>书籍简介:独断万古</p>
							<p>
									<button class="btn btn-danger">加入购物车</button>
									<button  class="btn btn-danger">我要结算</button>
							</p>
						</div>
					</div>
					<hr color="#0000FF" />
				</div>

效果如下 ：

 

2、表格   table

1、table-hover：鼠标悬停高亮的表格

<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="#">删除</td>
							</tr>
							<tr>
								<th scope="row">《万古神帝》</th>
								<td>91.9</td>
								<td><input value="2" /></td>
								<td>91.9</td>
								<td><a href="#">删除</td>
							</tr>
							<tr>
								<th scope="row">《完美世界》</th>
								<td>93.9</td>
								<td><input value="3" /></td>
								<td>93.9</td>
								<td><a href="#">删除</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>

 效果如下：

 

3、模态框

bootstrap中的模态框（modal），不同于Tooltips，模态框以 弹出对话框的形式出现，具有最小和最实用的功能集。

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。

<!-- 模态框的HTML  建议作为body标签的直接子元素 -->
		<!-- 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">
						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>

 效果如下：

 

4、图标

 

 

<figcaption class="figure-caption"><b>冷间谍&nbsp;<i class="bi bi-cart-check text-danger"></i></b></figcaption>