Bootstrap-案例

最新推荐文章于 2024-01-10 22:14:58 发布

啊啦蛋黄

最新推荐文章于 2024-01-10 22:14:58 发布

阅读量1.3k

点赞数 2

分类专栏： Bootstrap 文章标签： html

本文链接：https://blog.csdn.net/qq_60478234/article/details/123942570

版权

这次的内容主要是以Bootstrap案例来讲解。

案例1：实现搜索书籍页面
实现搜索书籍页面的效果及代码展示：

1.在Bootstrap中使用的组件：媒体对象-Media object

2.效果图：

3.代码：

<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>出版社：浪琴湾702出版社</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>出版社：浪琴湾702出版社</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/3.png" class="mr-3" alt="...">
			  <div class="media-body">
			    <h5 class="mt-0"><b>冷肖俊</b></h5>
			    <p>价格：9.9</p>
				<p>作者：大黄</p>
				<p>出版社：浪琴湾702出版社</p>
			    <p>简介：好看！！！！！！</p>
				<p>
					<button class="btn badge-danger">加入购物车</button>
					<button class="btn badge-danger">立即购买</button>
				</p>
			  </div>
			</div>
			
			
			
			   </div>
			
			</div>

案例2：实现购物车页面布局
实现购物车页面布局的效果及代码展示：

1.在Bootstrap中使用的页面内容：表格-Table

2.效果图：

3.代码：

<div class="col-9">
				<!-- 右9 -->
					<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>
					     <th scope="row">《傻黄瑞》</th>
					     <td>9.9</td>
					     <td><input value="6"></td>
					     <td>1.8元</td>
					     <td><a href="#">删除</td>
					   </tr>
					   <tr>
					     <th scope="row">《冷肖俊》</th>
					     <td>9.9</td>
					     <td><input value="7"></td>
					     <td>191.8元</td>
					     <td><a href="#">删除</td>
					   </tr>
					  </tbody>
					</table>
			
				<p class="yyy">
					<button class="btn btn-danger">清空购物车</button>
					<button class="btn btn-outline-success">继续购物</button>
					<button class="btn btn-primary">点我结算</button>
				</p>
			
			   </div>

案例3：实现购物车页面订单信息
实现购物车页面订单信息的效果及代码展示：

1.在Bootstrap中使用的组件：模态框-Modal

2.效果图：

3.代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=&#

最低0.47元/天解锁文章

啊啦蛋黄

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-案例

这次的内容主要是以Bootstrap案例来讲解。案例1：实现搜索书籍页面实现搜索书籍页面的效果及代码展示：1.在Bootstrap中使用的组件：媒体对象-Media object2.效果图：3.代码：<div class="col-9">  <div class="media"> <img src="./img/img/1.png" class="mr-3" alt="..."&.
复制链接

扫一扫