bootstrap高级组件

其他 2019-01-30 15:00:52 阅读次数: 0

进度条

  • 实际上所谓的进度条本质上就属于一个层的填充过程,

  • 观察进度条

	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="progress">
					<div class="progress-bar" style="width:30%">完成30%</div>
				</div>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 为了能够有动态的进度条效果
<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">

	<script type="text/javascript">
		var current = 0;
		$(function(){
		
				setPro();
			
		})
		function setPro(){
			console.log("*********"+current);
			$("#pro").attr("style","width:"+current+"%");
			$("#proCurrent").text("完成:"+current+"%");
			if(current<100){
				window.setTimeout(setPro,300);
				current++;
			}
		}
	</script>
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="progress">
					<div id="pro" class="progress-bar" ><span id="proCurrent"></span></div>
				</div>
			</div>
		</div>	
	<div>
</body>
</html>

在这里插入图片描述

  • 在bootstrap中针对于进度条也是有颜色处理

    • .progress-bar-striped:带纹理进度条
    • progress-bar-success:成功绿
    • progress-bar-info:信息蓝
    • progress-bar-warning 警告黄
    • progress-bar-danger 危险红

  • 示例:当进度条读取完成之后,变为绿色

<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">

	<script type="text/javascript">
		var current = 0;
		$(function(){
		
				setPro();
			
		})
		function setPro(){
			console.log("*********"+current);
			$("#pro").attr("style","width:"+current+"%");
			$("#pro").attr("class","progress-bar progress-bar-striped");
			$("#proCurrent").text(current+"%");
			if(current<100){
				window.setTimeout(setPro,300);
				current++;
			}else{
				$("#pro").attr("class","progress-bar progress-bar-success")
			}
			
		}
	</script>
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="progress">
					<div id="pro" class="progress-bar" ><span id="proCurrent"></span></div>
				</div>
			</div>
		</div>	
	<div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

  • 设置动画效果
<div class="progress">
	<div id="pro" class="progress-bar progress-bar-striped active" style="width:80%"><span id="proCurrent">80%</span></div>
</div>

在这里插入图片描述

面板

  • 定义面板所需要使用到的样式
样式名称 描述
.panel 定义基本的面板,面板中的内容的父元素应该使用此类元素
.panel-primary 定义带有情景的面板,类似的还有.panel-success等等主题的
panel-heading 描述面板头部的信息
panel-title 定义在panel-heading中之下的子元素,描述面板的标题
panel-body 描述面板的主体内容
panel-group 描述面板中一组内容
list-group-item 描述一组内容中的一项内容

面板可以方便的进行内容的划分

示例:面板使用

在层中使用panel类型的样式表示面板

<div class="container">
	<div class="row">
		<div class="col-md-12 ">
			<!-- 面板主层-->
			<div class="panel panel-primary">
				<!-- 面板头部-->
				<div class="panel-heading">
					<span class="panel-title">新闻组</span>
				</div>
				<div class="panel-body">
					<p>实时新闻,24小时新闻热点</p>
				</div>
				<div class="panel-group">
					<a class="list-group-item">党十八大大会</a>
					<a class="list-group-item">福建新闻</a>
					<a class="list-group-item">北京信息新闻</a>
					<a class="list-group-item">北京大学新闻</a>
					<a class="list-group-item">民生新闻</a>
				</div>
			<div>
		</div>
	</div>	
<div>
  • 效果

在这里插入图片描述

  • 对于面板里面也可以进行嵌套显示

在面板中嵌套表格

	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<!-- 面板主层-->
				<div class="panel panel-primary">
					<!-- 面板头部-->
					<div class="panel-heading">
						<span class="panel-title">新闻组</span>
					</div>
					<div class="panel-body">
						<table class="table table-hover table-striped table-bordered">
							<tr class="success">
								<td >标题</td>
								<td>摘要</td>
							</tr>
							<tr>
								<td>福州新闻</td>
								<td>2019年1月21日 09:52:21</td>
							</tr>
							<tr>
								<td>北京新闻</td>
								<td>2019年1月21日 09:52:32</td>
							</tr>
							<tr>
								<td>北京大学新闻</td>
								<td>2019年1月21日 09:57:15</td>
							</tr>
						</table>
					</div>
					
				<div>
			</div>
		</div>	
	<div>

在这里插入图片描述

  • 通过面板布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-6 ">
				<!-- 面板主层-->
				<div class="panel panel-primary">
					<!-- 面板头部-->
					<div class="panel-heading">
						<span class="panel-title">新闻组</span>
					</div>
					<div class="panel-body">
						<table class="table table-hover table-striped table-bordered">
							<tr class="success">
								<td >标题</td>
								<td>摘要</td>
							</tr>
							<tr>
								<td>福州新闻</td>
								<td>2019年1月21日 09:52:21</td>
							</tr>
							<tr>
								<td>北京新闻</td>
								<td>2019年1月21日 09:52:32</td>
							</tr>
							<tr>
								<td>北京大学新闻</td>
								<td>2019年1月21日 09:57:15</td>
							</tr>
						</table>
					</div>
					
				</div>
			</div>
			<div class="col-md-6 ">
				<!-- 面板主层-->
				<div class="panel panel-primary">
					<!-- 面板头部-->
					<div class="panel-heading">
						<span class="panel-title">外媒组</span>
					</div>
					<div class="panel-body">
						<table class="table table-hover table-striped table-bordered">
							<tr class="success">
								<td >标题</td>
								<td>摘要</td>
							</tr>
							<tr>
								<td>xxx</td>
								<td>2019年1月21日 09:52:21</td>
							</tr>
							<tr>
								<td>xxxx</td>
								<td>2019年1月21日 09:52:32</td>
							</tr>
							<tr>
								<td>xxx</td>
								<td>2019年1月21日 09:57:15</td>
							</tr>
						</table>
					</div>
					
				</div>
			</div>
		</div>	
	<div>
</body>
</html>

在这里插入图片描述

警告框

所谓的警告框指的就是一个信息提示框,那么如果要想定义警告框使用"alert"样式,这个样式只是提供一个结构,而里面具体的显示颜色有如下几种
alert 定义警告框,警告框基础样式,必填
alert-success 成功绿
alert-info 信息蓝
alert-warning 警告黄
alert-danger 危险红
data-dismiss=“alert” 定义在警告框之中的按钮的样式,可以实现关闭警告框

实现警告框

	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="alert alert-danger">
					<button class="close" data-dismiss="alert" >&times;</button>
					<span>将要下载未知文件</span>
				</div>
			</div>
		</div>	
	</div>

在这里插入图片描述

知识从此处来看警告框的处理并不麻烦

关闭警告框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
	<script type="text/javascript">
		$(function(){
			$("#closeBtn").on("click",function(){
				$(".alert").alert("close");
			});
		})
	</script>
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<div class="alert alert-danger">
					<button class="close" data-dismiss="alert" >&times;</button>
					<span>将要下载未知文件</span>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<button id="closeBtn" class="btn btn-danger">关闭警告框</button>
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

这个时候的alert()函数主要是为了警告框准备的,但是这个警告框只是提供关闭处理,
在一个页面里面,假设是一个一部无刷新数据更新页面,那么有可能在用户每次请求完成之后,都需要有一个框来进行提示,所以在这样的情况下,提示框可能会短暂显示,而后经过一段时间后进行关闭,那么如果要借助于警告框的控制,需要自己来进行警告框的控制

控制警告框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
	<script type="text/javascript">
		$(function(){
			//将警告框隐藏,而不是关闭
			$("#closeBtn").on("click",function(){
				$("#alertDiv").fadeOut(500);
			});
			$("#openBtn").on("click",function(){
				$("#alertDiv").fadeIn(500);
			})
			$("#autoBtn").on("click",function(){
				var flag=true;
				if(flag){
					$("#alertDiv").attr("class","alert alert-success");
					$("#alertDiv").fadeIn(1000,function(){
						$(this).fadeOut(1000);
					});
				}else{
						$("#alertDiv").attr("class","alert alert-danger");
						$("#alertDiv").fadeIn(1000,function(){
						
						$(this).fadeOut(1000);
					});
				}
				
			})
		})
	</script>
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-12 " style="height:300px">
				<div class="alert alert-danger" id="alertDiv">
					<button class="close" data-dismiss="alert" >&times;</button>
					<span>将要下载未知文件</span>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<button id="closeBtn" class="btn btn-danger">关闭警告框</button>
				<button id="openBtn" class="btn btn-success">打开警告框</button>
				<button id="autoBtn" class="btn btn-info">自动显示警告框</button>
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

警告框本身的样式非常好用,但是自身的控制不多,因为默认情况下对于警告框智会提供的只有有关闭控制

图片轮播

在很多的站点上都会存在有图片的切换显示

图片轮播基本实现

样式名称 描述
carousel 轮播基本样式
solid 轮播方式,滑动轮播
carousel-indicators 定义轮播小按钮
carousel-inner 定义一组图片位置
item 放置每个轮播图片具体位置
carousel-caption 每个图片的文字说明部分
carousel-control 轮播控制按钮样式,配合data-slide属性使用,如果属性值为prev,表示上一个,next表示下一个 
<div id="gdCarousel" class="carousel slide">
					<!-- 轮播小圆点按钮-->
					<ol class="carousel-indicators">
						<li data-target="#gdCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#gdCarousel" data-slide-to="1"></li>
						<li data-target="#gdCarousel" data-slide-to="2"></li>
						<li data-target="#gdCarousel" data-slide-to="3"></li>
						<li data-target="#gdCarousel" data-slide-to="4"></li>
					</ol>
					
					<!-- 轮播图片区-->
					<div class="carousel-inner">
						<div class="item active">
							<img src="img/gd.jpg">
						</div>
						<div class="item">
							<img src="img/a.jpg">
						</div>
						<div class="item">
							<img src="img/b.jpg">
						</div>
						<div class="item">
							<img src="img/c.jpg">
						</div>
						<div class="item">
							<img src="img/d.jpg">
						</div>
					</div>
					
					<!-- 轮播导航切换按钮-->
					<a class="left carousel-control" href="#gdCarousel" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					
					<!-- 轮播导航切换按钮-->
					<a class="right carousel-control" href="#gdCarousel" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">next</span>
					</a>
				</div>

在这里插入图片描述

在进行轮播的同时可能会增加一些文字信息,在轮播图片的元素下增加class为carousel-caption样式的层

<div class="item">
	<div class="carousel-caption">鬼刀--漫画</div>
	<img src="img/d.jpg">
</div>

在这里插入图片描述

对于轮播也可以进行一些控制

使用js对轮播图片自动滚动

$(function(){
	$("#gdCarousel").carousel({
		interval:100,//控制轮播图片的速度
		cycle:true//控制是否循环轮播
	});
})

所有轮播组件都必须使用单独函数进行也买呢加载的配置处理

设置轮播图片开始位置

$("#gdCarousel").carousel(3);

模态窗口

对于模态窗口是一组联合复杂样式,而且样式使用的也是非常多的,并且模态窗口也是需要通过按钮触发的.

模态窗口要使用到的样式
modal 表明一个模态窗口层
modal-dialog 模态窗口层下的一个窗口
modal-content 表明模态窗口的内容区域
modal-header 表明模态窗口的头部信息
modal-title 定义模态窗口的标题部分
modal-body 定义模态窗口的主体部分
modal-footer 定义模态窗口底部部分

模态窗口要使用的属性
data-toggle=“modal” 定义在控制模态窗口的按钮上
data-target="#memberEdit" 定义在控制模态窗口的按钮上,id值为具体的模态窗口层
data-dismiss=“modal” 定义在关闭模态窗口的按钮上,用来关闭模态窗口

实现基础的模态窗口

模态窗口本质上就是一个单独的层


<html lang="zh-CN">
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<button class="btn btn-primary" data-toggle="modal" data-target="#memberEdit">打开模态窗口的按钮</button>
				
				<!-- 模态窗口-->
				<div class="modal fade" id="memberEdit">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
								<span class="h1 modal-title">用户编辑</span>
							</div>
							<div class="modal-body">
					<form class="form-horizontal" method="post" action="#">
					<!-- 表单区域-->
					<fieldset>
						<!--表单主题-->
						<legend>用户注册</legend>
						<!-- 每一个form-group都可以自定义布局-->
						<div class="form-group">
							<!-- label表示文字提示标签,可以通过表单的组建的id提示-->
							<label class="col-md-2 control-label" for="mid">用户名称</label>
							<div class="col-md-4">
								<input class="form-control" id="mid" type="text"/>
							</div>
						</div>
						
						<div class="form-group">
							<!-- label表示文字提示标签,可以通过表单的组建的id提示-->
							<label class="col-md-2 control-label" for="password">用户密码</label>
							<div class="col-md-4">
								<input class="form-control" id="password" type="password"/>
							</div>
						</div>
					</fieldset>
				</form>
							</div>
							<div class="modal-footer">
								<button class="btn btn-default" data-dismiss="modal">关闭</button>
								<button class="btn btn-success" id="memberEditBtn">提交</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

如果要使用esc按钮控制模态窗口关闭需要在模态窗口层中添加一下的属性内容

<div class="modal fade" id="memberEdit" aria-hiden="true" aria-labelledby="modalTitle" tabindex="-1">

在模态窗口中也提供有一些处理的函数,可以利用函数进行一些相关的控制

$(function(){
	$("#memberEdit").modal({
		show:true//定义模态窗口自动显示,如果是false为不自动显示
	})
})
  • 使用模态窗口,可以让一个页面具备更加丰富的界面处理能力,使用的几率很高

猜你喜欢

转载自blog.csdn.net/qq_43386754/article/details/86568079
今日推荐
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
Spring Boot 3.0：未来企业应用开发的基石
Java 的 AI 前景光明
国内首个智能体生态大会！2024百度万象大会定档5月30日
开源一周年，青语言新版发布
深入浅出：大型语言模型（LLM）的全面解读
顶会ICLR2024论文Time-LLM：基于大语言模型的时间序列预测
周排行
学习笔记(01):Python入门教程-计算机如何区分数字和字符
命令行提示符_颜色
五步轻松搞定Linux下的文件同步(备份)
Visio 2010，如何打开多个窗口
西安新起点|MBA考研十大热门城市
BiSeNet: Bilateral Segmentation Network for Real-time Semantic Segmentation
【蓝桥杯】ADV-73 数组输出
[DeeplearningAI笔记]卷积神经网络4.11一维和三维卷积
Java 逻辑运算符
Python爬虫入门——2. 5 利用正则表达式爬取豆瓣电影 Top 250
每日归档
更多
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)
2024-05-23(9)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022