Bootstrap4 提示框学习笔记

什么是提示框？

提示框是一种常用的界面元素，它可以向用户传达信息、警告或错误。Bootstrap4 提供了多种提示框样式，包括警告框、成功框、信息框以及错误框。

如何使用提示框？

要在页面中使用提示框，首先需要引入 Bootstrap4 的 CSS 和 JavaScript 文件。然后，可以使用以下代码创建一个基本的提示框：

Copy Code
<div class="alert alert-primary" role="alert">
  这是一个提示框。
</div>

这会在页面上创建一个具有默认蓝色背景的提示框，并显示一条简单的文本消息。如果您想使用不同类型的提示框，可以更改 alert-* 类中的颜色名称，例如：

.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-light
.alert-dark

提示框还支持可关闭的功能。要创建一个可关闭的提示框，请添加一个含有 close 类的按钮，并将 data-dismiss 属性设置为 alert，例如：

Copy Code
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>警告！</strong> 您正在操作危险的内容。
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

这会在页面上创建一个警告框，并显示一条警告消息以及一个可关闭的按钮。

示例

下面是一个使用提示框的示例，演示了提示框的多种样式和功能：

Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Alert Example</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
  
  <div class="container mt-3">
    
    <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>
    
    <div class="alert alert-info" role="alert">
      这是一个信息的提示框。
    </div>
    
    <div class="alert alert-light" role="alert">
      这是一个浅色的提示框。
    </div>
    
    <div class="alert alert-dark" role="alert">
      这是一个深色的提示框。
    </div>
    
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>警告！</strong> 您正在操作危险的内容。
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    
  </div>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  
</body>
</html>

在这个示例中，我们使用了 Bootstrap4 的默认样式，并创建了多个提示框来演示不同的样式和功能。注意，我们还引入了 jQuery 库，因为 Bootstrap4 的 JavaScript 插件依赖于它。

结论

提示框是一种常用的界面元素，它可以向用户传达信息、警告或错误。Bootstrap4 提供了多种提示框样式和功能，使开发人员能够轻松地在页面中添加提示框。