Bootstrap02

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

1.案例一：首页轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例一：首页轮播图</title>
		<!-- 引入Bootstrap的样式 -->
		<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;
			}
			.form-group{
				width: 300px;
				margin-left: auto;/* auto自适 */
				margin-right: auto;
				margin-top: 31px;
			}
			.ss{
				height: 100px;
				margin-top: 30px;
				background-color: #DBDBDA;
				
			}
	    </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" href="#">我的购物车</a>
			      </li>
			    </ul>
			  </div>
			</nav>
		</div>
		<!-- 栅格搭建主页框架 -->
		<div class="container">
			<!-- 第一行 1列：搜索区域 -->
		  <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" style="background-color: yellow;">
					左3位书籍分类
				</div>
				<div class="col-9" >
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					
					<!-- 右9中 第一行 -->
					<div class="row" style="background-color: greenyellow;" >
						<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>
					
					<!-- 右9中 第二行 -->
					<div class="row" style="background-color: orangered;" >
						<div class="col">
							1.新书上架
						</div>
						<div class="col">
							2.新书上架
						</div><div class="col">
							3.新书上架
						</div><div class="col">
							4.新书上架
						</div><div class="col">
							5.新书上架
						</div>
					</div>
					
					<!-- 右9中 第三行 -->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
							1.热门书籍
						</div>
						<div class="col">
							2.热门书籍
						</div><div class="col">
							3.热门书籍
						</div><div class="col">
							4.热门书籍
						</div><div class="col">
							5.热门书籍
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

用到轮播图

需要去Bootstrap的网站去组件中找

2.案例二：首页书籍分类实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例二：首页书籍分类实现</title>
		<!-- 引入Bootstrap的样式 -->
		<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;
			}
			.form-group{
				width: 300px;
				margin-left: auto;/* auto自适 */
				margin-right: auto;
				margin-top: 31px;
			}
			.ss{
				height: 100px;
				margin-top: 30px;
				background-color: #DBDBDA;
				
			}
	    </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" href="#">我的购物车</a>
			      </li>
			    </ul>
			  </div>
			</nav>
		</div>
		<!-- 栅格搭建主页框架 -->
		<div class="container">
			<!-- 第一行 1列：搜索区域 -->
		  <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" style="background-color: yellow;">
					<!-- 左3位书籍分类 -->
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
							The current button
						</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 list-group-item-danger" >仙侠</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" >
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					
					<!-- 右9中 第一行 -->
					<div class="row" style="background-color: greenyellow;" >
						<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>
					
					<!-- 右9中 第二行 -->
					<div class="row" style="background-color: orangered;" >
						<div class="col">
							1.新书上架
						</div>
						<div class="col">
							2.新书上架
						</div><div class="col">
							3.新书上架
						</div><div class="col">
							4.新书上架
						</div><div class="col">
							5.新书上架
						</div>
					</div>
					
					<!-- 右9中 第三行 -->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
							1.热门书籍
						</div>
						<div class="col">
							2.热门书籍
						</div><div class="col">
							3.热门书籍
						</div><div class="col">
							4.热门书籍
						</div><div class="col">
							5.热门书籍
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

在Bootstrap中找到列表组

3.案例三：首页s书籍上架和热门书籍实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例三：首页s书籍上架和热门书籍实现</title>
		<!-- 引入Bootstrap的样式 -->
		<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;
			}
			.form-group{
				width: 300px;
				margin-left: auto;/* auto自适 */
				margin-right: auto;
				margin-top: 31px;
			}
			.ss{
				height: 100px;
				margin-top: 30px;
				background-color: #DBDBDA;
				
			}
			.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" href="#">我的购物车</a>
			      </li>
			    </ul>
			  </div>
			</nav>
		</div>
		<!-- 栅格搭建主页框架 -->
		<div class="container">
			<!-- 第一行 1列：搜索区域 -->
		  <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" style="background-color: yellow;">
					<!-- 左3位书籍分类 -->
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
							The current button
						</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 list-group-item-danger" >仙侠</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" >
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					
					<!-- 右9中 第一行 -->
					<div class="row" style="background-color: greenyellow;" >
						<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>
					
					<!-- 右9中 第二行 -->
					<div class="row" style="background-color: orangered;" >
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						<div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
							<div class="col">
								<figure class="figure">
										<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
									</figure>
							</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div>
					</div>
					
					<!-- 右9中 第三行 -->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div>
						<div class="col">
							<div class="col">
								<figure class="figure">
										<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
									</figure>
							</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

找画像在Bootstrap

4.案例四：合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例四：合并</title>
		<!-- 引入Bootstrap的样式 -->
		<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;
			}
			.form-group{
				width: 300px;
				margin-left: auto;/* auto自适 */
				margin-right: auto;
				margin-top: 31px;
			}
			.ss{
				height: 100px;
				margin-top: 30px;
				background-color: #DBDBDA;
				
			}
			.figure{
				text-align: center;
			}
			.list-group,#carouselExampleIndicators,.figure{
				margin-top: 30px;
			}
			/* 指示灯 */
		  .carousel-indicators li{
				    background-color: blue;
			}
			.xxx{
				margin-top: 30px;
				background-image: url(img/title_bj.png);
				background-repeat: no-repeat;
				color: white;
				font-size: 18px;
				padding-left: 20px;
			}
	    </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" href="#">我的购物车</a>
			      </li>
			    </ul>
			  </div>
			</nav>
		</div>
		<!-- 栅格搭建主页框架 -->
		<div class="container">
			<!-- 第一行 1列：搜索区域 -->
		  <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">
					<!-- 左3位书籍分类 -->
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
							The current button
						</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 list-group-item-danger" >仙侠</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" >
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					
					<!-- 右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>
					
					<!-- 右9中 第二行 -->
					<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"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						<div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
							<div class="col">
								<figure class="figure">
										<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
									</figure>
							</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div>
					</div>
					
					<div class="xxx">热门书籍</div>
					<!-- 右9中 第三行 -->
					<div class="row">
						<div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div>
						<div class="col">
							<div class="col">
								<figure class="figure">
										<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
										<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
									</figure>
							</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div><div class="col">
						<div class="col">
							<figure class="figure">
									<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
									<figcaption class="figure-caption"><b>冷1间谍</b></figcaption>
								</figure>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>
爱吸血的小鱼
关注
DW个人网页设计制作 html网页设计制作源码
而风不止
11-14 3317
HTML：结构 HTML期末大学生网页设计作业，可以替换文字图片满足不同的CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，代码简单学生水平, 适合初学者学习使用。(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般
使用Bootstrap搭首页
m0_68756200的博客
04-01 354
可在Bootstrap挑选自己喜欢的组件 一，实现书籍分类 实现分类代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1:首页书籍分类实现</title> <!-- 一如Bootatrap的CSS --> <link rel="stylesheet" type="text/css" href="css/boo.
meta name="viewport" content="width=device-width,initial-scale=1.0"理解
热门推荐
yiyueqinghui的博客
01-23 3万+
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 content属性值 width:设备可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域...
Bootstrap警告（Alerts）
暖心~的博客
03-07 2698
一个基本的警告框： 创建一个 <div>，并向其添加一个 .alert 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一一个可取消的警告（Dismissal Alert）： （1）创建一个 <div>，并向其添加一个 .alert 和四个上下文 class（即 .alert-success、.al
【前端框架之Bootstrap02】布局与导航
03-02
我最近也使用了bootstrap来布局，来搞导航。但是效果很不理想，所以我这里先来系统的看看这两块，若是仍然一头雾水的话，那么。。。。我就再学习就完了。好了，废话结束，我们进入今天的学习吧。说道栅格系统，我们...
Bootstrap 02：布局与导航详解 - 栅格系统与实践
在本篇关于【前端框架之Bootstrap02】布局与导航的文章中，作者首先提到自己近期在学习和应用Bootstrap过程中遇到困难，尽管年纪可能是个因素，但他决定通过逐步深入研究来提升自己的技能。Bootstrap栅格系统是文章...
JavaWeb Bootstrap02主页搭建
weixin_62270300的博客
05-04 697
上期回顾 Bootstrap01基本使用https://blog.csdn.net/weixin_62270300/article/details/124547772?spm=1001.2014.3001.5501 目录 一、顶部页面 top.jsp(顶部代码) 二、首页 index.jsp(主页界面) 三、增加商品界面 insert.jsp(增加界面) 一、顶部页面 点击右边图标下拉出来的效果如下👇 点击哪个跳哪个界面 top.jsp(顶部代码) <%@...
关闭NG-Bootstrap carousel 的箭头按钮和指示器
myKernel
11-17 4456
可以在CSS样式表中隐去NG-Bootstrap carousel箭头按钮和指示点，对应的CSS HTML代码如下． 1. 　具体设置　.carousel-control-prev　.carousel-control-prev　.carousel-control-prev　显示为 none2.； 2.　笔者前端开发语言使用angular 2，所以还需要在component中设置ViewEnca
bootstrap4|信息提示框
笺赕
11-23 1730
1、提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。 &lt;div class="alert alert-success"&gt; &lt;s...
Bootstrap的警示框
实践求真知
01-28 816
一 警示框 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;警示框&lt;/title&gt; &lt;l
＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞
qq_45633812的博客
04-15 6430
移动端和pc端不同。现在手机屏幕分辨率越来越高，但屏幕大小并没有太大的变化，这意味着每个物理像素里装了多个实际像素。 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。 所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewpo
htm5 user-scalable 的意思
09-13 2万+
user-scalable=yes,minimum-scale=1.0,maximum-scale=1.0"/> width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是
【像素与浏览器视口的细节】及移动web设置“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no“原因
树上骑个猴的博客
01-08 3097
初学网页制作，很常见的做法就是找各种线上的网页，然后查看源代码，参考学习这些网页是如何实现自己的设计的。而对我来说，我印象最深的一个知识点，是这样的： <div class="wrapper"></div> .wrapper{width:980px;margin:0 auto;} 这个在现在来看，其实就是经典的固定宽度的网页布局。不过，以前的时候，我并不知道为什么这样做就可以。当时的理解是：一个定宽，水平居中的容器，来容纳网页的主体内容，就可以使网页能在不同分辨率的显示屏都有相对
关于Bootstrap的一些使用
uuuu_lllll的博客
04-01 614
目录 案例1：轮播图 案例2：书籍的实现 案例3：新书上架-热门书架 这期呢是关于Bootstrap的一些使用，如果有小伙伴想要了解它的话可以看我上一期文章。 下载路径：Bootstrap下载 进去之后就会看到Bootstrap的中文官网。然后点击Bootstrap4中文文档，之后再点击中文文档。这里面有关于它的一些下载包和一些它的代码。 接下来就可直接开始操作了,我...
data-toggle与data-target是什么作用
Lenmon1997
11-18 3万+
Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。 data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示 data-target 与data-toggle 还有data-spy
li标签间距引起样式差异
A0101010的专栏
05-17 1366
最近在使用bootstrap的轮播图插件carousel时，发现页面样式与插件文档样式不一样，主要是多个li元素间距不同，对比如下图：我实现的页面：插件文档提供的页面：可以看到，我实现的页面中li间距过短。对两个页面仔细对比，发现css没有区别，没办法只能自己加了一个3px的外边距，效果如下：间距可以了，但是破坏了bootstrap动态修改的margin效果，还是很丑。其实检查插件文档的li标签可...
关于boostrap的轮播（Carousel）插件不能自动播放的问题
NeroSolomon的博客
01-19 3276
近段时间，我按照w3c上boostrap的教程写轮播，写完发现这个轮播不能自动播放，需要手工点击到上一张或者下一张的图片后，才能自动播放，经过上网查资料才发现，w3c上的代码少了一个重要的地方： div id="myCarousel" class="carousel slide" data-ride="carousel"> ol class="caro
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值