Bootstrap部分案例

目录

准备工作

一、案例1：实现搜索书籍页面

主要用于组件：媒体对象-Media object

代码如下

效果如下

二、案例2：实现购物车页面布局

主要用于页面内容：表格-Table

代码如下

效果如下

三、案例3：实现购物车页面订单信息

主要用于组件：模态框-Modal

代码如下

效果如下：（点击结算弹出）

四、案例4：图标组件的使用

扩展内容-图标

代码如下

效果如下

五、熟悉其他的（页面内容-组件）的效果

折叠        滚动监听        下拉菜单        分页

导航-面包屑导航        等等（需要留下印象）

---

准备工作：

页面中引入库
① bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
② jquery-3.3.1.js：jQuery库
【注意：必须在Bootstrap核心库引入之前引入jQuery库】
③ bootstrap.min.js:Bootstrap核心库
【注意】②③添加到</body>之前，如下：
<!--引入jQuery的库:必须在Bootstrap库之前引入-->
<script src="js/jquery-3.3.1.js"type="text/javascript"></script>
<1--引入Bootstrap的类库-->
<script sre="js/bootstrap.min.js" type="text/javascript"></script>

Bootstrap文档： 

简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

一、案例1：实现搜索书籍页面

主要用于组件：媒体对象-Media object

代码如下：

HTML：

<div class="col-9">
	<!-- 右9 -->
	<div class="media">
	  <img src="./img/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>出版社：浪琴湾502出版社</p>
		<p>简介：好看！！！！！！</p>
		<p>
			<button class="btn badge-danger">加入购物车</button>
			<button class="btn badge-danger">立即购买</button>
		</p>
	  </div>
	</div>
<hr/>
<div class="media">
  <img src="./img/img/2.png" class="mr-3" alt="...">
  <div class="media-body">
	<h5 class="mt-0"><b>第一商会</b></h5>
	<p>价格：9.9</p>
	<p>作者：小虎</p>
	<p>出版社：浪琴湾502出版社</p>
	<p>简介：好看！！！！！！</p>
	<p>
		<button class="btn badge-danger">加入购物车</button>
		<button class="btn badge-dan