使用Bootstrap搭界面案例

案例一:实现搜索书籍页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例一:实现搜索书籍页面</title>
		<!-- 引入Bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,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,.media{
				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;/* 内左间距 */
			}
			.media-body p{
				line-height: 10px;
				letter-spacing: 2px;
			}
			.media-body p button{
				height: 30px;
				line-height: 10px;
			}
		</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">
					  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
					    书籍分类
					  </a>
					  <a href="#" class="list-group-item list-group-item-action">悬疑</a>
					  <a href="#" class="list-group-item list-group-item-action">历史文学</a>
					  <a href="#" class="list-group-item list-group-item-action">科幻</a>
					  <a href="#" class="list-group-item list-group-item-action">言情</a>
					  <a href="#" class="list-group-item list-group-item-action">青春读物</a>
					  <a href="#" class="list-group-item list-group-item-action">都市</a>
					  <a href="#" class="list-group-item list-group-item-action">教育</a>
					  <a href="#" class="list-group-item list-group-item-action">儿童绘本</a>
					  <a href="#" class="list-group-item list-group-item-action">二次元</a>
					  <a href="#" class="list-group-item list-group-item-action">武侠</a>
					  <a href="#" class="list-group-item list-group-item-action">军事</a>
					</div>
					
				</div>
 
				<div class="col-9">
					<div class="media">
					  <img src="img/1.png"width="100px" class="mr-3" alt="...">
					  <div class="media-body">
					    <h5 class="mt-0">冷间谍</h5>
						<p>价格:9.9元</p>
						<p>作者:阿巴</p>
						<p>出版社:浪琴湾出版社</p>
					    <p>简介:红红火火恍恍惚惚</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">立即购买</button>
						</p>
					  </div>
					</div>
					<hr />
				<div class="col-9">
					<div class="media">
					<img src="img/1.png"width="100px" class="mr-3" alt="...">
					<div class="media-body">
						<h5 class="mt-0">冷间谍</h5>
						<p>价格:9.9元</p>
						<p>作者:阿巴</p>
						<p>出版社:浪琴湾出版社</p>
						<p>简介:红红火火恍恍惚惚</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">立即购买</button>
						</p>
					</div>
					</div>
					<hr />
					<div class="col-9">
						<div class="media">
						<img src="img/1.png"width="100px" class="mr-3" alt="...">
						<div class="media-body">
							<h5 class="mt-0">冷间谍</h5>
							<p>价格:9.9元</p>
							<p>作者:阿巴</p>
							<p>出版社:浪琴湾出版社</p>
							<p>简介:红红火火恍恍惚惚</p>
							<p>
								<button class="btn btn-danger">加入购物车</button>
								<button class="btn btn-danger">立即购买</button>
							</p>
						</div>
						</div>
						<hr />
					
					
					
					
					
					
					
				</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>案例2:实现购物车页面布局</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;/* 右边距自适应 自动 */
			}
			.list-group{
				margin-top: 30px;/* 上间距 */
			}
			.table{
				margin-top: 30px;/* 上间距 */
			}
			.table thead{
				color: white;/* 字体颜色 */
			}
			.table tr{
				text-align: center;/* 水平居中 */
			}
			.table tr input{
				text-align: center;/* 水平居中 */
			}
			.yy{
				text-align: center;/* 水平居中 */
			}
			.yy button{
				height: 30px;
				line-height: 10px;
			}
		</style>
	</head>
	<body>
		
		<!-- 模态框的html代码 -->
		<!-- Modal -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLabel">核对订单</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        后期放订单详细
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary">确定</button>
				 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 导航条组件 -->
		<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" >
					
					<table class="table">
					  <thead>
					    <tr class="bg-primary">
					      <th scope="col" >书名</th>
					      <th scope="col">单价</th>
					      <th scope="col">数量</th>
					      <th scope="col">小计</th>
						  <th scope="col">操作</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <th scope="row">冷间谍</th>
					      <td>18</td>
					      <td><input type="text" value="2"/></td>
					      <td>36</td>
						   <td><input type="button" value="删除" /></td>
					    </tr>
					   <tr>
					     <th scope="row">冷间谍</th>
					     <td>18</td>
					     <td><input type="text" value="2"/></td>
					     <td>36</td>
					      <td><input type="button" value="删除" /></td>
					   </tr>
					  </tbody>
					</table>
					<p class="yy">
					<button type="button" class="btn btn-outline-primary">清空购物车</button>
					<button type="button" class="btn btn-outline-primary">继续购物</button>
					<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal">点我结算</button>
					</p>
				</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>

效果图:

 效果2:该效果为点击后的核对效果

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值