Bootstrap03

目录

1、实现搜索书籍页面----组件：媒体对象-Media object

以下是写的书籍的名称、价格、作者、出版社及其简介代码

<div class="media">
				<img src="img/郑振东6.JPG" class="mr-3" alt="..." width="250px" height="300px">
				<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>

2、实现购物车页面布局---页面内容：表格-Table

这案例是对购物车的页面布局，其中有对购物车里的增删改主要代码，还有对购物车的单价、购买数量、总计费用的小部分代码

<table class="table table-hover">
				            <thead>
				              <tr class="bg-primary">
				                <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="2"></td>
				                <td>19.8元</td>
				              <td><a href="#">删除</td>
				              </tr>
				             <tr>

3、实现购物车页面订单信息---组件：模态框-Modal

如下是模态框-Modal的图片

 这串代码是放在bady下的

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <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">
		        放订单信息
		      </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、图标组件的使用---扩展内容-图标

写案例4首先要导入font

 这是引入图标库的CSS代码

<!-- 引入图标库的css -->
		<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css" />