Bootstrap-02 (前台开发框架)

于 2022-05-07 23:45:06 发布
阅读量149 收藏
点赞数
文章标签： 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>

阿菜酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootstrapAdmin后台管理框架-.net
06-14
UI前端使用流行的Bootstrap框架布局对移动设备的兼容性非常好，自适应目前市场几乎所有终端设备。本系统还具备单一后台支持多前台的特色，提供单点登录（SSO）的能力。 BootstrapAdmin主要功能： 1、通过配置与前台...
前台页面框架
01-17
做前台的朋友可以好好看看，这是不错的前台框架。里面有很多前台框架的案例
Bootstrap-01 (前台开发框架)
m0_63579794的博客
04-29 1643
Bootstrap-01 (前台开发框架)
14款响应式前端开发框架
Java Dynamic的专栏
07-25 3715
摘要：使用前端开发框架可以大大简化开发过程，所开发网站具有跨浏览器、一致性、响应式等特点。本文收集了14款响应式前端开发框架，且分别指出所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。 前端开发并不是一个容易的工作，不仅需要掌握HTML、CSS和JavaScript，针对不同的浏览器版本和平台，还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行，
前台框架
ASDGXCV的专栏
08-26 258
[url]http://www.iteye.com/topic/251521[/url] 关于前台框架 官方网站[url]http://wiki.sitemesh.org/wiki/display/sitemesh/Download[/url]
基于HTML5-BootStrap-SSM图书查询借阅网站设计可升级SpringBoot
11-04
本系统前台采用了BootStrap框架，它是一款最受欢迎的前端html5设计框架，采用它开发出来的网站可以同时在移动端和pc端获得很好的显示效果，用户的体验度很高！ ## 下面是系统用到的实体信息： 图书类型: 图书类别,...
毕业设计 - HTML5-Bootstrap-SSM校园导游咨询网可升级SpringBoot
04-05
前台技术框架： Bootstrap 后台架构框架: SSM 设计一个校园导游程序，为来访的客人提供各种信息查询服务。 (1)设计你所在学校的校园平面图，所含景点不少于10个，以图中顶点表示校内各个景点，存放景点名称、代号、...
毕业设计 - 基于HTML5-BootStrap-SSM图书查询借阅网站设计可升级SpringBoot
最新发布
04-05
本系统前台采用了BootStrap框架，它是一款最受欢迎的前端html5设计框架，采用它开发出来的网站可以同时在移动端和pc端获得很好的显示效果，用户的体验度很高！ 下面是系统用到的实体信息： 图书类型: 图书类别,类别...
AngularJs bootstrap搭载前台框架——准备工作
11-25
1.关于什么是AngularJs以及什么是bootstrap我就不多说了，简单说下，AngularJs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs...
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
前台框架，想学前端框架的同学欢迎下载
前台框架了解
NaNa309706的博客
03-05 1739
什么是MVVM Model 作为MV*家族中的一员，MVVM中的M代表着Model。Model代表我们整个webapp所需要的数据模型，一个典型的例子就是用户信息Model,它应该含有(姓名，年龄等属性)。Model含有大量信息，但它并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。 View View这个词出现频率最多的地方应该是MVC。在MVC设计中，View...
前台框架汇集
LZSTONE
09-22 420
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插件。几乎所有的框架都采用了响应式网格系统。
常见前台框架
、零的博客
02-24 3221
Ecahrts (开源的报表框架) https://www.echartsjs.com/zh/index.html easyUI(功能齐全，但是封装级别比较高，样式不容易修改) http://www.jeasyui.net/ layUI(扁平化风格，好看) https://www.layui.com/ superMa...
spring bootstrap
09-24
Spring MVC是一个开发Web应用程序的框架，而Bootstrap是一个用于设计响应式网页的前端框架。使用Spring MVC和Bootstrap可以快速搭建一个功能齐全、美观的博客系统。此外，该系统还使用了MySQL作为数据库，前台页面...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值