bootstrap02——书城首页

最新推荐文章于 2023-08-08 19:40:52 发布
最新推荐文章于 2023-08-08 19:40:52 发布
阅读量343 收藏 2
点赞数
分类专栏： Bootsrap 文章标签： bootstrap javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ys_chy/article/details/124548030
版权

书城系统

1.导航条

2.搜索

3.左侧分类

4.有侧轮播图

5.新书上架

6.热门书籍 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商城首页</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 分别引入jQuery的js和Bootstrap的js -->
		<script src="js/bootstrap.js " type="text/javascript"></script>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<style type="text/css">
			.input-group {
				/* 宽度 */
				width: 300px;
				/* 左间距 */
				margin-left: auto;
				/* 右间距 */
				margin-right: auto;
				/* 上间距 */
				margin-top: 31px;
			}
			.navbar-collapse {
				/* 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
				flex-grow: 0;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<!-- 固定容器 -->
			<div class="container">
				<a class="navbar-brand" href="#">您好，欢迎来到网上书店</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
					aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-item nav-link" href="#">登录</a>
						<a class="nav-item nav-link" href="#">注册</a>
						<a class="nav-item nav-link disabled" href="#">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>

		<!-- 栅格系统 -->
		<div class="container">
			<!-- 第一行搜索 -->
			<div class="jumbotron">
				<div class="col">
					<form action="">
						<div class="input-group mb-3">
							<input type="text" class="form-control" placeholder="书籍名称"
								aria-label="Recipient's username" aria-describedby="basic-addon2">
							<div class="input-group-append">
								<button class="btn btn-outline-secondary" type="button">搜索</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- 第二行 左3右9 -->
			<div class="row">
				<!-- 左侧  -->
				<div class="col-3">
					<div class="list-group">
						<a href="#" class="list-group-item list-group-item-action active">
							书城首页
						</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 disabled">言情</a>
					</div>
				</div>
				<!-- 右侧 -->
				<div class="col-9">
					<!-- 第一行 -->
					<div class="row">
						<div class="col-12">
							<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>
								</ol>
								<div class="carousel-inner">
									<div class="carousel-item active">
										<img class="d-block w-100" src="img/lb/lb1.png" alt="First slide">
									</div>
									<div class="carousel-item">
										<img class="d-block w-100" src="img/lb/lb2.jpg" alt="Second slide">
									</div>
									<div class="carousel-item">
										<img class="d-block w-100" src="img/lb/lb3.jpg" alt="Third slide">
									</div>
								</div>
								<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
									data-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="sr-only">Previous</span>
								</a>
								<a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
									data-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="sr-only">Next</span>
								</a>
							</div>
						</div>
					</div>
					<div class="">
						新书上架
					</div>
					<!-- 第二行 -->
					<div class="row">
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/1.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">冷间谍</figcaption>
							</figure>
						</div>
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/2.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">第一商会</figcaption>
							</figure>
						</div>
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/3.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">狂人日记</figcaption>
							</figure>
						</div>
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/4.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">爱因斯坦</figcaption>
							</figure>
						</div>
					</div>
					<div class="">
						热门书籍
					</div>
					<!-- 第二行 -->
					<div class="row">
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/1.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">冷间谍</figcaption>
							</figure>
						</div>
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/2.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">第一商会</figcaption>
							</figure>
						</div>
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/3.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">狂人日记</figcaption>
							</figure>
						</div>
						<div class="col-3">
							<figure class="figure">
								<img src="img/books/4.png" class="figure-img img-fluid rounded"
									alt="A generic square placeholder image with rounded corners in a figure.">
								<figcaption class="figure-caption">爱因斯坦</figcaption>
							</figure>
						</div>
					</div>
					
				</div>

			</div>
		</div>
	</body>
</html>

小羊持续开发
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
网上书城前端界面设计
月亮投递员的博客
07-01 8263
这里写目录标题一级目录二级目录三级目录 一级目录 BootStrap官网css样式下载链接 二级目录 三级目录
BootStrap网上书城首页布局
m0_67514201的博客
04-04 1624
目录 1,什么是 Bootstrap？ 2,导入js库 3,代码演示 1,什么是 Bootstrap？ Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。 2,导入js库 网上书城首页布局 3,代码演示 <!DOCTYPE html> <html> <head> <meta charset=...
书城项目_java实战_bootstrap_
10-03
基于javaSSM框架编写的书城管理项目，基于BootStrap前端框架设计的前台
基于javaweb+mysql的ssm+maven书城管理系统(java+ssm+layui+jsp+mysql)
m0_71048928的博客
08-08 111
首页、图书信息、图书资讯、我的、跳转到后台、购物车、在线客服等信息管理功能。基于javaweb+mysql的ssm+maven书城管理系统(java+ssm+layui+jsp+mysql)基于javaweb+mysql的SSM+Maven书城管理系统(java+ssm+layui+jsp+mysql)个人中心、用户管理、图书分类管理、图书信息管理、图书评价管理、系统管理、订单管理，前端：JSP+CSS+JS+JQUERY+Layui。
网上书店（SSM+Bootstrap+Mysql）
01-14
基于ssm框架的简单书店，项目虽然简单，但是更加讲解方便的学习了ssm框架的搭建及应用（sql文件已在项目中）
BookStoreTemp:基于bootstrap的图书商城前台页面模板
05-11
图书商城 Web前台模板 截图 首页 购物车 我的订单 图书详情 用户登录 用户注册 友情连接 技术 IDE：WebStorm 语言：html,css,javascript 框架：bootstrap,FlatUI 大学期间为课设写的图书商城模板，不维护。添加说明，希望有需要的童鞋能够方便筛选。
整合 spring mvc、 spring、 hibernate、 bootstrap 开发网上书城管理系统
08-02
整合 spring mvc、 spring、 hibernate、 bootstrap 开发网上书城管理系统
bootstrap02（书城首页）
qq_67785529的博客
05-02 226
总案例：（导航条，搜索框，分类组，书籍展示） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no
Bootstrap(新书上架&书籍列表&轮播图)
Bugxiu_fu的博客
05-16 279
轮播图，新书上架，书籍列表实现
Bootstrap项目——中关村创业大街.zip
最新发布
02-14
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】： 所有源码都经过严格测试，...
一个网上书城（实现了基本的购物功能）
11-27
一个简单的网上书城 javabean servlet sql数据库
整合 spring mvc，spring，hibernate，bootstrap 开发网上书城管理系统
07-30
整合 spring mvc，spring，hibernate，bootstrap 开发网上书城管理系统
bootstrap前台界面模板
10-14
丰富的模板界面参考
网上书城前端页面模板.zip
09-04
比较全面的商城页面模板,很适合后端开发，没有时间写页面的朋友们，保证可以运行，非常适用大家，下载以后，只需要放在tomcat服务器下面就可以运行成功
完整版网上书城
07-21
网上书城，完整版，----适合大多初学者练习----
bootstrap——bootstrapTable实现隐藏列的示例
08-31
本篇文章主要介绍了bootstrapTable实现隐藏列的示例，具有一定的参考价值，有兴趣的可以了解一下。
拥Bootstrap入怀——导航栏篇
09-02
拥Bootstrap入怀 导航栏篇，和大家一起走进Bootstrap，了解Bootstrap的导航栏，感兴趣的小伙伴们可以参考一下
图书管理系统网站（运用技术：bootstrap,jquery,javascrip）
weixin_50616848的博客
10-01 5096
运用jquery按钮事件实现页面切换，表格添加，以及css美化，借助bootstrap实现页面的美化 进入该系统为登陆界面，在账号和密码为空的情况下，会提示账号密码不能为空 点击注册，则跳入注册界面，注册中任何一项为空都为提醒不能为，点击立即注册后则跳回登陆界面 点击登陆后则进入主界面 第一功能：点击图书管理则进入图书管理界面，点击左侧按钮的添加图书可切换为添加界面 点击添加图书，图书信息会添加到表格末端 第二功能：点击图书购买按钮，会出现购买商城，点击我......
HTML5+CSS3 创建网上书店界面
qq_55786319的博客
10-20 4033
超链接的简单运用 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网上书店——火热开售【海量图书，欢迎选购】</title> <style> body{background: #e5ede2;} body,nav,ul,li{ margin:0;padding: 0 } nav{ background-color: #9
javaweb网上书城系统
05-14
JavaWeb网上书城系统是一个基于JavaWeb技术构建的在线书城系统，它可以提供图书的在线浏览、购买、订单管理、用户管理等功能。下面是该系统的主要功能模块： 1. 用户模块：包括用户注册、登录、修改个人信息、查看历史订单等功能。 2. 图书模块：包括图书的浏览、查询、分类、详情页展示、购买等功能。 3. 购物车模块：包括将商品加入购物车、修改购物车商品数量、删除购物车中的商品、结算等功能。 4. 订单模块：包括订单的生成、查看订单状态、取消订单等功能。 5. 后台管理模块：包括图书管理、订单管理、用户管理、统计报表等功能，管理员可以对网站进行管理。 该系统的架构设计一般是采用MVC架构，使用Spring、SpringMVC、Mybatis等技术，数据库一般使用MySQL。前端使用HTML、CSS、JavaScript等技术，采用Bootstrap等前端框架。整个系统的开发可以分为需求分析、系统设计、编码实现、测试调试、部署上线等多个阶段。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小羊持续开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值