使用Bootstrap搭首页

最新推荐文章于 2023-10-07 08:28:50 发布
最新推荐文章于 2023-10-07 08:28:50 发布
阅读量290 收藏 2
点赞数
分类专栏： Bootstrap 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68756200/article/details/123908655
版权

可在Bootstrap挑选自己喜欢的组件

一，实现书籍分类 

实现分类代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1:首页书籍分类实现</title>
		<!-- 一如Bootatrap的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>.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="#">你好,欢迎来到艾克时间回收站</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">
						<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
							书籍分类
						</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>
						<button type="button" class="list-group-item list-group-item-action">青春</button>
					</div>
 
				</div>
 
				<div class="col-9" style="background-color: greenyellow;">
					<div class="row">
						<div class="col">
							上轮播图
						</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>
	</body>
</html>

分类效果图：

 

二，实现新书上架和热门书籍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例3:首页新书上架&热门书籍实现</title>
		<!-- 一如Bootatrap的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 type="text/css">
		    .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="#">你好,欢迎来到小袁废品回收站</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">
						<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/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/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/9.png" class="figure-img img-fluid rounded" alt="...">
							  <figcaption class="figure-caption">阿凡达</figcaption>
							</figure>
						</div>
					</div>
					
					<div class="row">
						<div class="col">
							<figure class="figure">
							  <img src="img/pic_c10.png" class="figure-img img-fluid rounded" alt="...">
							  <figcaption class="figure-caption">六度人脉</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
							  <img src="img/pic_c3.png" class="figure-img img-fluid rounded" alt="...">
							  <figcaption class="figure-caption">奇迹</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
							  <img src="img/pic_c6.png" class="figure-img img-fluid rounded" alt="...">
							  <figcaption class="figure-caption">舌尖上的中国</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
							  <img src="img/pic_c8.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>
				</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>
	</body>
</html>

新书上架和热门书籍效果图：

 

三，实现首页轮播图


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1:实现首页轮播图</title>
		<!-- 一如Bootatrap的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 type="text/css">
			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="#">你好,欢迎来到小袁废品回收站</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>
	</body>
</html>

首页轮播图效果图：

 

四、将其合三为一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页整合</title>
		<!-- 一如Bootatrap的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>
			.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 {
				/* 背景图片 */
				background-image: url(img/title_bj.png);
				/* 不平铺 */
				background-repeat: no-repeat;
				/* 字体颜色 */
				color: white;
				/* 外上间距 */
				margin-top: 20px;
				/* 字体大小 */
				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="#">你好,欢迎来到艾克时间回收站</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">
						<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
							书籍分类
						</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>
						<button type="button" class="list-group-item list-group-item-action">青春</button>
					</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/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/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/9.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/pic_c10.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">六度人脉</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/pic_c3.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">奇迹</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/pic_c6.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">舌尖上的中国</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/pic_c8.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>
				</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>
	</body>
</html>

合三为一效果图：

大大怪僵軍
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AxureRP8的bootstrap4元件库
12-21
AxureRP8的bootstrap4的元件库，可以用其扩展axure功能，画出bootstrap效果的原型
Bootstrap实战
caoxinhui521的博客
08-30 985
Bootstrap在线编辑工具（http://www.layoutit.com） Bootstrap中文网(http://www.bootcss.com/) bootstrap-responsive.css必须放置于bootstrap.css后面，否则不具有响应式布局功能。 bootstrap栅格系统 分两种：固定式（fix），流式（fluid） 固定式栅格系统每列宽度与列间间距
Bootstrap框架常用组件
橘猫吃不胖的博客
01-16 3125
Bootstrap框架常用组件1 组件基础1.1 什么是组件1.2 组件的优势2 Bootstrap常用组件2.1 按钮2.2 导航2.3 面包屑导航2.4 分页2.5 列表2.6 表单2.7 按钮组2.8 输入框组3 Bootstrap实现菜单功能3.1 折叠菜单3.2 下拉菜单4 Bootstrap实现轮播图功能4.1 什么是轮播图4.2 轮播图的功能分析4.3 轮播图活动信息4.4 轮播图左侧箭头4.5 轮播图右箭头4.6 轮播图指示器4.7 全部代码 1 组件基础 1.1 什么是组件 组件是一个抽象
Bootstrap组件
十三阿哥的博客
05-29 199
组件
Bootstrap前端组件库
weixin_68160847的博客
01-11 544
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
【Bootstrap】常用组件（框架）
一个普通人的博客
08-24 2461
总结了对个人而言常用的Bootstrap组件
bootstrap项目-潮流穿搭网站
05-04
"bootstrap项目-潮流穿搭网站"是一个基于Bootstrap4的项目，旨在帮助学习者理解如何利用Bootstrap来创建一个时尚且功能完备的在线穿搭平台。 在该项目中，Bootstrap4作为主要的技术栈，它引入了全新的网格系统、更...
流行男女服饰bootstrap网站模板
03-31
Bootstrap是世界上最流行的前端开发框架，尤其在创建响应式布局和移动设备优先的Web项目时，它的使用尤为广泛。本资源“流行男女服饰bootstrap网站模板”是专为搭建时尚服饰类在线商城而设计的一套完整的网站模板。...
bootstrap4实现购物商城
06-18
例如，潮流穿搭.html可能就是一个展示商品分类或热门商品的页面，通过Bootstrap的网格系统实现不同设备上的灵活展示。 其次，Bootstrap 4 提供了大量的预定义样式和组件，如导航栏、按钮、卡片、模态框等，这些都是...
Bootstrap Studio 6.0.1 macOS
05-04
Bootstrap Studio是一款Bootstrap框架创建响应式网站的功能强大的桌面应用程序。Bootstrap Studio可帮助您创建漂亮的网站。它配备了大量内置组件，您可以通过拖放来组装响应式网页。它建立在非常受欢迎的Bootstrap...
bootstrap服饰购物商城网站模板
04-02
例如，首页通常会有一个吸引眼球的轮播图，展示最新的时尚潮流或者热销商品。商品分类页则设计有清晰的导航，方便用户按类别浏览产品。商品详情页会提供详尽的商品信息，包括图片、价格、尺码、颜色选择等，甚至可能...
【原型工具XSTAR】Bootstrap之分页元件设置详解
游泳的鱼的专栏
02-24 582
在原型设计中，分页元件会经常用到，如果开发人员使用的是bootstrap样式风格的设计，在绘制原型图时，最好是能使用与其风格一致的原型，这使得在Axure中绘制效果变得复杂。如果有一个能够快速生成分页元件的办法，一定可以让原型设计工作不那么痛苦。 在xstar软件中提供了一套完整的bootstrap原装样式风格的元件库，可以轻松实现分页元件的效果。下面就对分页元件的设置进行讲解。 1. 元件效果 2. 准备工作 功欲善其事，必先利其器。动手之前，先要安装最新版的Xstar软件，我使用的是Xs
BootStrap代码
july_29的博客
10-10 256
这一部分用于在网页中显示代码，比如可以用在博客这种地方。 <code> 用于显示单行文本，在里面如果有多行，也会显示为一行，但是我们可以加br实现换行，在code标签中的文本在页面中显示为红色字体，背景也会改变。 <kbd> kbd标签用于标记用户通过键盘输入的内容。 比如我们要表达ctrl键，我们就可以用到kdd。 把ctrl放在kbd标签里面就是下面的这种效果 ctrl <pre> 这个标签和h5中的标签差不多，w3school对pre标签的定义为： pre 元素可定
Bootstrap框架（组件）
passerby的博客
07-27 1992
根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片 这一章我们来讲一下一些组件无处不在的字体图标 如图： 它们在APP页面底部、网站导航条、登录页面或注册页面 Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上 按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离 在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式 翻页只能实现
3.Bootstrap组件
wxhua420701325的博客
10-25 1546
栅格系统。
01-bootstrap-概述
记录java学习日常~
05-25 294
栅格系统：Bootstrap 提供了一个灵活的网格系统，可以轻松地创建响应式布局。通过将页面分成 12 列网格，开发者可以更加自由、快速地控制页面布局。组件库：Bootstrap 提供了众多的 UI 组件和工具，如导航、下拉菜单、警告框、面板、标签页等，可以大大提高页面开发的效率，减少代码量。此外，Bootstrap 还提供了很多 JavaScript 插件，如模态框、滚动条、分页器等，可以让网站增添更多的交互性和效果。自适应设计：Bootstrap 的优秀之处在于它的响应式设计。
Bootstrap前端组件库+构建管理
hhhh
04-18 1305
Bootstrap使用Grunt来构建CSS、JavaScript，并用Jekyll来写作文档。 Grunt是Node.js中一个JavaScript的任务管理器，也可以使用其他工具与技术来构建Bootstrap Bootstrap的版本 默认版本、支持Flexbox的版本、仅包含网格系统的版本 Bootstrap内置一个移动优先、12栏布局的响应网格系统 Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本
红绿灯简单模拟
柠檬麻麻
06-16 2157
子文件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>子窗口</title> <style> //计时文本框的样式 #con{width:50px;height:30px;text-align: center;line-height: 30px;fon
BootstrapBlazor企业级组件库：前端开发的革新之路
最新发布
成长的足迹
10-07 834
作为一名Web开发人员，开发前端我们一般都是使用JavaScript，而Blazor就是微软推出的基于.Net平台交互式客户Web UI 框架，可以使用C#替代JavaScript，减少我们的技术栈、降低学习前端的成本。而采用Blazor开发，少不了需要封装UI控件，所以今天给大家推荐一套基于Bootstrap风格的Blazor企业级UI组件库。1、开箱即用、丰富的企业级Blazor组件，除了兼容Bootstrap的样式库外，还额外增加了100多个组件；3、支持渐进式Web应用程序；4、支持.Net5+；
bootstrap与wordpress如何搭配使用
04-28
Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架，而WordPress是一个开源的内容管理系统，它可以帮助用户快速构建一个网站。Bootstrap和WordPress可以很好地搭配使用，以下是一些使用Bootstrap和WordPress的建议： 1. 使用Bootstrap的WordPress主题：可以选择一些已经集成了Bootstrap框架的WordPress主题，这些主题通常具有响应式设计和现代化的外观，可以为用户提供出色的用户体验。 2. 添加Bootstrap资源文件：可以在WordPress主题中手动添加Bootstrap资源文件，如CSS、JavaScript和字体等，以确保正确地加载Bootstrap框架。 3. 使用Bootstrap插件：Bootstrap有很多强大的插件可以增强网站的功能，如轮播、模态框、下拉菜单、滚动监听等，这些插件可以很容易地与WordPress集成。 4. 自定义Bootstrap样式：可以通过覆盖Bootstrap默认样式或添加自定义CSS样式来自定义网站样式，以满足特定的设计需求。 总之，使用Bootstrap和WordPress可以帮助构建现代化、响应式和具有强大功能的网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值