Bootstrap01

最新推荐文章于 2024-08-16 23:08:28 发布

永不服输的小码哥

最新推荐文章于 2024-08-16 23:08:28 发布

阅读量437

点赞数

分类专栏： Bootstrap框架文章标签： java

本文链接：https://blog.csdn.net/qq_62715593/article/details/123881243

版权

Bootstrap框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.前端开发框架

样式
<style type="text/css">
		.navbar-collapse{
			flex-grow: 0;/*在固定容器中 1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 */
		}
		.ss{
			background-color: #BDC1C4;/* 背景颜色 */
			height: 100px;/* 高度 */
			margin-top: 20px;/* 上间距  */
		}
		.form-group{
			width: 300px;/* 宽度 */
			margin-top: 31px;/* 上间距 
			margin-left: auto; /* 左间距 自适应 */
			margin-right: auto;/* 右间距 */
		}
		
	</style>

核心代码及其思路

<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><!--a class="nav-link disabled"      disabled 禁用 -->
			     </li>
			   </ul>
			 </div>
			 
		 </div>
		 
		</nav>
		<!-- 思路：
			第一行：搜索区域
			第二行：
					左3  书书籍分类
					右9  
						上为轮播图
						下位新书上架以及热门书籍
			第三行：
		 -->
		<div class="container">
			<!-- 第一行 -->
		  <div class="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</button>
						  </div>
						</div>
				   </div>
				 </form>
		    </div>
		  </div>
		  
		  
		  <!-- 第二行 -->
		  <div class="row">
		    <div class="col-3"style="background-color: blueviolet;">
		     书籍分类
		    </div>
			<div class="col-9">
				
			   <div class="row" style="background-color: yellow;">
			     <div class="col">
			       上轮播图
			     </div>
			   </div>
			   
			 
			 <div class="row" style="background-color: hotpink;">
			   <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>

效果截图

永不服输的小码哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap01

1.前端开发框架样式<style type="text/css"> .navbar-collapse{ flex-grow: 0;/*在固定容器中 1代表弹性扩大占用父容器剩余空间设置为0表示不占用 */ } .ss{ background-color: #BDC1C4;/* 背景颜色 */ height: 100px;/* 高度 */ margin-top: 20px;/* 上间距 */ } .form-group{ width:
复制链接

扫一扫

专栏目录