使用Bootstrap搭界面案例

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

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

<!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：该效果为点击后的核对效果

 

大大怪僵軍
关注
专栏目录
使用Bootstrap搭界面案例以及图标的运用
m0_62839141的博客
04-03 2438
准备工作: 先在<head>(头部)里<!-- 引入Bootatrap的CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 在body里面的最后面引入JQuery的类库和Bootstarap的类库(是为了加快的页面加载的速度) [注：在引入Bootstrap的类库之前必须引入JQuery库] <!-- 引入JQuery的类库 --> <s...
Bootstrap03
m0_61561140的博客
04-03 268
目录 案例一:实现搜索书籍页面 案例二：实现购物车页面布局 案例三：完整整合 案例一:实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例一:实现搜索书籍页面</title> <!-- 引入Bootstrap的CSS --> <link rel="stylesheet" type="text
Bootstrap网格系统的一个简单实例
最新发布
naozibuok的博客
08-05 1041
Bootstrap 的栅格系统（Grid System）是其核心特性之一，旨在帮助开发者创建灵活、响应式的布局。该系统基于一行（row）包含 12 个等宽的栅格（column）的概念，允许开发者根据需要将这些栅格分配给不同的列，以便在各种设备和屏幕尺寸上实现一致的布局。Bootstrap 的栅格系统是基于 12 栅格的，因此列宽度的总和应该为 12。: 表示这个列占据了 12 栅格系统中的 4 个栅格，那么一个<div class="card">占据4 个栅格，所以每个。3. 列（Column）
使用Bootstrap制作网页主界面、增加界面
yifei_345678的博客
05-03 2275
使用Bootstrap排出好看的界面👌
bootstrap布局实例
weixin_33795833的博客
01-15 2613
1.路径导航 <!doctype html><html><head><meta charset="utf-8"><title>路径导航</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script typ...
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
热门推荐
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
前端笔记day05
qq_43403974的博客
09-09 138
仿Bootstrap页面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Bootstrap中文网</title> <meta name="viewport" content="width=de...
bootstrap案例
qq_43537987的博客
05-26 1514
效果展示： 总体代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor...
Bootstrap完整案例
12-04
这个"Bootstrap完整案例"压缩包提供了一系列资源，帮助开发者深入理解和应用Bootstrap。以下是对这些资源的详细解析： 首先，"Bootstrap示例----树形菜单"部分，这通常涉及到使用Bootstrap的导航组件来创建可折叠的...
《jQuery+BootstrapWeb开发案例教程（在线实训版）》案例源码.zip
06-29
《jQuery+Bootstrap Web开发案例教程（在线实训版）》是一本深入浅出的教程，旨在帮助读者掌握使用jQuery和Bootstrap进行高效Web开发的技能。jQuery是JavaScript库中的翘楚，它简化了DOM操作、事件处理、动画效果...
bootstrap 后台管理案例
02-27
后台页面案例 登录 注册 邮件 数据统计 列表 样式简介大方
Bootstrap实例工程
01-26
本工程为Bootstrap实例，实例详解请访问博主博客：http://blog.csdn.net/u013142781
bootstrap实例
01-11
bootstrap，自动适应屏幕大小，再移动开发和网页开发中经常用到！
基于bootstrap的简洁登录界面Html
03-28
基于bootstrap的简洁登录界面，可以直接下载使用~内置css+js
bootstrap漂亮的系统后台界面+bootstrap实用插件
03-18
非常漂亮的bootstrap写的后台框架！ 及各种bootstrap里常用的插件！
bootstrap 免费登陆页面、登陆表单（共三款）
11-09
bootstrap-login-forms.zip bootstrap-login-forms.zip bootstrap 免费登陆页面、登陆表单（共三款）
基于javaweb 的bootstrap table使用案例源码下载
02-10
本案例提供了使用Bootstrap Table与Ajax进行交互的详细示例，旨在帮助开发者更好地理解和应用这一技术。 首先，Bootstrap Table是Twitter Bootstrap库的一个扩展，用于创建响应式、可操作的数据表格。它的主要优点...
Bootstrap部分案例
m0_61148761的博客
04-03 2809
主要用于组件：媒体对象-Media object代码如下效果如下主要用于页面内容：表格-Table代码如下效果如下主要用于组件：模态框-Modal代码如下效果如下：（点击结算弹出）扩展内容-图标代码如下效果如下折叠 滚动监听 下拉菜单 分页导航-面包屑导航 等等（需要留下印象）页面中引入库 ① bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
五、Bootstrap之菜单栏和导航栏
Itcodewizard的博客
05-14 2252
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值