3.15 Bootstrap 警告(Alerts)

**Bootstrap 警告（Alerts）**

在网页设计中，警告是用来提示用户注意某些重要信息的元素。Bootstrap 提供了一个强大的警告系统，让你可以轻松地创建各种类型的警告。

### 基本警告基本警告是最常用的类型，它们通常用于提示用户一些重要信息，如表单验证错误或操作结果。

html<!-- 基本警告 -->
<div class="alert alert-primary" role="alert">
 这是一个基本的警告。
</div>

<!-- 警告颜色 -->
<div class="alert alert-secondary" role="alert">
 这是一个次要的警告。
</div>
<div class="alert alert-success" role="alert">
 这是一个成功的警告。
</div>
<div class="alert alert-danger" role="alert">
 这是一个危险的警告。
</div>
<div class="alert alert-warning" role="alert">
 这是一个警告的警告。
</div>

### 自定义警告你可以通过改变颜色和样式来自定义警告。

html<!-- 自定义警告 -->
<div class="alert alert-custom-primary" role="alert">
 <strong>注意！</strong> 这是一个自定义的警告。
</div>

<!-- 警告背景色 -->
<div class="alert alert-dismissible alert-light" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 这是一个自定义的警告。
</div>

<!-- 警告边框 -->
<div class="alert alert-dismissible alert-dark" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 这是一个自定义的警告。
</div>

### 弹出式警告弹出式警告是通过 JavaScript 来实现的，它可以在页面加载时或用户操作时显示。

html<!-- 弹出式警告 -->
<div class="alert alert-dismissible fade show" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 这是一个弹出式的警告。
</div>

<!-- 弹出式警告颜色 -->
<div class="alert alert-dismissible fade show alert-primary" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 这是一个弹出式的警告。
</div>

<!-- 弹出式警告背景色 -->
<div class="alert alert-dismissible fade show alert-light" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 这是一个弹出式的警告。
</div>

<!-- 弹出式警告边框 -->
<div class="alert alert-dismissible fade show alert-dark" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 这是一个弹出式的警告。
</div>

### JavaScript 弹出式警告通过 JavaScript，可以在页面加载时或用户操作时显示弹出式警告。

javascript// 页面加载时显示弹出式警告$(document).ready(function() {
 $('.alert-dismissible').show();
});

// 用户点击按钮时显示弹出式警告$('#button').click(function() {
 $('.alert-dismissible').show();
});

### Bootstrap 警告总结Bootstrap 提供了一个强大的警告系统，让你可以轻松地创建各种类型的警告。通过改变颜色和样式，可以自定义警告。通过 JavaScript，可以在页面加载时或用户操作时显示弹出式警告。

**参考文档**

* Bootstrap4.0 文档： />* Bootstrap5.0 文档： />
**注意**

本文使用 Bootstrap4.0 和 Bootstrap5.0 的示例代码。Bootstrap 的版本可能会影响样式和行为。