Bootstrap的警告框组件

可以利用类alert实现警告框组件。。

01-基本的警告框组件使用示例

示例代码如下:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>警告框</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">警告框</h3>
<div class="alert alert-primary">
    <strong>主要的!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary">
    <strong>次要的!</strong> 显示一些不重要的信息。
</div>
<div class="alert alert-success">
    <strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info">
    <strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning">
    <strong>警告!</strong> 设置警告信息。
</div>
<div class="alert alert-danger">
    <strong>错误!</strong> 危险的操作。
</div>
<div class="alert alert-dark">
    <strong>深灰色!</strong> 深灰色提示框。
</div>
<div class="alert alert-light">
    <strong>浅灰色!</strong>浅灰色提示框。
</div>
</body>
</html>

运行效果如下:

02-为警告框添加关闭按钮

在警告框容器上添加类alert-dismissible,dismissible的意思为可解雇的。

然后在关闭按钮上添加 class="close" 和 data-dismiss="alert",即可"为警告框添加关闭按钮"。

示例代码如下:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关闭警告框</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">关闭警告框</h3>
<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <b>将进酒1:</b>&nbsp;&nbsp;与君歌一曲,请君为我倾耳听。
</div>
<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <b>将进酒2:</b>&nbsp;&nbsp;钟鼓馔玉不足贵,但愿长醉不愿醒。
</div>
<div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <b>将进酒3:</b>&nbsp;&nbsp;古来圣贤皆寂寞,惟有饮者留其名。
</div>
</body>
</html>

运行效果如下:

点击第一个框的关闭按钮后的截图如下:

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试