Bootstrap警告（Alerts）的实现方法

2024-02-29 05:20:17

Bootstrap 所提供的用于警告的 class，可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
html代码

<div class="alert alert-success">
  成功！很好地完成了提交。
</div>
<div class="alert alert-info">
  信息！请注意这个信息。
</div>

如果要创建一个可取消的警告（Dismissal Alert）步骤如下：

1、通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

2、同时向上面的 <div> class 添加可选的 .alert-dismissable。

3、添加一个关闭按钮。（按钮可点击关掉）

html代码

<div class="alert alert-warning alert-dismissable">
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
          警告！请不要提交。
  </div>
<div class="alert alert-danger alert-dismissable">
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
           错误！请进行一些更改。
  </div>

注意：请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素。

html代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 页面标题（Page Header）</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 

</head> 

<body>
<div class="container">
  <div class="alert alert-success">
            成功！很好地完成了提交。
  </div>
  <div class="alert alert-info">
       信息！请注意这个信息。
  </div>
  <div class="alert alert-warning alert-dismissable">
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
          警告！请不要提交。
  </div>
  <div class="alert alert-danger alert-dismissable">
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
           错误！请进行一些更改。
  </div> 

</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
  </body>
</html>

效果图：

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

bootstrap警告框使用方法解析

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

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

bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() { $parent .trigger('closed') .remove() } 理论上把.remove()改为.hide(),然后在需要重新显示的地方,加上$('#alert').show();就可以了. 但实际应用中,可以把 close button 的 data-dismiss 去掉,加上
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的modal组件自定义alert，confirm和modal对话框

本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用! 由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值. 1. 实例展示详细的代码可通过前面给出的下载链接下载源码去了解,代码
Bootstrap每天必学之警告框插件

警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 如果您想要单独引用该插件的功能,那么您需要引用 alert.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Dat
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警告框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
Bootstrap中CSS的使用方法

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo
BootStrap glyphicons 字体图标实现方法

相关阅读: 详解Bootstrap glyphicons字体图标先给大家说下什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接. 使用bootstrap很久了,内置的 glyphicons 图标,足以满足小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没
搭建Bootstrap离线文档的方法

虽然现在不联网的情况很少,但在本机上搭建一份Bootstrap离线文档以备不时之需也是很有必要的. 废话不多说,如果你也有同样的想法,可以参照以下步骤来做: 若你还没有安装过nodejs和Ruby,请先下载安装后再开始下面的步骤. 去Bootstrap官网下载源码. 下载完毕之后解压到任意位置,比如D:\. 从terminal进入源码目录,输入命令: npm install 接着从terminal输入下面的命令来安装Ruby的一个gem:Bundler(官网:http://bundler.io)
bootstrap 表单验证使用方法

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do
Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator
Bootstrap 实现查询的完美方法

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 废话不多说了,直接给大家贴bootstrap实现查询的代码了.具体代码如下所示: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html&
基于bootstrap页面渲染的问题解决方法

本人不擅长前台,写此文只是讲一下我解决页面渲染的一个小的解决办法,或许这个方法大家早知道了,但是应该还会有像我一样还在纠结的小伙伴,帮助一下像我一样的不擅长前台的童鞋. 这几天正在做一个后台管理的小项目,从网上找了个基于bootstrap的ui模板,参考了一般系统的做法,都是上面一个navbar,左侧一个目录树,然后空出来的一大片地方放置内容.然后各种把每个区域都提出去,弄成一个一个的小文件,然后include到一个大文件中. 当做到内容区域的时候就在考虑,内容是放在iframe中进行局部渲染,
Element Alert警告的具体使用方法

组件-警告基本用法 <template> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="info"> </el-alert> <el-alert title="警告提示的文案" type="warning&

Bootstrap警告（Alerts）的实现方法

相关推荐

随机推荐