专栏首页一“技”之长Bootstrap响应式前端框架笔记十三——警告框与进度条

Bootstrap响应式前端框架笔记十三——警告框与进度条

Bootstrap响应式前端框架笔记十三——警告框与进度条

    在Bootstrap中,使用alert相关类可以实现简洁的警告框控件,示例如下:

		<p>alert相关类可以实现简洁的警告框样式</p>
		<div class="alert alert-success">成功风格的警告框</div>
		<div class="alert alert-info">详情风格的警告框</div>
		<div class="alert alert-warning">警告风格的警告框</div>
		<div class="alert alert-danger">危险风格的警告框</div>

效果如下图所示:

警告框上面也可以添加有一个关闭按钮,示例如下:

		<p>带关闭按钮的警告框</p>
		<div class="alert alert-warning alert-dismissible">可关闭的警告框
		<button type="button" class="close">
			<span aria-hidden="true">&times;</span>
		</button>
		</div>

效果如下:

警告框中也可以添加跳转链接,示例如下:

		<p>带链接的警告框</p>
		<div class="alert alert-danger">
			您输入的用户名或密码有误
			<a class="alert-link" href="#">找回密码</a>
		</div>

效果如下图所示:

    关于进度条组件,Bootstrap中使用progress类来创建,示例如下:

		<p>默认的进度条组件</p>
		<div class="progress">
			<div class="progress-bar" style="width: 60%;">
			</div>
		</div>

效果如下:

进度条组件也支持多种样式,示例如下:

		<p>各种风格的进度条组件</p>
		<div class="progress">
			<div class="progress-bar progress-bar-danger" style="width: 60%;">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-info" style="width: 60%;">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-success" style="width: 60%;">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-success" style="width: 60%;">
				60%
			</div>
		</div>

效果如下图:

进度条也支持条纹模式,使用progress-bar-striped类可以创建条纹进度条,添加active类可以展现条纹动画,示例如下:

		<p>带条纹的进度条</p>
		<div class="progress">
			<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%;">
				60%
			</div>
		</div>

效果如下图:

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/alertAndProgress.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bootstrap响应式前端框架笔记十五——面板与井

        Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例...

    珲少
  • Bootstrap响应式前端框架笔记十二——巨幕与缩略图

        巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下:

    珲少
  • Bootstrap响应式前端框架笔记十四——媒体对象与列表组

        在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

    珲少
  • bootstrap 警告框

    <div class="container"> <div class="alert alert-success"> <p>显示了警告框</p> </div...

    用户5760343
  • 【前端】CSS : float

    注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

    Gavin-ZYX
  • Javascript(2)-js进阶

    备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

    意气相许的许
  • 浮动之后的那些事儿 - 清浮动操作

    本文内容概要: 1 上周作业讲解 2 浮动之后的特性 3 如何清浮动 4 实例操作 上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签...

    HTML5学堂
  • vue.js 初体验:Chrome 插件开发实录

    通过一个Chrome插件的开发,来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中,开发一些小工具可以大大的提高我们的工...

    陈纬杰
  • bootstrap 网站样式 常用

    用户5760343
  • 【JavaScript 理论知识】VUE.JS之初体验:Animate.css封装!

    对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用。 image.png 前言...

    Levi.Ackermann

扫码关注云+社区

领取腾讯云代金券