Bootstrap4 信息提示框

简介

Bootstrap 是一个由 Twitter 开发的前端开发框架，它为开发者提供了一系列的 CSS 样式和 JavaScript 插件，用以加快网站开发的速度和提高网页的美观程度。Bootstrap4 信息提示框是其中一种常用的组件，它在网页中经常被用作提醒某些重要信息或者警告用户。

使用方法

引入 Bootstrap4

在开始使用 Bootstrap4 信息提示框之前，需要先引入 Bootstrap4 的 CSS 和 JavaScript 文件。这可以通过以下代码来实现：

<!-- 引入Bootstrap4的CSS文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- 引入 Bootstrap4 的 JavaScript 文件 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

创建信息提示框

在正确引入了 Bootstrap4 的文件后，就可以开始使用信息提示框了。信息提示框是以一个标准的 <div> 标签为基础，通过添加不同的 CSS 类来实现不同的样式和功能。

以下是常用的信息提示框样式和对应的 CSS 类名：

• 默认样式：alert
• 成功样式：alert alert-success
• 警告样式：alert alert-warning
• 危险样式：alert alert-danger
• 信息样式：alert alert-info

以下是一个简单的默认样式信息提示框：

<div class="alert alert-primary" role="alert">
  这是一条信息提示框
</div>

在这个示例中，alert 是默认样式的 CSS 类，alert-primary 是默认样式的名称，它们组合在一起就可以创建一个默认样式的信息提示框。

结合 JavaScript

在前面的示例中，信息提示框是以静态的方式显示在网页中的。如果需要动态地添加或者删除提示框，可以使用 JavaScript 来操作。

在 JavaScript 中，可以通过以下代码来向网页添加一个信息提示框：

$(".alert").alert();

这个例子中，$(".alert") 是一个 jQuery 选择器，用来选择所有的信息提示框。.alert() 是一种 Bootstrap4 所提供的 JavaScript 方法，它用来处理所有的信息提示框，并对它们进行相应的操作。

可以通过以下代码来关闭提示框：

$(".alert").alert('close');

这个例子中，'close' 是一个字符串参数，用来通知 Bootstrap4 关闭所有的信息提示框。

总结

Bootstrap4 信息提示框是一种简单易用的前端组件，它可以用来在网页中提醒用户一些信息或者警告。在使用这个组件的时候，需要先引入 Bootstrap4 的 CSS 和 JavaScript 文件，然后创建一个包含相关 CSS 类的 <div> 标签即可。同时，也可以使用 JavaScript 来动态地添加或者关闭提示框，实现更好的用户体验。