一,媒体对象(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">×</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文件复制到项目中: