Bootstrap书籍分类
2024-04-23 21:37:43
目录：
案例1：首页轮播图实现
案例2：首页书籍分类实现
案例3：首页新书上架&热门书籍实现
案例4：首页整合
案例5：实现登录
案例1：首页轮播图实现
<title>案例1：首页轮播图实现</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}</style></head><body><!-- 导航条组件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，欢迎来到xx的废品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li><li class="nav-item"><a class="nav-link">我的购物车</a></li></ul></div></div></nav><!-- 大致思路：第一行为搜索区域第二行左3 为书籍分类右9 上为轮播图下为新书上架-热门书籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索区域 --><!-- 表单组件 --><form><div class="form-group"><!-- 输入框组组件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" style="background-color: skyblue;"><div class="col-3">书籍分类</div><div class="col-9" style="background-color: greenyellow;"><div class="row"><div class="col"><!-- 上轮播图 --><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li><li data-target="#carouselExampleIndicators" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="img/lb1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb3.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb4.jpeg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button"data-target="#carouselExampleIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button"data-target="#carouselExampleIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></div></div><div class="row" style="background-color: deeppink;"><div class="col">下新书上架-热门书籍</div></div></div></div></div><!-- 引入jQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
案例2：首页书籍分类实现
<title>案例2：首页书籍分类实现</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}</style></head><body><!-- 导航条组件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，欢迎来到xx的废品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li><li class="nav-item"><a class="nav-link">我的购物车</a></li></ul></div></div></nav><!-- 大致思路：第一行为搜索区域第二行左3 为书籍分类右9 上为轮播图下为新书上架-热门书籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索区域 --><!-- 表单组件 --><form><div class="form-group"><!-- 输入框组组件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" style="background-color: skyblue;"><div class="col-3"><!-- 书籍分类 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a><a href="#" class="list-group-item list-group-item-action">悬疑/a><a href="#" class="list-group-item list-group-item-action">历史文学</a><a href="#" class="list-group-item list-group-item-action">科幻</a><a href="#" class="list-group-item list-group-item-action ">言情</a><a href="#" class="list-group-item list-group-item-action ">青春读物</a><a href="#" class="list-group-item list-group-item-action ">都市</a><a href="#" class="list-group-item list-group-item-action ">教育</a><a href="#" class="list-group-item list-group-item-action ">儿童绘本</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 ">武侠</a></div></div><div class="col-9" style="background-color: greenyellow;"><div class="row"><div class="col">上轮播图</div></div><div class="row" style="background-color: pink;"><div class="col">下新书上架-热门书籍</div></div></div></div></div><!-- 引入jQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
案例3：首页新书上架&热门书籍实现
<title>案例3：首页新书上架&热门书籍实现</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}/* 画像 */.figure{text-align: center;}</style></head><body><!-- 导航条组件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，欢迎来到xx的废品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li><li class="nav-item"><a class="nav-link">我的购物车</a></li></ul></div></div></nav><!-- 大致思路：第一行为搜索区域第二行左3 为书籍分类右9 上为轮播图下为新书上架-热门书籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索区域 --><!-- 表单组件 --><form><div class="form-group"><!-- 输入框组组件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" style="background-color: skyblue;"><div class="col-3">书籍分类</div><div class="col-9" style="background-color: greenyellow;"><div class="row"><div class="col"><!-- 上轮播图 --></div></div><!-- 下新书上架-热门书籍 --><div class="row" style="background-color: yellow;"><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div></div><!-- 热门书籍 --><div class="row" style="background-color: yellow;"><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div></div></div></div></div><!-- 引入jQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
案例4：首页整合
<title>案例4：首页整合</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}/* 画像 */.figure {text-align: center;margin-top: 20px;}/* 书籍分类上间距 */.list-group{margin-top: 30px;}/* 轮播图上间距 */#carouselExampleIndicators{margin-top: 30px;}/* 轮播图 指示灯样式-背景颜色*/.carousel-indicators li{background-color: blue;}/* 新书上架-热门书籍样式 */.xxx{margin-top: 20px;/* 外上间距 */color: white;/* 字体颜色 */background-image: url(img/title_bj.png);/* 背景图片 */background-repeat: no-repeat;/* 不平铺 */font-size: 20px;/* 字体大小 */padding-left: 15px;/* 内左间距 */}</style></head><body><!-- 导航条组件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，欢迎来到xx的废品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li><li class="nav-item"><a class="nav-link">我的购物车</a></li></ul></div></div></nav><!-- 大致思路：第一行为搜索区域第二行左3 为书籍分类右9 上为轮播图下为新书上架-热门书籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索区域 --><!-- 表单组件 --><form><div class="form-group"><!-- 输入框组组件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row"><div class="col-3"><!-- 书籍分类 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a><a href="#" class="list-group-item list-group-item-action">悬疑</a><a href="#" class="list-group-item list-group-item-action">历史文学</a><a href="#" class="list-group-item list-group-item-action">科幻</a><a href="#" class="list-group-item list-group-item-action ">言情</a><a href="#" class="list-group-item list-group-item-action ">青春读物</a><a href="#" class="list-group-item list-group-item-action ">都市</a><a href="#" class="list-group-item list-group-item-action ">教育</a><a href="#" class="list-group-item list-group-item-action ">儿童绘本</a><a href="#" class="list-group-item list-group-item-action ">二次元</a><a href="#" class="list-group-item list-group-item-action ">武侠</a></div></div><div class="col-9"><div class="row"><div class="col"><!-- 上轮播图 --><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li><li data-target="#carouselExampleIndicators" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="img/lb1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb3.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb4.jpeg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button"data-target="#carouselExampleIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button"data-target="#carouselExampleIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></div></div><!-- 下新书上架-热门书籍 --><div class="xxx">新书上架</div><div class="row"><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/3.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/4.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/5.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div></div><!-- 热门书籍 --><div class="xxx">热门书籍</div><div class="row"><div class="col"><figure class="figure"><img src="img/6.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/7.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/8.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/9.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/3.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷间谍</figcaption></figure></div></div></div></div></div><!-- 引入jQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
案例5：实现登录
<title>登录</title><!-- 引入Booststrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style>form{width: 300px;/* 宽度 *//* 左右自适应 */margin-left: auto;margin-right: auto;text-align:center ;/* 水平居中 */margin-top: 120px;/* 上间距 */}/* 按钮的宽度 */form button{width: 300px;}/* 下间距 */form h2{margin-bottom: 20px;}</style></head><body><form><h2>用户登录</h2><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"></div><div class="form-group"><input type="password" class="form-control" id="exampleInputPassword1"></div><div class="form-group form-check"><input type="checkbox" class="form-check-input" id="exampleCheck1"><label class="form-check-label" for="exampleCheck1">Remember me</label></div><button type="submit" class="btn btn-primary">登录</button><div class="form-group "><label class="form-check-label" for="exampleCheck1">©2007-2022</label></div></form><!-- 引入jQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的类库 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
Bootstrap书籍分类相关推荐
- 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
- 朴素贝叶斯实现书籍分类
文章目录 朴素贝叶斯实现书籍分类 一.数据集 二.实现方法 二.代码 实验结果 朴素贝叶斯实现书籍分类 朴素贝叶斯是生成方法,直接找出特征输出Y和特征X的联合分布P(X,Y)P(X,Y),然后用P(Y ...
- 网上书城项目之后台实现书籍分类、新书上架、热销图书
网上书城项目 前言 书籍分类 效果演示 新书上架 效果演示 热销图书 效果演示 注意要点 总结 前言 嘿,今天为大家分享的知识点呢,是后台编码实现前端页面上的书籍分类.新书上架.热销图书这三个主要功能 ...
- 网上书城首页之书籍分类列表
网上书城首页之书籍分类列表 本章目标.实现首页书籍分类列表 一.开始编写代码 1.主界面index.jsp 2.单独写一个事件,和后台事件分开 index.js代码 3.然后在界面后面引用js 现在的 ...
- 网上书城之动态实现前端界面书籍分类新书上架热销书籍
前言 之前实现了后台的登录注册,这一次讲述一下后台获取数据源实现前台的部分功能. 通常这种效果我们有两种方式来实现: 1.前端界面使用foreach标签实现: 2.前端界面使用ajax获取数据 我这次 ...
- 主页面加载书籍分类及图书绑定
主页面加载书籍分类及图书绑定 书籍分类动态加载 书籍展示 图片映射上传 书籍分类动态加载 如图从数据库获取数据加载: 数据库单独有一张表,只需要查询展示就可以了: js文件 $.ajax({url:c ...
- 看过的bootstrap书籍（附下载地址）
http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...
- bootstrap多级分类选择器
应用场景:使用bootstrap框架,在模态框中修改所属分类,分类层级较多,一般在2级以上. 出现问题:因已经在模态框中,bootstrap不允许同时弹出多个模态框. 一开始在网上找各种select组 ...
- Django2.0+Bootstrap书籍管理系统
项目介绍 本篇书籍管理系统的主要功能是简易图书的添加,修改及删除.可作为Django入门者的学习教程.如有错误或者建议,还望多多指教.书籍列表的页面如下: 源码链接:下载 技术工具: Python3. ...
最新文章
- 解题报告（十五）莫比乌斯反演与积性函数（ACM / OI）
- python django 的启动脚本
- activity 生命周期_死磕Android_App 启动过程（含 Activity 启动过程）
- [译] 探究 Swift 中的 Futures Promises
- java httpclient单例_java-8 – CloseableHttpClient.execute每隔几周就会冻结一次,尽管超时...
- 【HTML/CSS】单位小结
- 并发说明：如何构建多线程iOS应用
- Android TextView跑马灯效果与设置文字阴影
- Oracle 19c 新特性：ADG的自动DML重定向增强读写分离
- 【Linux使用】Centos 7 YUM仓库配置文件代理服务器设置
- 拳王虚拟项目公社：虚拟资源平台，是拳王内部虚拟副业项目的课程发布地
- 嵌入式Linux的QT版本,嵌入式Linux版本Qt5.4快速部署
- Excel VBA宏
- 高级Bash脚本编程指南 在线收藏版
- CPU占用100%的一般原因及解决办法
- 智能语音交互社交APP-导声
- 如何使用stripe_使用Stripe和Laravel出售下载内容
- hardhat 教程及 hardhat-deploy 插件使用
- 寻找 JAVA 控件，彗都控件网\中国控件网（http://***）http://www.componentcn.com/
- Python-小游戏-乌龟吃鱼