bootstrap提示框alert bootstrapalert|Bootstrap教程

本文概述

Boostrap警报示例
Bootstrap4警报
警报链接
关闭警报
动画警报

Boostrap警报用于提供创建预定义警报消息的简便方法。 Alert为你的消息添加了一种样式，以使其对用户更具吸引力。
< div> 元素中使用了四个类来发出警报。

.alert成功
.alert-info
。警报警告
.alert-danger

Boostrap警报示例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1510526440-1.jpg">< /script> < /head> < body>< div class="container"> < h2>Alerts< /h2> < div class="alert alert-success"> < strong>Success!< /strong> This alert box indicates a successful or positive action. < /div> < div class="alert alert-info"> < strong>Info!< /strong> This alert box indicates a neutral informative change or action. < /div> < div class="alert alert-warning"> < strong>Warning!< /strong> This alert box indicates a warning that might need attention. < /div> < div class="alert alert-danger"> < strong>Danger!< /strong> This alert box indicates a dangerous or potentially negative action. < /div> < /div>< /body> < /html>

Bootstrap4警报Bootstrap 4在Bootstrap 3教程中定义的Bootstrap Alert中添加了4个新警报。
这些是：

主要：此警报框指示重要的操作。
次要的：此警报框指示次要的操作。
深：深灰色警报框。
浅：浅灰色警报框。

警报使用.alert类创建，然后使用上下文类之一创建。
【bootstrap提示框alert】所有上下文类别的列表：

.alert成功
.alert-info
。警报警告
.alert-danger
.alert-primary
.alert-secondary
.alert-light
.alert-dark

例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1510526240-3.jpg">< /script> < script src="http://img.readke.com/220416/151052M17-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Alerts< /h2> < div class="alert alert-success"> < strong>Success!< /strong> Used to indicate successful or positive action. < /div> < div class="alert alert-info"> < strong>Info!< /strong> Used to indicate a neutral informative change or action. < /div> < div class="alert alert-warning"> < strong>Warning!< /strong> Used to indicate a warning that might need attention. < /div> < div class="alert alert-danger"> < strong>Danger!< /strong> Used to indicate a dangerous or potentially negative action. < /div> < div class="alert alert-primary"> < strong>Primary!< /strong> Used to indicate an important action. < /div> < div class="alert alert-secondary"> < strong>Secondary!< /strong> Used to indicate a slightly less important action. < /div> < div class="alert alert-dark"> < strong>Dark!< /strong> Dark grey alert. < /div> < div class="alert alert-light"> < strong>Light!< /strong> Light grey alert. < /div> < /div>< /body> < /html>

警报链接你必须将alert-link类添加到警报框中的所有链接中，以创建“匹配的彩色链接”：
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1510526240-3.jpg">< /script> < script src="http://img.readke.com/220416/151052M17-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Bootstrap Alert Links< /h2> < div class="alert alert-success"> < strong>Success!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-info"> < strong>Info!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-warning"> < strong>Warning!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-danger"> < strong>Danger!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-primary"> < strong>Primary!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-secondary"> < strong>Secondary!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-dark"> < strong>Dark!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < div class="alert alert-light"> < strong>Light!< /strong> You should < a href="http://www.srcmini.com/#" class="alert-link">read this message< /a>. < /div> < /div>< /body> < /html>

关闭警报如果要关闭警报消息，则必须向警报容器添加.alert-dismissable类。然后将class =“ close”和data-dismiss =“ alert”添加到链接或按钮元素中（当你单击关闭符号时，警报框将关闭。）
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1510526240-3.jpg">< /script> < script src="http://img.readke.com/220416/151052M17-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Alerts< /h2> < div class="alert alert-success alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Success!< /strong> This alert box could indicate a successful or positive action. < /div> < div class="alert alert-info alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Info!< /strong> This alert box could indicate a neutral informative change or action. < /div> < div class="alert alert-warning alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Warning!< /strong> This alert box could indicate a warning that might need attention. < /div> < div class="alert alert-danger alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Danger!< /strong> This alert box could indicate a dangerous or potentially negative action. < /div> < div class="alert alert-primary alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Primary!< /strong> Indicates an important action. < /div> < div class="alert alert-secondary alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Secondary!< /strong> Indicates a slightly less important action. < /div> < div class="alert alert-dark alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Dark!< /strong> Dark grey alert. < /div> < div class="alert alert-light alert-dismissable"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Light!< /strong> Light grey alert. < /div> < /div>< /body> < /html>

动画警报关闭警报消息时，可以使用.fade和.show类添加淡入淡出效果。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/1510526240-3.jpg">< /script> < script src="http://img.readke.com/220416/151052M17-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Animated Alerts Example< /h2> < div class="alert alert-success alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Success!< /strong> This alert box could indicate a successful or positive action. < /div> < div class="alert alert-info alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Info!< /strong> This alert box could indicate a neutral informative change or action. < /div> < div class="alert alert-warning alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Warning!< /strong> This alert box could indicate a warning that might need attention. < /div> < div class="alert alert-danger alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Danger!< /strong> This alert box could indicate a dangerous or potentially negative action. < /div> < div class="alert alert-primary alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Primary!< /strong> Indicates an important action. < /div> < div class="alert alert-secondary alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Secondary!< /strong> Indicates a slightly less important action. < /div> < div class="alert alert-dark alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Dark!< /strong> Dark grey alert. < /div> < div class="alert alert-light alert-dismissable fade show"> < button type="button" class="close" data-dismiss="alert">×< /button> < strong>Light!< /strong> Light grey alert. < /div> < /div>< /body> < /html>