整理关于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的设计模式
Nov 22 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
python抓取网页内容示例分享
2014/02/24 Python
python随机生成指定长度密码的方法
2015/04/04 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
Python连接Redis的基本配置方法
2018/09/13 Python
详解Python3 pandas.merge用法
2019/09/05 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python 实现线程之间的通信示例
2020/02/14 Python
python实现FTP循环上传文件
2020/03/20 Python
python定义具名元组实例操作
2021/02/28 Python
人力资源部经理岗位职责规定
2014/02/23 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
六查六看六改心得体会
2014/10/14 职场文书
新员工考核评语
2014/12/31 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
一年级语文教学随笔
2015/08/14 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
人民币符号
2022/02/17 杂记
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers