BootStrap-书籍搜索列表购物车订单结算form表单分页图标
2024-04-12 09:41:47
目录
1. 用BootStrap实现案例
1.1 搜索列表
1.2 购物车&订单结算
1.3 form表单&分页&图标
1. 用BootStrap实现案例
1.1 搜索列表
实现效果
实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 引入jQuery库 --><script type="text/javascript" src="js/jquery-3.3.1.js"></script><!-- 引入 bootstrap 的 js 库 --><script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script><!-- 引入 bootstrap 的 css 库 --><link rel="stylesheet" type="text/css" href="js/bootstrap-5.0.2/dist/css/bootstrap.css" /></head><body><div class="container"><!-- 第一行：导航 --><div class="row"><div class="col"><img src="img/zkinglogo.png" /></div><div class="col text-end mt-4"><a href="">注册</a> |<a href="">登录</a> |<a href="">我的购物车</a> |<a href="">网站首页</a></div></div><!-- 第二行 ：搜索区域--><div class="row btn-info" style="height: 60px; width: 1127px;"><div class="col mt-3 text-center"><input type="text" /><button class="btn btn-danger">查询</button></div></div><!-- 第三行：主要内容区 --><div class="row"><!-- 第一列 --><div class="col-3"><!-- 第一行：书籍分类 --><div class="row" style="background-color: #7E0000; color: white; font-size: 20px;">书籍分类</div><!-- 第二行：书籍分类列表 --><div class="list-group row"><a href="#" class="list-group-item list-group-item-action"> 文艺</a><a href="#" class="list-group-item list-group-item-action list-group-item-primary"> 小说</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary"> 青春</a><a href="#" class="list-group-item list-group-item-action list-group-item-success"> 童书</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger"> 励志</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning"> 生活</a><a href="#" class="list-group-item list-group-item-action list-group-item-info"> 科技</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark"> 教育</a></div></div><!-- 第二列： --><div class="col-8"><div class="row"><div class="col mt-2"><div class="media"><img src="img/1.png" class="mr-3" alt="..."><div class="media-body"><p>冷间谍</p><p>作者：xxx</p><p>价格：￥999.99</p><button class="btn btn-danger">加入购物车</button><button class="btn btn-danger">去结算</button></div></div></div></div><div class="row"><div class="col mt-2"><div class="media"><img src="img/2.png" class="mr-3" alt="..."><div class="media-body"><p>第一商会</p><p>作者：xxx</p><p>价格：￥999.99</p><button class="btn btn-danger">加入购物车</button><button class="btn btn-danger">去结算</button></div></div></div></div><div class="row"><div class="col mt-2"><div class="media"><img src="img/3.png" class="mr-3" alt="..."><div class="media-body"><p>狂人日记</p><p>作者：xxx</p><p>价格：￥999.99</p><button class="btn btn-danger">加入购物车</button><button class="btn btn-danger">去结算</button></div></div></div></div></div></div> </div></body>
</html>
1.2 购物车&订单结算
实现效果
实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 引入jQuery库 --><script type="text/javascript" src="js/jquery-3.3.1.js"></script><!-- 引入 bootstrap 的 js 库 --><script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script><!-- 引入 bootstrap 的 css 库 --><link rel="stylesheet" type="text/css" href="js/bootstrap-5.0.2/dist/css/bootstrap.css" /></head><body><div class="container"><!-- Modal --><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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">结算成功</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><!-- 第一行：导航 --><div class="row"><div class="col"><img src="img/zkinglogo.png" /></div><div class="col text-end mt-4"><a href="">注册</a> |<a href="">登录</a> |<a href="">我的购物车</a> |<a href="">网站首页</a></div></div><!-- 第二行 ：搜索区域--><div class="row btn-info" style="height: 60px; width: 1312px;"><div class="col mt-3 text-center"><input type="text" /><button class="btn btn-danger">查询</button></div></div><!-- 第三行：主要内容区 --><div class="row"><!-- 第一列 --><div class="col-3"><!-- 第一行：书籍分类 --><div class="row" style="background-color: #7E0000; color: white; font-size: 20px;">书籍分类</div><!-- 第二行：书籍分类列表 --><div class="list-group row"><a href="#" class="list-group-item list-group-item-action"> 文艺</a><a href="#" class="list-group-item list-group-item-action list-group-item-primary"> 小说</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary"> 青春</a><a href="#" class="list-group-item list-group-item-action list-group-item-success"> 童书</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger"> 励志</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning"> 生活</a><a href="#" class="list-group-item list-group-item-action list-group-item-info"> 科技</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark"> 教育</a></div></div><!-- 第二列： --><div class="col"><table class="table table-striped text-center"><thead><tr><th scope="col">序号</th><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">1</th><td>斗破苍穹</td><td>99.99</td><td><input type="number" value="1" class="text-center"/></td><td>99.99</td><td><a href="">删除</a><a href="">更新</a></td></tr><tr><th scope="row">1</th><td>狂人日记</td><td>99.99</td><td><input type="number" value="1" class="text-center"/></td><td>99.99</td><td><a href="">删除</a><a href="">更新</a></td></tr><tr><th scope="row">1</th><td>第一商会</td><td>99.99</td><td><input type="number" value="1" class="text-center"/></td><td>99.99</td><td><a href="">删除</a><a href="">更新</a></td></tr></tbody></table><div class="text-center"><button class="btn btn-danger">清空购物车</button><button class="btn btn-danger">继续购物</button><button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">结算</button></div></div></div> </div></body>
</html>
1.3 form表单&分页&图标
实现效果
实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入jQuery库 --><script type="text/javascript" src="js/jquery-3.3.1.js"></script><!-- 引入 bootstrap 的 js 库 --><script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script><!-- 引入 bootstrap 的 css 库 --><link rel="stylesheet" type="text/css" href="js/bootstrap-5.0.2/dist/css/bootstrap.css" /><!-- 引入字体图片css文件 --><link rel="stylesheet" type="text/css" href="js/icons-1.5.0/font/bootstrap-icons.css" /><style type="text/css">form{width: 300px;height: 300px;position: absolute;left: 40%;top: 30%;}</style></head><body><div class="container"><form><div class="mb-3"><label for="exampleFormControlInput1" class="form-label">账号</label><input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入账号"></div><div class="mb-3"><label for="exampleFormControlTextarea1" class="form-label">密码</label><input type="password" class="form-control" id="exampleFormControlInput1" placeholder="请输入密码"></div><div class="text-center"><button class="btn btn-danger">登录</button><button class="btn btn-danger">注册</button></div></form></div> <hr /><i class="bi bi-wifi-2"></i><hr /><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></nav></body>
</html>
BootStrap-书籍搜索列表购物车订单结算form表单分页图标相关推荐
- 7.20 Bootstrap、企业黄页2.0、form表单、全选不选反选
Bootstrap.企业黄页2.0.form表单.全选不选反选 一.Bootstrap PPT内容 HTML中导入Bootstrap Bootstrap教程网站 二.企业黄页2.0 三.form表单 ...
- form表单上传文件_SpringBoot中如何使用SpringMVC上传文件？
今天我们要说的这个话题很简单,不要问为啥,因为SpringBoot,哈哈.现在SpringBoot可以说人人都会用了,它的好处是显而易见的,大大的简化了配置,一起来看看吧. 我们分以下3种情况来谈这个 ...
- php form表单属性,HTML5 表单属性
HTML5 表单属性 HTML5 中新的表单属性 HTML5 的 和 标签添加了几个新属性,如下所示:新属性: autocomplete novalidate 新属性: autocomplete au ...
- form表单属性集合
在HTML中有很多地方都需要登录注册搜索,就会涉及到form表单; 表单常用属性: 属性 描述 name 表单的名字 action 提交表单的目标 method 提交表单的方法(get) enctyp ...
- FORM表单的几大属性
问题引入 在做一个活动支付项目的时候,提交订单(form表单)跳转支付页面发现没有反应.经过断点排查发现断点也进了,不报错.但是返回的就是空白页,让人很纠结. 经过反复测试,才发现是杀毒软件拦截了fo ...
- vue表单提交数组_ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
- HTML列表 form表单 选择按钮
1.无序列表 <ul>:定义无序列表 <li>:定义列表项 Type 属性指定无序列表的符号,取值有: Disc:实心圆点 Circl:空心圆圈 Square:实心正方形. 2 ...
- django，form表单，数据库增删改查
Django 02 复习: Django下载: 在命令行输入: pip3 install django==1.11.11 在这里不要用最新的3.7,推荐使用3.6/3.5/ ...
- Django Form表单组件
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
最新文章
- robots协议是什么？对网站SEO有什么好处？
- Service Mesh 为什么从“趋势”走向“无聊”？
- 逆向工程核心原理学习笔记（一）：寻找程序的主函数（Main）
- K8S水平伸缩器 - 自动伸缩微服务实例数量
- C# log4net纯代码设置参数
- C#合成解析XML与JSON
- Linux 查看磁盘容量、查找大文件、查找大目录
- ASP.NET 路由
- SAE学习-使用SAE的Storage服务存储图片
- Javascript第三章循环最后一种方法for..in与for区别第二课
- 《21天学通C语言（第7版）》一6.4 小 结
- 澳门人均GDP比香港高，但为什么很多人感觉澳门没有香港富有？
- 主板检测卡c5_主板测试卡代码及解决方法
- 四.驱动框架入门之LED（中）
- 慈禧是怎么吃年夜饭的
- U-BOOT小全（一）
- H5页面跳转小程序分享-山东标梵互动
- 《反脆弱：从不确定性中获益》
- 空气质量监控系统中的车库CO浓度监控系统
- 除了打通各类知识平台的激励系统，他们还想做国际领先的区块链技术社区