bootstrap 警告(Alerts)

本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件

您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<p class="alert alert-success">成功,很好地完成了提交。</p>
<p class="alert alert-info">信息,这个消息很重要。</p>
<p class="alert alert-warning">警告,幸好没有进行提交。</p>
<p class="alert alert-danger">错误,请进一步修改。</p>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

时间: 2024-08-07 04:33:12

bootstrap 警告(Alerts)的相关文章

bootstrap 警告

本章将讲解警告(Alerts)以及Bootstrap所提供的用于警告的class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框.请使用警告(Alerts)Jquery插件. 你可以通过创建一个div并向其添加一个.alert class 和四个上下文class (即.alert-success,alert-info,alert-warning,alert-danger)之

Bootstrap中alerts的用法

警告alerts的使用:用于提示用户相关信息.  基本的显示方式有四种分别对应的是:(信息)alert-info .(成功)alert-success.(危险)alert-danger.(警告)alert-warning.示例代码: <div class="alert alert-info">文字的信息提示</div> <div class="alert alert-success">成功的信息提示</div> <

Bootstrap警告

警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 警告(Alerts) 步骤: 1.创建一个 <div> 2.并向其加入一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..alert-danger)之中的一个, 来加入一个主要的警告框. <!DOCTYPE html> <html lang="en"> &l

Bootstrap 警告、进度条、列表组

摘要:该部分包括警告.进度条等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success..alert-info..alert-danger..alert-warning.代码示例: 1 <div class="alert alert-success">成功</div> 2 <div class="alert alert-info">

bootstrap 教程分享

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具 Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootst

bootstrap错误警告信息提示

bootstrap提供了成功执行.警告和错误信息的样式. 在使用该功能的时候需要引入以下几个文件: bootstrap.css jquery.js(需放在bootstrap.js之前) bootstrap.js(官方推荐引入的是bootstrap-alert.js) 主要使用的样式: .span4 .alert(默认样式) .alert alert-successs .alert alert-error .alert alert-info 实例代码如下: <!DOCTYPE html> <

Bootstrap 布局组件

Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

9月27日Bootstrap

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机.使用bootstrap框架时,切记不能改变class的组名,如果需要建组设置属性,就再增加一个class组,下面的Bootstrp只是一些比较常用的属性,如果需要用到其他的属性,就到http://www.runoob.com/bootstrap/