进度条
-
实际上所谓的进度条本质上就属于一个层的填充过程,
-
观察进度条
<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" >×</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" >×</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" >×</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为不自动显示
})
})
- 使用模态窗口,可以让一个页面具备更加丰富的界面处理能力,使用的几率很高