Bootstrap中alerts的用法

警告alerts的使用:用于提示用户相关信息。

 基本的显示方式有四种分别对应的是:(信息)alert-info 、(成功)alert-success、(危险)alert-danger、(警告)alert-warning.示例代码:

<div class="alert alert-info">文字的信息提示</div>

<div class="alert alert-success">成功的信息提示</div>

<div class="alert alert-danger">危险的信息提示</div>

<div class="alert alert-warning">警告的信息提示</div>

效果图如下:

  在写alert这个样式的时候我们在智能提示上还能看到:alert-dismissable、alert-dismissiable、alert-link这几个样式有什么效果呢,继续往下看:

<div class="alert alert-info alert-dismissable">

信息的提示

<button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

</div>
<div class="alert alert-danger alert-dismissible">

危险的提示

<button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

</div>
<div class="alert alert-success">

<a href="#" class="alert-link">成功的提示</a>

<button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

</div>

效果图如下:

通过代码和显示的效果我们可以看到alert-dismissable、alert-dismissiable、结合按钮的 class="close" data-dismiss="alert" 可以实现关闭的提示的效果

而alert-link的效果是给提示的文字加一个连接,光标放上去和点击后才显示下划线。另aria-hidden="true"是为了方便屏幕阅读器比如一些残疾人士。&times;是关闭的一个图标。

 

时间: 2024-11-05 16:11:37

Bootstrap中alerts的用法的相关文章

Bootstrap中的datetimepicker用法,只看一眼就全懂了

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: 1 2 <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css"> <script src="Js/bootstrap-datetimepicker.js"></script> 然后调用初始化

bootstrap 中关于 HTML5 aria-* and role的用法

HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Application. Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等. HTML5针对html tag增加的属性:role 和 aria-*. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的

BootStrap中的按钮使用

原文地址:http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm 网站中事件的触发往往依赖于按钮或者超链接,因此,按钮可以认为是网站不可或缺的组件.而BootStrap也包含了大量的按钮,但是与其他的库有很大的区别.本文则是对如何在BootStrap中使用按钮进行了讲解. 按钮样式 任何只要赋予了.btn这个类的Dom对象会自动继承默认样式:圆角灰色按钮.除此之外,BootStrap也提供了其他的样式选项,如下表所示: 类名 描述 颜色 实

Bootstrap 中的 Typeahead 组件 -- AutoComplete

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.js 脚本. <html> <he

Bootstrap中的 Typeahead 组件

Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的使用思路: 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.js 脚本. 如: <

Bootstrap中的段落和强调内容

段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 4.字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(fon

bootstrap中的动态加载出来的图片轮播中的li标签中的class=&quot;active&quot;的动态添加移除

//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel ol li").toggleClass("active");//重复切换类名“active” }); 遇到的问题:在动态加载出来的轮播中设置了加载时就开始轮播data-ride="carousel"图片可以轮播但是底下的li标签的class没有进行切换.而不加d

BootStrap中Affix控件的使用方法及如何保持布局的美观

Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class

好用的bootstrap中的时间插件-bootstrap-datepicker

bootstrap-datepicker是bootstrap中一款好用的时间插件,支持中文,支持时间段的选择,支持时间格式配置,在线示例中用法提供友好. 点击页面上的配置,右下角的代码同步更新. 1.下载bootstrap-datepicker中放在bootstrap文件夹. 在页面进行css引用 <link rel="stylesheet" href="bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.m