Bootstrap 4 信息提示框

Bootstrap 4 信息提示框

Bootstrap 4 可以很容易实现信息提示框。

成功!此警告框表示成功或积极的行动。
信息! 此警告框表示中性信息更改或操作。
警告! 此警告框表示可能需要注意的警告。
危险!此警告框表示危险或潜在的负面行为。
主要! 此警告框表示一项重要操作。
次要!此警告框表示不太重要的操作。
暗色! 深灰色警报框。
浅色! 浅灰明亮警报框。

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light.alert-dark 类来实现:

实例

<div class="alert alert-success">
  <strong>Success!</strong> 表示成功或积极的行动。
</div>
亲自试一试 »


提示框添加链接

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:

成功!您应该阅读此消息
信息!您应该阅读此消息
警告!您应该阅读此消息
危险!您应该阅读此消息
Primary!您应该阅读此消息
次要!您应该阅读此消息
黑暗!您应该阅读此消息
高亮!您应该阅读此消息

实例

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
亲自试一试 »

关闭提示框

× 单击右侧的"x"符号关闭。

我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="close"data-dismiss="alert" 类来设置提示框的关闭操作。

实例

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
亲自试一试 »

提示: &times; (×) 是 HTML 实体字符,来表示关闭操作,而不是字母 "x".

有关所有HTML实体的列表,请访问我们的 HTML 实体参考


提示框动画

× 单击右侧的“x”符号关闭我。 我会“淡出”。

.fade.show 类用于设置提示框在关闭时的淡出和淡入效果:

实例

<div class="alert alert-danger alert-dismissible fade show">
亲自试一试 »

完整的 Bootstrap 4 提示框参考

有关所有提示框选项、方法和事件的完整参考,请访问我们的 Bootstrap 4 JS 提示框参考