整理关于Bootstrap警示框的慕课笔记


Posted in Javascript onMarch 29, 2017

整理自慕课笔记

在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示:

整理关于Bootstrap警示框的慕课笔记

在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框。

默认警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下,提供了四种不同的警示框效果:
1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;
2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;
3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;
4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。

如下图示:

整理关于Bootstrap警示框的慕课笔记

具体使用的时候,可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框,只需要在“alert”基础上追加对应的类名,如下:

<div class="alert alert-success" role="alert">恭喜您操作成功!</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>

可关闭的警示框

大家在平时浏览网页的时候,会发现一些警示框带有关闭按钮,用户一点击关闭按钮就能自动关闭显示的警示框(也就是让警示框隐藏不显示)。在Bootstrap框架中的警示框也具有这样的功能。
使用方法:

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤:
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class=”close”类,实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss=”alert””(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。
具体使用如下:

<div class="alert alert-success alert-dismissable" role="alert">
 <button class="close" type="button" data-dismiss="alert">×</button>
 恭喜您操作成功!
</div>

整理关于Bootstrap警示框的慕课笔记

警示框的链接

有时候你可能想在警示框中加入链接地址,用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理,并且颜色相应加深。

实现方法:

Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。
具体使用如下:

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> 
  You successfully read 
  <a href="#" class="alert-link">this important alert message</a>
  .
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong>
   This 
   <a href="#" class="alert-link">alert needs your attention</a>
   , but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong>
   Better check yourself, you're 
   <a href="#" class="alert-link">not looking too good</a>
   .
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong>
  <a href="#" class="alert-link">Change a few things up</a>
   and try submitting again.
</div>

整理关于Bootstrap警示框的慕课笔记

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
js 求时间差的实现代码
Apr 26 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 #Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
整理关于Bootstrap导航的慕课笔记
Mar 29 #Javascript
javascript 中Cookie读、写与删除操作
Mar 29 #Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 #Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 #Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 #Javascript
You might like
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JavaScript手机振动API
2016/06/11 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python静态方法实例
2015/01/14 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
如何利用python 读取配置文件
2021/01/06 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
Python 图片处理库exifread详解
2021/02/25 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
优秀经理事迹材料
2014/02/01 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
个人年终总结开头
2015/03/06 职场文书
高二化学教学反思
2016/02/22 职场文书
Python基础之元类详解
2021/04/29 Python
javascript对象3个属性特征
2021/11/17 Javascript
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
pycharm无法安装cv2模块问题
2022/05/20 Python