Bootstrap媒体对象&表格&模态框&图标

一，媒体对象（Media object）

它是由Bootstrap网站里组件的一个应用对象，它有许多种方法；

我们引用一个最平常的：

<div class="media">
						<img src="img/1.png" class="mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0">Media heading</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>

要填的内容随自己的要求；

效果如下：

由左三右九的格式分开

二，模态框（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">Modal title</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.。。
								3.订单总价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>

记住，它是当body的第一个子元素的

效果如下：

三，表格（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>
									<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>
								<tr>
									<th scope="row">大萨达</th>
									<td>9.9</td>
									<td><input value="1"/></td>
									<td>9.9</td>
									<td><a href="#">删除<a></td>
								</tr>
								<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>

效果如下：

四，图标

直接找到图标库，不过要进行下载，

里面许多的小图标都是免费的，下载其压缩包然后解压：

 

 在HTML中要进行引用图标库

		<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css"/>

把图标库中的font文件复制到项目中：