Bootstrap4 信息提示框
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 来动态地添加或者关闭提示框,实现更好的用户体验。