引导 5 警报
Bootstrap 5 是 Bootstrap 的最新主要版本,在该版本中,用户界面得到了改进,并进行了各种更改。警报为典型的用户操作提供上下文反馈消息,并带有少量可用且灵活的警报消息。Bootstrap 允许使用预定义的类在网站上显示这些警报消息。每个类都有不同的相关颜色。
语法:
<div class="alert alert-type"> Contents of the alert... <div>
类型:引导数据库 5 中有八种类型的警报。这些警报的类别如下:
- 警报-主要
- 警报-二级
- 警报-成功
- 警戒-危险
- 警报-警告
- 警报信息
- 警报灯
- 警戒-黑暗
示例 1: 此示例显示了引导数据库 5 中的前四种警报类型。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Alerts
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div style="text-align: center;
width:600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div id="canvas" style="width: 600px;
height: 200px;
margin: 20px;">
<div class="alert alert-primary" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-secondary" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-success" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-danger" role="alert">
GeeksforGeeks
</div>
</div>
</body>
</html>
输出:
示例 2: 此示例显示了引导数据库 5 中接下来的四种警报类型。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Alerts
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div style="text-align: center;
width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div id="canvas" style="width: 600px;
height: 200px;
margin: 20px;">
<div class="alert alert-warning" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-info" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-light" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-dark" role="alert">
GeeksforGeeks
</div>
</div>
</body>
</html>
输出:
版权属于:月萌API www.moonapi.com,转载请注明出处