Bootstrap-02 (前台开发框架)

最新推荐文章于 2022-05-15 21:02:36 发布
最新推荐文章于 2022-05-15 21:02:36 发布
阅读量176 收藏
点赞数
文章标签： bootstrap javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65208075/article/details/124641173
版权

案例

① 轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 实现首页的导航以及搜索栏目 -->
		<title>Demo1轮播图</title>
		<!-- link引入Bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- 导入jQuery类 -->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<!-- 导入Bootstrap.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.navbar-collapse {
				/* 布局*/
				flex-grow: 0;
			}
 
			.form-group {
				/* 宽度*/
				width: 320px;
				/* 居中*/
				margin: 0 auto;
			}
		</style>
		<script>
			//轮播图自动播放
			$(function() {
				$('.carousel').carousel({
					interval: 3000;
				});
			});
		</script>
	</head>
	<body>
 
		<!-- 实现网站首页的导航条 -->
		<!-- Bootstrap 导航条 通过nav标签添加navbar导航条样式 -->
		<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>
				<!-- collapse 折叠组件-->
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-link" href="Demo5登录+注册.html">登录</a>
						<a class="nav-link" href="Demo5登录+注册.html">注册</a>
						<!-- disabled 禁用-->
						<a class="nav-link disabled">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
 
		<!-- 除去导航条 都需要借助栅格系统来实现 -->
		<div class="container">
			<!-- 第一行 显示搜索栏目 -->
			<div class="row" style="margin-top: 10px;">
				<!-- 栅格系统的列 col-->
				<div class="col">
					<div class="jumbotron">
						<!-- 表单模块-->
						<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-outline-secondary" type="button"
											id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
 
 
			<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
			<div class="row">
				<div class="col-12 col-md-3" style="background-color: #F5C6CB;">
					左侧分类列表显示
				</div>
				<div class="col-12 col-md-9" style="background-color: #ED969E;">
					<div class="row">
						<div class="col-12" style="background-color: #8FD19E;">
							<!-- 轮播图 -->
							<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 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>
								<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 class="col-12" style="background-color: cadetblue;">新书上架+热门书籍</div>
					</div>
				</div>
			</div>
 
		</div>
 
 
	</body>
</html>

② 列表组实现分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 实现首页的导航以及搜索栏目 -->
		<title>Demo2列表组实现分类</title>
		<!-- link引入Bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- 导入jQuery类 -->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<!-- 导入Bootstrap.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.navbar-collapse {
				/* 布局*/
				flex-grow: 0;
			}
 
			.form-group {
				/* 宽度*/
				width: 320px;
				/* 居中*/
				margin: 0 auto;
			}
 
			.book_type {
				border: 1px solid brown;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-weight: bold;
				font-size: 20px;
				background-color: #710503;
				color: white;
			}
		</style>
		<script>
			//轮播图自动播放
			$(function() {
				$('.carousel').carousel({
					interval: 3000;
				});
			});
		</script>
	</head>
	<body>
 
		<!-- 实现网站首页的导航条 -->
		<!-- Bootstrap 导航条 通过nav标签添加navbar导航条样式 -->
		<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>
				<!-- collapse 折叠组件-->
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-link" href="Demo5登录+注册.html">登录</a>
						<a class="nav-link" href="Demo5登录+注册.html">注册</a>
						<!-- disabled 禁用-->
						<a class="nav-link disabled">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
 
		<!-- 除去导航条 都需要借助栅格系统来实现 -->
		<div class="container">
			<!-- 第一行 显示搜索栏目 -->
			<div class="row" style="margin-top: 10px;">
				<!-- 栅格系统的列 col-->
				<div class="col">
					<div class="jumbotron">
						<!-- 表单模块-->
						<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-outline-secondary" type="button"
											id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
 
 
			<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
			<div class="row">
				<div class="col-12 col-md-3" style="background-color: #F5C6CB;">
					<!-- 左侧分类列表显示 -->
					<div class="book_type">书籍分类</div>
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active">
							惊悚
						</button>
						<button type="button" class="list-group-item list-group-item-action">喜剧</button>
						<button type="button" class="list-group-item list-group-item-action">战争</button>
						<button type="button" class="list-group-item list-group-item-action">科幻</button>
						<button type="button" class="list-group-item list-group-item-action" disabled>魔幻</button>
						<button type="button" class="list-group-item list-group-item-action" disabled>爱情</button>
						<button type="button" class="list-group-item list-group-item-action" disabled>校园</button>
					</div>
				</div>
				<div class="col-12 col-md-9" style="background-color: #ED969E;">
					<div class="row">
						<div class="col-12" style="background-color: #8FD19E;">
							<!-- 轮播图 -->
							<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 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>
								<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 class="col-12" style="background-color: cadetblue;">新书上架+热门书籍</div>
					</div>
				</div>
			</div>
 
		</div>
 
 
	</body>
</html>

③ 实现新书上架+热门书籍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 实现首页的导航以及搜索栏目 -->
		<title>Demo3实现新书上架+热门书籍</title>
		<!-- link引入Bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- 导入jQuery类 -->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<!-- 导入Bootstrap.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.navbar-collapse {
				/* 布局*/
				flex-grow: 0;
			}
 
			.form-group {
				/* 宽度*/
				width: 320px;
				/* 居中*/
				margin: 0 auto;
			}
 
			.book_type {
				border: 1px solid brown;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-weight: bold;
				font-size: 20px;
				background-color: #710503;
				color: white;
			}
		</style>
		<script>
			//轮播图自动播放
			$(function() {
				$('.carousel').carousel({
					interval: 3000;
				});
			});
		</script>
	</head>
	<body>
 
		<!-- 实现网站首页的导航条 -->
		<!-- Bootstrap 导航条 通过nav标签添加navbar导航条样式 -->
		<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>
				<!-- collapse 折叠组件-->
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-link" href="Demo5登录+注册.html">登录</a>
						<a class="nav-link" href="Demo5登录+注册.html">注册</a>
						<!-- disabled 禁用-->
						<a class="nav-link disabled">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
 
		<!-- 除去导航条 都需要借助栅格系统来实现 -->
		<div class="container">
			<!-- 第一行 显示搜索栏目 -->
			<div class="row" style="margin-top: 10px;">
				<!-- 栅格系统的列 col-->
				<div class="col">
					<div class="jumbotron">
						<!-- 表单模块-->
						<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-outline-secondary" type="button"
											id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
 
 
			<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
			<div class="row">
				<div class="col-12 col-md-3" style="background-color: #F5C6CB;">
					<!-- 左侧分类列表显示 -->
					<div class="book_type">书籍分类</div>
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active">
							惊悚
						</button>
						<button type="button" class="list-group-item list-group-item-action">喜剧</button>
						<button type="button" class="list-group-item list-group-item-action">战争</button>
						<button type="button" class="list-group-item list-group-item-action">科幻</button>
						<button type="button" class="list-group-item list-group-item-action" disabled>魔幻</button>
						<button type="button" class="list-group-item list-group-item-action" disabled>爱情</button>
						<button type="button" class="list-group-item list-group-item-action" disabled>校园</button>
					</div>
				</div>
				<div class="col-12 col-md-9" style="background-color: #ED969E;">
					<div class="row">
						<div class="col-12" style="background-color: #8FD19E;">
							<!-- 轮播图 -->
							<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 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>
								<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 class="row">
							<div class="col-md-2 col-sm-3 col-6" style="background-color: cadetblue;">
								<!-- 新书上架+热门书籍 -->
								<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
						</div>
						<!-- </div>热门书架 -->
						<div class="row">
							<div class="col-md-2 col-sm-3 col-6" style="background-color: cadetblue;">
								<!-- 新书上架+热门书籍 -->
								<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
						</div>
					</div>
				</div>
 
			</div>
 
 
	</body>
</html>

④ 首页整合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 实现首页的导航以及搜索栏目 -->
		<title>Demo4首页整合</title>
		<!-- link引入Bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- 导入jQuery类 -->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<!-- 导入Bootstrap.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.navbar-collapse {
				/* 布局*/
				flex-grow: 0;
			}
 
			.form-group {
				/* 宽度*/
				width: 320px;
				/* 居中*/
				margin: 0 auto;
			}
 
			.book_type {
				border: 1px solid brown;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-weight: bold;
				font-size: 20px;
				background-color: #710503;
				color: white;
			}
 
			#title {
				background-image: url(img/title_bj.png);
				height: 30px;
				margin-top: 20px;
				margin-bottom: 10px;
				background-repeat: no-repeat;
				border: 1px solid gainsboro;
				color: white;
				font-weight: bold;
				padding-left: 15px;
				text-align: center;
				line-height: 30px;
			}
		</style>
		<script>
			//轮播图自动播放
			$(function() {
				$('.carousel').carousel({
					interval: 3000
				});
			});
		</script>
	</head>
	<body>
 
		<!-- 实现网站首页的导航条 -->
		<!-- Bootstrap 导航条 通过nav标签添加navbar导航条样式 -->
		<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>
				<!-- collapse 折叠组件-->
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-link" href="Demo5登录+注册.html">登录</a>
						<a class="nav-link" href="Demo5登录+注册.html">注册</a>
						<!-- disabled 禁用-->
						<a class="nav-link disabled">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
 
		<!-- 除去导航条 都需要借助栅格系统来实现 -->
		<div class="container">
			<!-- 第一行 显示搜索栏目 -->
			<div class="row" style="margin-top: 10px;">
				<!-- 栅格系统的列 col-->
				<div class="col">
					<div class="jumbotron">
						<!-- 表单模块-->
						<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-outline-secondary" type="button"
											id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
 
 
			<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
			<div class="row">
				<div class="col-12 col-md-3">
					<!-- 左侧分类列表显示 -->
					<div class="book_type">书籍分类</div>
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active">
							惊悚
						</button>
						<button type="button" class="list-group-item list-group-item-action">喜剧</button>
						<button type="button" class="list-group-item list-group-item-action">战争</button>
						<button type="button" class="list-group-item list-group-item-action">科幻</button>
						<button type="button" class="list-group-item list-group-item-action">魔幻</button>
						<button type="button" class="list-group-item list-group-item-action">爱情</button>
						<button type="button" class="list-group-item list-group-item-action">哈哈</button>
						<button type="button" class="list-group-item list-group-item-action">呵呵</button>
						<button type="button" class="list-group-item list-group-item-action">嘿嘿</button>
						<button type="button" class="list-group-item list-group-item-action">嘻嘻</button>
						<button type="button" class="list-group-item list-group-item-action">霍霍</button>
 
					</div>
				</div>
				
				<div class="col-12 col-md-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 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>
								<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
									data-slide="prev">
									<span class="carousel-control-prev-icon" style="background-color: pink;"
										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" style="background-color: pink;"
										aria-hidden="true"></span>
									<span class="sr-only">Next</span>
								</a>
							</div>
						</div>
 
						<!-- 新书上架标题 -->
						<div class="row">
							<div class="col">
								<div id="title">新书上架</div>
							</div>
						</div>
 
						<div class="row">
							<div class="col-md-2 col-sm-3 col-6">
								<!-- 新书上架+热门书籍 -->
								<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
						</div>
 
						<div class="row">
							<div class="col">
								<div id="title">热门书架</div>
							</div>
						</div>
 
						<!-- </div>热门书架 -->
						<div class="row">
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
							<div class="col-md-2 col-sm-3 col-6">
								<figure class="figure">
									<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption" style="color: white;">$23.00</figcaption>
								</figure>
							</div>
						</div>
						
						<!-- 版权信息 -->
						<div class="row" style="margin-top: 10px;">
							<div class="col">
								<div class="text-center">&copy;所有信息归卓京所有</div>
							</div>
						</div>
						
					</div>
				</div>
 
			</div>
 
 
	</body>
</html>

⑤ 登录+注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo5登录+注册</title>
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 实现首页的导航以及搜索栏目 -->
		<title>Demo5登录+注册</title>
		<!-- link引入Bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- 导入jQuery类 -->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<!-- 导入Bootstrap.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
		  .form-group{
			  width: 300px;
			  margin: 0 auto;
		  }
		  #myForm{
              text-align: center;
			  margin-top: 170px;
			  
		  }
		</style>
	</head>
	<body>
		
		<!-- 用户登录+注册 -->
		<form id="myForm">
			<h2 style="font-weight: bold;">用户登录和注册</h2>
		  <div class="form-group">
		    <label for="exampleInputEmail1">用户名</label>
		    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Username">
		    <small id="emailHelp" class="form-text text-muted"></small>
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">密码</label>
		    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <div class="form-check">
		    <input type="checkbox" class="form-check-input" id="exampleCheck1">
		    <label class="form-check-label" for="exampleCheck1">一周内免登陆</label>
		  </div>
		  <button type="submit" class="btn btn-primary" style="width: 300px;">登录|注册</button>
		</form>
		
	</body>
</html>

阿菜酱
关注
Bootstrap-01 (前台开发框架)
m0_65208075的博客
05-06 267
Bootstrap Bootstrap是什么? (1).诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 (2).是一个用于快速开发Web应用程序和网站的前端框架 (3).Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 ② 为什么使用Bootstrap? (1).响应式设计（Bootstrap的响应...
【架构】前台、中台、后台
最新发布
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
09-26 3644
在企业架构和软件开发中，“前台”、“中台”和“后台”分别指代不同层次的系统或组件。这三个概念通常用来描述企业内部信息系统架构的不同层次，各自承担着不同的功能和角色。
14款响应式前端开发框架
Java Dynamic的专栏
07-25 3792
摘要：使用前端开发框架可以大大简化开发过程，所开发网站具有跨浏览器、一致性、响应式等特点。本文收集了14款响应式前端开发框架，且分别指出所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。 前端开发并不是一个容易的工作，不仅需要掌握HTML、CSS和JavaScript，针对不同的浏览器版本和平台，还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行，
前台框架
ASDGXCV的专栏
08-26 288
[url]http://www.iteye.com/topic/251521[/url] 关于前台框架 官方网站[url]http://wiki.sitemesh.org/wiki/display/sitemesh/Download[/url]
前台页面框架
01-17
做前台的朋友可以好好看看，这是不错的前台框架。里面有很多前台框架的案例
Bootstrap-03 (前台开发框架)
qq_67771954的博客
05-15 153
一.案例1：实现搜索书籍页面 组件：媒体对象-Media object <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 支持手机端 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scal
bootstrap-angular前台分页插件demo
08-30
Bootstrap Angular 前台分页插件是一款专为Angular开发的高效、易用的分页组件，它使得在前端实现分页功能变得极其简便，无需依赖后端进行任何分页处理。这款插件的设计理念是简化开发流程，提高项目的可维护性和可...
HTML5前台框架
03-30
非常好用的一款自适应HTML5前台框架，AJAX请求后台返回JSON即可。
WEB前台框架
10-16
QUI网页界面集成框架（原UUR框架）是一套完整的BS模式系统界面解决方案。包括十余种不同结构的主页、各种常用的导航与布局模板、丰富的组件、特效和完备的CSS样式库等等，并有多种皮肤样式可供选择。适合WEB开发工程师、前端制作工程师和界面设计师使用。适用于自动化办公、电子政务和RIA应用等系统的开发。经实践检验，本框架能够大幅度地提高系统开发效率，降低开发成本。 http://www.quickui.net/
hplus 前台框架
11-28
hplus 前台框架
简洁大气的Bootstrap前台框架（Jsp版）
08-31
纯手工原创 良心制作
bui前台框架库
11-30
前台框架，想学前端框架的同学欢迎下载
ssm框架前台bootstrap完整的图书租借系统
05-29
导入项目后可直接运行客户登录 可看到的模块有 1，视频（图书馆简介） 2.图书专栏（关于图书的介绍 技术webservice） 3.我的网盘（图片上传/删除图片） 4.热度搜索（根据借阅情况展示图书） 5.评论管理（每个客户只能对自己借过的书评论）6.租书登记 图书归还（已管理员身份登录 可查看客户借书情况 图书归还情况 归还的书籍的状态 ） 7.充值管理(当借书余额不足时用户可充值余额)二.注册 会员身份选择（根据会员身份 填写会员充值钱数）短息验证（接口）注册成功后邮箱验证（接口） 已有账号不能注册 三.技术 Redis（缓存树形菜单）mongodb(存储日志) webservice(调接口) 网盘 二维码 highcharts
bootstrap.py
08-02
bootstrap.py 国外网站下载链接不能下载，留个有效下载链接
前台框架了解
NaNa309706的博客
03-05 1766
什么是MVVM Model 作为MV*家族中的一员，MVVM中的M代表着Model。Model代表我们整个webapp所需要的数据模型，一个典型的例子就是用户信息Model,它应该含有(姓名，年龄等属性)。Model含有大量信息，但它并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。 View View这个词出现频率最多的地方应该是MVC。在MVC设计中，View...
前台框架汇集
LZSTONE
09-22 455
http://www.kendoui.com/ kendoUI 前台框架 http://www.ligerui.com/ ligerui前台框架 http://www.iteye.com/news/26579-ui-web-qui-jquery Javaeye博主 http://www.iteye.com/news/24906 javaeye 博主 快速开发 http://wrongw...
前台框架选择
热门推荐
jackychen_king的专栏
07-26 1万+
前端开发并不是一个容易的工作，不仅需要掌握HTML、CSS和JavaScript，针对不同的浏览器版本和平台，还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行，前端开发变得越来越困难，且花费的时间更长。 本文收集了14个响应式前端开发框架，可以帮助前端开发人员大大简化开发过程。针对每个框架，文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值