Bootstrap警告
警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
警告(Alerts)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width,initial-scale = 1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src = "js/jquery-1.11.2.min.js"></script>
<script src = "js/bootstrap.min.js"></script>
<title>CSSDemo</title>
</head>
<body>
<div class="container">
<div class="col-lg-3">
<div class="alert alert-success">成功信息。</div>
<div class="alert alert-info">提示信息。</div>
<div class="alert alert-warning">警告信息。 </div>
<div class="alert alert-danger">错误信息。</div>
</div>
</div>
</body>
</html>
可取消的警告(Dismissal Alerts)
创建一个可取消的警告(Dismissal Alert)过程例如以下:
- 通过创建一个 <div>。并向其加入一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之中的一个,来加入一个主要的警告框。
- 同一时候向上面的 <div> class 加入可选的 .alert-dismissable。
- 加入一个关闭button。
<body>
<div class="container">
<div class="col-lg-3">
<div class="alert alert-success alert-dismissable">成功信息。 <button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button>
</div>
<div class="alert alert-info">提示信息。
<button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-warning">警告信息。</div>
<div class="alert alert-danger">错误信息。 </div>
</div>
</div>
</body>
警告(Alerts)中的链接
<body>
<div class="container">
<div class="col-lg-3">
<div class="alert alert-success alert-dismissable">
<a href="#" class="alert-link">成功信息。</a>
<button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">提示信息。</a>
<button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">警告信息。 </a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">错误信息。</a>
</div>
</div>
</div>
</body>
.alert .alert-link的font-weight:700,因此能够看出字体有加粗
Bootstrap警告的更多相关文章
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- bootstrap 警告框多个删除
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- bootstrap 警告框单个删除
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- bootstrap 警告
本章将讲解警告(Alerts)以及Bootstrap所提供的用于警告的class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加 ...
- Bootstrap 警告框(Alert)插件
警告消息大多来是用来向终端用户提示警告或确认的消息,使用警告框插件,您可以向所有的警告框消息添加取消功能. 用法 您有以下两种方式启用警告框的可取消功能. 1.通过data属性:通过数据添加可取消功能 ...
- bootstrap 警告(Alerts)
本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添 ...
- bootstrap警告框、进度条和列表组
警告框 <div class="container"> <div class="alert alert-success" rol ...
- Bootstrap 警告框(Alert)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
随机推荐
- Node.js:多进程
ylbtech-Node.js:多进程 1.返回顶部 1. Node.js 多进程 我们都知道 Node.js 是以单线程的模式运行的,但它使用的是事件驱动来处理并发,这样有助于我们在多核 cpu 的 ...
- Nginx实战系列之功能篇----后端节点健康检查
目前,nginx对后端节点健康检查的方式主要有3种,这里列出: 1.ngx_http_proxy_module 模块和ngx_http_upstream_module模块(自带) 官网地址: ...
- python笔记:文件操作
1.逐行打印整个文件 # -*- coding: utf-8 -*- f = open("test",'r',encoding="utf-8") count = ...
- JavaScript之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- 浅析CLR的事件
文章目录: 1.C#(.net framework框架)中的事件以及特点 2.事件的组成部分 3.编辑器如何实现事件的 4.显式实现事件 1.C#(.net framework ...
- ADO.NET增删改
static void Main1(string[] args) {添加造连接字符串string connstring = "server=.;database=mydb;user=sa;p ...
- draw9patch在SDK->tools找不到,在Android Studio点击图片没找到draw9patch
draw9patch在SDK->tools找不到,在Android Studio点击图片没找到draw9patch 第一个问题: Google把draw9patch集成在Android Stud ...
- 【Oracle】跟踪文件目录(User_Dump_Dest)生成脚本(11g/9i).txt
oracle 11g 生成跟踪目录(User_Dump_Dest)脚本: –设置合适显示长度: column trace new_val TRACE format a100 –脚本: select c ...
- 页面footer在底部
页脚动态贴在底部需要满足以下两个条件: 当主体的内容高度不超过可视区域高度的时候,页脚贴在页面底部. 当主体的内容高度超过可视区域高度的时候,页脚将按正常布局. 方法一:footer高度固定+绝对定位 ...
- 在maven项目结构下对于Resources目录下文件的存取
在maven项目中,文件结构如下: proj ---src ----main ----java ----Main.java ----resources ----userFile.properties ...