×
Bootstrap4 教程Bootstrap4 安装使用Bootstrap4 网格系统Bootstrap4 文字排版Bootstrap4 颜色Bootstrap4 表格Bootstrap4 图像形状Bootstrap4 JumbotronBootstrap4 信息提示框Bootstrap4 按钮Bootstrap4 按钮组Bootstrap4 徽章(Badges)Bootstrap4 进度条Bootstrap4 分页Bootstrap4 列表组Bootstrap4 卡片Bootstrap4 下拉菜单Bootstrap4 折叠Bootstrap4 导航Bootstrap4 导航栏Bootstrap4 表单Bootstrap4 表单控件Bootstrap4 轮播Bootstrap4 模态框Bootstrap4 提示框Bootstrap4 弹出框Bootstrap4 滚动监听Bootstrap4 小工具

Bootstrap4 信息提示框


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>成功!</strong> 指定操作成功提示信息。 </div>

尝试一下 »

提示框添加链接

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

实例

<div class="alert alert-success"> <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a></div>

尝试一下 »

关闭提示框

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

实例

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>成功!</strong> 指定操作成功提示信息。 </div>

尝试一下 »

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


提示框动画

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

实例

<div class="alert alert-danger alert-dismissable fade show">

尝试一下 »

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)