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

整理自慕课笔记

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

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

默认警示框

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

如下图示：

具体使用的时候，可以在类名为“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框架是通过给警示框加的链接添加一个名为“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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap基本插件学习笔记之Alert警告框(20)

    Bootstrap基本插件学习笔记之Alert警告框(20)

    和前面的模态对话框类似. 0x01 例子 先看一个简单的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • bootstrap警告框使用方法解析

    bootstrap警告框使用方法解析

    警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 警告框(Alert) 样式文件: LESS版本:源文件 alerts.less 警告框–结构与样式 <div class="alert alert-success" role="alert"> <button class="close" data-dismiss=&q

  • 浅析Bootstrap缩略图组件与警示框组件

    浅析Bootstrap缩略图组件与警示框组件

    Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息. bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现.下面是bootstrap缩略图组件不同版本的源码文件: L

  • Bootstrap源码解读标签、徽章、缩略图和警示框（8）

    标签 标签组件通常用来做一些高亮显示用以提醒.使用".label"样式来实现,可以使用span这样的行内标签,例如:<span class="label">标签</span> 实现源码如下: .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align:

  • Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件

    警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 如果您想要单独引用该插件的功能,那么您需要引用 alert.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Dat

  • Bootstrap警告框（Alert）插件使用方法

    Bootstrap警告框（Alert）插件使用方法

    有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能. <a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="ext

  • Bootstrap缩略图与警告框学习使用

    Bootstrap缩略图与警告框学习使用

    本文实例为大家分享了Bootstrap缩略图与警告框的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

  • Bootstrap笔记之缩略图、警告框实例详解

    Bootstrap笔记之缩略图、警告框实例详解

     1. 基础缩略图 给a标签添加类class="thumbnail"如下: <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"

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

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

    整理自慕课笔记 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.如下图所示: 在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框. 默认警示框 Bootstrap框架通过"alert"样式来实现警示框效果.在默认情况之下,提供了四种不同的警示框效果: 1.成功警示框:告诉用用户操作成功,在"alert"样式基础上追加"alert-s

  • 整理关于Bootstrap列表组的慕课笔记

    整理关于Bootstrap列表组的慕课笔记

    整理自慕课笔记 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件. 基础列表组 基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式.在Bootstrap框架中的基础列表组主要包括两个部分: * list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 * list-group-item:列表项,常用的是li元素,当然也可以是div元素 来看一个简单的示例: <ul class=&qu

  • 整理关于Bootstrap表单的慕课笔记

    整理关于Bootstrap表单的慕课笔记

    整理自慕课笔记 基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制.主要将这些元素的margin.padding和border等进行了细化设置. 当

  • 整理关于Bootstrap过渡动画的慕课笔记

    整理自慕课笔记 动画过渡(Transitions): 源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法: * 调用统一编译的bootstrap.js: * 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址). transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果.不过需要注意的是,这

  • 整理关于Bootstrap模态弹出框的慕课笔记

    整理关于Bootstrap模态弹出框的慕课笔记

    整理自慕课笔记 插件的源文件:modal.js. 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.如下图所示: <body> <button class="btn btn-primary" type="button">点击我</button> <div cl

  • 整理关于Bootstrap排版的慕课笔记

    整理关于Bootstrap排版的慕课笔记

    整理自慕课笔记 GitHub上这样介绍 bootstrap: 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. 自定义JQuery插件,完整的类库,基于Less等. 标题 主标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,

  • 整理关于Bootstrap导航的慕课笔记

    整理自慕课笔记 基础样式 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务.导航的制作方法也是千奇百怪,五花八门.在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航. Bootstrap框架中制作导航条主要通过".nav"样式.默认的".nav"样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如"nav-tabs"."nav-pills&qu

  • Bootstrap提示框效果的实例代码

    Bootstrap提示框效果的实例代码

    本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl

随机推荐