Bootstrap4 信息提示框学习笔记

1. 什么是Bootstrap4信息提示框

Bootstrap4信息提示框是一个轻量级的UI组件，可用于在Web页面上以可定制的方式显示重要的消息。它通常会在用户执行某些操作后使用，以确保他们得到关键信息，如输入错误或成功提交表单等。

2. Bootstrap4信息提示框的类型

Bootstrap4提供了四种类型的信息提示框：

1. Success （成功）
2. Info （信息）
3. Warning （警告）
4. Danger （危险）

每一种类型的信息提示框可以通过Bootstrap4的CSS类进行自定义。

3. 如何创建Bootstrap4信息提示框

下面是引入Bootstrap4信息提示框的HTML代码。

htmlCopy Code
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- 引入 jQuery JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 Bootstrap4 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

上述代码将Bootstrap4 CSS和JavaScript文件引入页面中。接下来，您需要使用以下HTML代码创建一个信息提示框：

htmlCopy Code
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

其中，alert类指示这是一个信息提示框，而alert-success类指示这是一个成功提示框。您可以随意更改这些类以创建不同类型的提示框。

4.Bootstrap4信息提示框实例

下面是一些常见的Bootstrap4信息提示框的实例：

成功提示框

htmlCopy Code
<div class="alert alert-success">
  <strong>Success!</strong> 您已成功提交表单。
</div>

信息提示框

htmlCopy Code
<div class="alert alert-info">
  <strong>Info!</strong> 您的账户将在24小时后过期。
</div>

警告提示框

htmlCopy Code
<div class="alert alert-warning">
  <strong>Warning!</strong> 请填写所有必填字段。
</div>

危险提示框

htmlCopy Code
<div class="alert alert-danger">
  <strong>Danger!</strong> 您输入的电子邮件地址无效。
</div>

5. 总结

Bootstrap4信息提示框是一种非常实用的UI组件，可帮助您向用户显示重要的消息。您可以轻松地使用Bootstrap4的CSS类和JavaScript函数自定义提示框，以满足您的特定需求。