adminLTE 教程 -7 进度条

其实进度条需要注意的几点：

1、横竖 style="width: 40%" or  style="height: 40%"

2、样式：progress-bar-success

3、宽度：progress-sm

4、动态效果：active

<div class="box box-solid">
	<div class="box-header with-border">
			<h3 class="box-title">Progress Bars Different Sizes</h3>
	</div>
	<!-- /.box-header -->
	<div class="box-body text-center">
			<p><code>.progress</code></p>

			<div class="progress">
					<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
							<span class="sr-only">40% Complete (success)</span>
					</div>
			</div>
			<p>Class: <code>.sm</code></p>

			<div class="progress progress-sm active">
					<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
							<span class="sr-only">20% Complete</span>
					</div>
			</div>
			<p>Class: <code>.xs</code></p>

			<div class="progress progress-xs">
					<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
							<span class="sr-only">60% Complete (warning)</span>
					</div>
			</div>
			<p>Class: <code>.xxs</code></p>

			<div class="progress vertical progress-xxs">
					<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
							<span class="sr-only">60% Complete (warning)</span>
					</div>
			</div>
			<div class="progress vertical active">
					<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
							<span class="sr-only">40%</span>
					</div>
			</div>
			<div class="progress vertical progress-sm">
					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%">
							<span class="sr-only">100%</span>
					</div>
			</div>
			<div class="progress vertical progress-xs">
					<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
							<span class="sr-only">60%</span>
					</div>
			</div>
			<div class="progress vertical progress-xxs">
					<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
							<span class="sr-only">60%</span>
					</div>
			</div>
	</div>
	<!-- /.box-body -->
</div>
时间： 2024-08-04 03:27:31

adminLTE 教程 -7 进度条的相关文章

Xamarin iOS教程之进度条和滚动视图

Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.QQ音乐播放器中也使用到了进度条,它可以让用户看到当前音乐播放了多少,还剩多少等.在Xamarin.iOS中也提供实现进度条的类,即UIProgressView. [示例2-23]以下将实现进度条加载的效果.具体步骤如下: (1)创建一个Single View Application类型的工程,命名为

Android基础入门教程——2.3.7 ProgressBar(进度条)

Android基础入门教程--2.3.7 ProgressBar(进度条) 标签(空格分隔): Android基础入门教程 本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用到进度条:或者当在进行一些比较 耗时的操作,需要等待一段较长的时间,这个时候如果没有提示,用户可能会以为程序Carsh或者手机死机 了,这样会大大降低用户体验,所以在需要进行耗

图解CSS3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: .circleprogress{        width: 160px;        height: 160px;        border:20px solid red;        border-radius: 50

Android简易实战教程--第十七话《自定义彩色环形进度条》

转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/52203533   点击打开链接 在Android初级教程里面,介绍了shape用法的理论知识,再来完成这个小案例将会变得非常简单哦.(欢迎学习阅读):http://blog.csdn.net/qq_32059827/article/details/52203347 点击打开链接 这一篇就针对这个知识点,完成一个自定义的彩色进度条.系统自带的环形进度条是黑白相间的,如果你不是色盲,

BootStrap入门教程 (三) ：可重用组件（按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项）

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

Html5基于SVG的扁平风格圆形进度条javascript插件教程

一.使用方法 使用该圆形进度条需要引入circleDonutChart.js文件. <script type="text/javascript" src="circleDonutChart.js"></script> 二.Html结构 你可以使用一个空的<div>元素来制作圆形进度条. <div id="example1"></div> 三.初始化插件 要制作圆形进度条,可以使用下面的方

Html5添加SVG的轻量级jQuery进度条插件教程

一.使用方法 使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件. <script src="js/jquery.min.js"></script> <script src="js/jquery.progress.js"></script> 二.Html结构 该jQuery进度条的HTML结构使用一个<svg>元素来制作. <svg id="conta

Android简易实战教程--第二话《两种进度条》

点击按钮模拟进度条下载进度,"下载"完成进度条消失. 代码如下: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_

Android简易实战教程--第二十二话《简单的水平进度条》

本打算写一篇自定义水平进度条,但是出于过度和文章的完整性,今天先来一篇简单的进度条. 需求:按钮点击,实现水平进度条加载进度.而且,进度条设置两个进度(到下边的例子里就能知道什么是"第二进度条"了) 配置文件代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re