Bootstrap02

最新推荐文章于 2022-07-31 22:07:04 发布
最新推荐文章于 2022-07-31 22:07:04 发布
阅读量124 收藏
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65795413/article/details/124553730
版权
本文通过四个案例详细讲解了如何使用Bootstrap构建网页首页：包括首页轮播图、书籍分类、新书上架与热门书籍展示，以及首页的完整整合。每个案例都展示了Bootstrap组件的应用。
摘要由CSDN通过智能技术生成

我们用几个案例：

 

案例一：首页轮播图实现（我们需要的组件可以去bootstrap的网站找）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1：首页轮播图实现</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>
			.navbar-collapse{
				 flex-grow: 0;/* 固定容器中 1代表弹性过大占用父容器剩余空间  0代表不占用 */
			 }
			 .form-group{
				 width: 300px;/* 宽度 */
				 margin-left: auto;/* 左间距自适应 自动 */
				 margin-right: auto;/* 右间距自适应 自动 */
				 margin-top: 31px;/* 100-38=62/2=31px  居中*/
			 }
			 .ss{
				 height: 100px;/* 高度 */
				 margin-top: 30px;/* 上间距 */
				 background-color: #DCDCDC;/* 背景颜色 */
			 }
		 </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>
			</div>
		</nav>

		<!-- 栅格搭建主页框架 -->
		<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;">
					左三为书籍分类
				</div>
				<div class="col-9">
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					<!-- 右9中第一行 -->
					<div class="row" style="background-color: yellowgreen;">
						<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中第二行 新书上架 5列-->
					<div class="row" style="background-color: moccasin;">
						<div class="col">
							①新书上架
						</div>
						<div class="col">
							②新书上架
						</div>
						<div class="col">
							③新书上架
						</div>
						<div class="col">
							④新书上架
						</div>
						<div class="col">
							⑤新书上架
						</div>
					</div>

					<!-- 右9中第三行 热门书籍 5列-->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
							①热门书籍
						</div>
						<div class="col">
							②热门书籍
						</div>
						<div class="col">
							③热门书籍
						</div>
						<div class="col">
							④热门书籍
						</div>
						<div class="col">
							⑤热门书籍
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 分别引入jQuery和Bootstrap的类框 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例2：首页书籍分类实现</title>
		<!-- 引入Bootstrap的样式-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style>
			.navbar-collapse{
				 flex-grow: 0;/* 固定容器中 1代表弹性过大占用父容器剩余空间  0代表不占用 */
			 }
			 .form-group{
				 width: 300px;/* 宽度 */
				 margin-left: auto;/* 左间距自适应 自动 */
				 margin-right: auto;/* 右间距自适应 自动 */
				 margin-top: 31px;/* 100-38=62/2=31px  居中*/
			 }
			 .ss{
				 height: 100px;/* 高度 */
				 margin-top: 30px;/* 上间距 */
				 background-color: #DCDCDC;/* 背景颜色 */
			 }
		 </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>
			</div>
		</nav>

		<!-- 栅格搭建主页框架 -->
		<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;">
					<!-- 左三为书籍分类 -->
					<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>
					</div>
				</div>
				<div class="col-9">
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					<!-- 右9中第一行 -->
					<div class="row" style="background-color: yellowgreen;">
						<div class="col">
							轮播图
						</div>
					</div>

					<!-- 右9中第二行 新书上架 5列-->
					<div class="row" style="background-color: moccasin;">
						<div class="col">
							①新书上架
						</div>
						<div class="col">
							②新书上架
						</div>
						<div class="col">
							③新书上架
						</div>
						<div class="col">
							④新书上架
						</div>
						<div class="col">
							⑤新书上架
						</div>
					</div>

					<!-- 右9中第三行 热门书籍 5列-->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
							①热门书籍
						</div>
						<div class="col">
							②热门书籍
						</div>
						<div class="col">
							③热门书籍
						</div>
						<div class="col">
							④热门书籍
						</div>
						<div class="col">
							⑤热门书籍
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 分别引入jQuery和Bootstrap的类框 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>

案例三：首页新书上架&热门书籍实现（画像Bootstrap）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例3：首页新书上架&热门书籍实现</title>
		<!-- 引入Bootstrap的样式-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style>
			.navbar-collapse{
				 flex-grow: 0;/* 固定容器中 1代表弹性过大占用父容器剩余空间  0代表不占用 */
			 }
			 .form-group{
				 width: 300px;/* 宽度 */
				 margin-left: auto;/* 左间距自适应 自动 */
				 margin-right: auto;/* 右间距自适应 自动 */
				 margin-top: 31px;/* 100-38=62/2=31px  居中*/
			 }
			 .ss{
				 height: 100px;/* 高度 */
				 margin-top: 30px;/* 上间距 */
				 background-color: #DCDCDC;/* 背景颜色 */
			 }
			 /* 画像*/
			 .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>
			</div>
		</nav>

		<!-- 栅格搭建主页框架 -->
		<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;">
					左三为书籍分类
				</div>
				<div class="col-9">
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					<!-- 右9中第一行 -->
					<div class="row" style="background-color: yellowgreen;">
						<div class="col">
							轮播图
						</div>
					</div>

					<!-- 右9中第二行 新书上架 5列-->
					<div class="row" style="background-color: moccasin;">
						<div class="col">
							<figure class="figure">
								<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>冷间谍</b></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"><b>第一商会</b></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"><b>狂人日记</b></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"><b>散文小说</b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>自动化运维</b></figcaption>
							</figure>
						</div>
					</div>

					<!-- 右9中第三行 热门书籍 5列-->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
							<figure class="figure">
								<img src="img/6.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>JAVA</b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/7.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>CAD2012</b></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"><b>时光走了你还在</b></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"><b>散文小说</b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>自动化运维</b></figcaption>
							</figure>
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 分别引入jQuery和Bootstrap的类框 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>

案例四：首页整合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例4：首页整合</title>
		<!-- 引入Bootstrap的样式-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style>
			.navbar-collapse{
				 flex-grow: 0;/* 固定容器中 1代表弹性过大占用父容器剩余空间  0代表不占用 */
			 }
			 .form-group{
				 width: 300px;/* 宽度 */
				 margin-left: auto;/* 左间距自适应 自动 */
				 margin-right: auto;/* 右间距自适应 自动 */
				 margin-top: 31px;/* 100-38=62/2=31px  居中*/
			 }
			 .ss{
				 height: 100px;/* 高度 */
				 margin-top: 30px;/* 上间距 */
				 background-color: #DCDCDC;/* 背景颜色 */
			 }
			 /* 画像*/
			 .figure{
				 text-align: center;/* 文字居中 */
				 margin-top: 20px;/* 上间距 */
			 }
			 .list-group,#carouselExampleIndicators{
				 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>
			</div>
		</nav>

		<!-- 栅格搭建主页框架 -->
		<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" >
					<!-- 左三为书籍分类 -->
					<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>
					</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中第二行 新书上架 5列-->
					<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>冷间谍</b></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"><b>第一商会</b></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"><b>狂人日记</b></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"><b>散文小说</b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>自动化运维</b></figcaption>
							</figure>
						</div>
					</div>
					
					<div class="xxx">
						热门书籍
					</div>
					<!-- 右9中第三行 热门书籍 5列-->
					<div class="row" >
						<div class="col">
							<figure class="figure">
								<img src="img/6.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>JAVA</b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/7.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>CAD2012</b></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"><b>时光走了你还在</b></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"><b>散文小说</b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>自动化运维</b></figcaption>
							</figure>
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 分别引入jQuery和Bootstrap的类框 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>

陨落.190
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap文件及bootstrap图标大全
05-05
内有bootstrap文件在resource里，版本3.3.7 demo文件里是html文件，里面有bootstrap的图标大全
【前端框架之Bootstrap02】布局与导航
03-02
我最近也使用了bootstrap来布局，来搞导航。但是效果很不理想，所以我这里先来系统的看看这两块，若是仍然一头雾水的话，那么。。。。我就再学习就完了。好了，废话结束，我们进入今天的学习吧。说道栅格系统，我们...
Bootstrap_02(实现轮播图&书籍分类&注册页面)
qq_65716482的博客
05-01 453
思维导图： 一、轮播图和书籍分类： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例4：首页整合</title> <!-- 引入Bootstrap的样式--> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <st.
Bootstrap03（图标）
weixin_67465673的博客
05-08 958
搜索书籍页面，购物车布局，订单信息，图标组件的使用
Bootstrap图标使用
superme5200000的博客
02-11 426
现在bootstrap上有最新版本v4.4.1，但是里面好像功能还没完全更新好，没有fonts文件。目前还使用不了bootstrap图标。可以使用bootstrap3.3.7版本。版本今年也刚更新了。 字体图标的使用需要引入fonts文件，并且和css根目录同步就好了。 使用图片直接引入类名就可以了。 bootstrap图标使用 ![在这里插入图片描述](https://img-blog.csdn...
bootstrap图标的使用
nncwww的博客
05-04 4195
在html里面使用bootstrap图标 首先进入bootstrap的官网va.bootcss.com 进入点击画圈的地方来到下面这一张图 点击安装根据步骤完成后得到一个安装包 解压到当前文件后倒入软件后就可以使用啦 使用前我们需要导包 将font包放入我们的项目中 导入到我们的项目中 <!-- 引入Bootstrap的样式--> <link rel="stylesheet" type="text/css" href="css/bootstra..
Bootstrap_02.pdf
03-26
### Bootstrap自学参考手册知识点概述 #### 一、组件 ##### 1、按钮组 **按钮组**是Bootstrap中用于创建一系列链接或按钮的一种布局方式。它允许开发者将多个按钮组合在一起，形成一个整体的视觉效果。按钮组可以...
02. Bootstrap 3 进阶教程.rar
09-13
这个“02. Bootstrap 3 进阶教程”旨在帮助开发者深入理解并熟练掌握Bootstrap 3的核心概念和高级用法。 在Bootstrap 3中，最重要的组成部分包括网格系统、组件、JavaScript插件以及定制选项。让我们逐一详细探讨...
BootStrap入门案例.zip
10-11
2. **02_BootStrap_栅格系统.html** - Bootstrap的栅格系统是其核心特性之一，它允许开发者创建响应式的布局。这个文件将演示如何使用行(row)和列(column)来组织内容，以及如何利用断点来适应不同尺寸的屏幕。 3. *...
前端 Bootstrap 代码
03-31
- **day02.zip**：在第一天的基础上，可能会介绍更复杂的组件，如导航条、按钮组、表单元素和警告消息，让开发者了解如何在实际项目中应用这些元素。 - **day03.zip**：第三天的教程可能涉及响应式设计的深入理解，...
bootstrap-languages, Bootstrap 3的语言标签和图标.zip
09-18
bootstrap-languages, Bootstrap 3的语言标签和图标 面向 Bootstrap 3项目的面向对象语言提供了一种简单的方法，可以将语言标签和名称显示在的Bootstrap 3 项目中。关于如何呈现语言以及如何使用这个库的一些提示，请参考文档页面。这个项目是根据软件许可协议distribut
Bootstrap学习笔记之环境配置(1)
09-01
0x02 基本模板 一个基本的Bootstrap模板通常包括以下部分： 1. `<!DOCTYPE html>`: 定义文档类型，确保浏览器以标准模式渲染页面。 2. `<html lang="zh-cn">`: 指定HTML文档的语言，这里是中文。 3. `<head>`: 包含...
Bootstrap 用户界面架构视频02
01-21
文件比较大分三个压缩包，Bootstrap 用户界面架构视频01
Bootstrap案例
06-03
最后，我们看到的文件名“jQuery_ui02.rar”和“jquery-ui01.rar”可能与jQuery UI有关，这是一个基于jQuery的库，提供了许多可交互的UI组件，虽然不是Bootstrap的一部分，但它可以与Bootstrap结合使用，以增强用户...
基于Bootstrap实现图片轮播效果
09-02
<img src="path/to/pic02.jpg" /> 联想校园大使 <!-- Controls --> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous ...
bootstrap图标应用
sleepwalker_1992的专栏
06-09 452
Bootstrap3字体图标组件
corn78的博客
05-05 595
如何使用 因为Bootstrap已经把许多图标放在css样式里，使用时就只需要引用所需要的图标对应的图标类就行了。所有的图标都需要一个glyphicon基类和对应每个图标的类。 不能和其他组件混合使用 一个图标使用一个单独的元素。 应该创建一个嵌套的<span> 标签，并将图标类应用到这个 <span> 标签上。 只对内容为空的元素起作用 图标类只能应用在不包含任何文本内容...
Bootstrap3 Font Awesome 字体图标的基本图标
歪脖先生的博客
06-05 1868
基本图标 Font Awesome图标跟Glyphicon图标的用法完全相同，所有图标都需要一个基类 .fa和对应每个图标的 .fa-*类。只需创建一个行内元素，并为它应用图标类，即可使用Font Awesome图标。如： <iclass="fa fa-camera-retro"></i> 效果如图 5‑1所示： 图5-1 基本图标 关于作者 ...
bootstrap的图标新手使用教程
滕青山博客
07-31 8410
首先确定自己的bootstrap版本，我的是bootstrap4.xx版本。粘贴到html文件中即可显示。
bootstrap datetimepicker 参数
最新发布
07-27
例如，disabledDates: ["2022-01-01", "2022-01-02"]。 5. useCurrent：设置是否在初始化时将当前日期作为默认值。默认为 true。 6. showTodayButton：是否显示 "Today" 按钮，用于快速选择当前日期。 7. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值