位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > 关闭提示框 .alert-dismissible 类
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 提示框添加链接 alert-link 类 下一篇: 提示框动画 .fade 和 .show 类

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

实例

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

 

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h2>关闭提示框</h2>
  <p>我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 和 data-dismiss="alert" 类来设置提示框的关闭操作。</p>
  <div class="alert alert-success alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>错误!</strong> 失败的操作。
  </div>
  <div class="alert alert-primary alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light alert-dismissible">
    <button type="button" data-dismiss="alert">&times;</button>
    <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>
 
</body>
</html>
效果图

小白教程网www.2d5.net

image.png

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


上一篇: 提示框添加链接 alert-link 类 下一篇: 提示框动画 .fade 和 .show 类
毕业设计网             广告联系QQ:45157718(微信同号)