Bootstrap的警告框组件

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

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

示例代码如下:

<!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”,即可“为警告框添加关闭按钮”。
示例代码如下:

<!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>

运行效果如下:
在这里插入图片描述
点击第一个框的关闭按钮后的截图如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160608.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vite 使用本地 ip + localhost 访问服务

vite 使用本地 ip localhost 访问服务 在 vite.config.js 中&#xff0c;如果未配置 server.host&#xff0c;默认服务将以 localhost 进行启动&#xff0c;此时我们可以通过 localhost:port 或 127.0.0.1:port 进行应用访问。 import { resolve } from path function pathRes…

Hadoop3教程(九):MapReduce框架原理概述

文章目录 简介参考文献 简介 这属于整个MR中最核心的一块&#xff0c;后续小节会展开描述。 整个MR处理流程&#xff0c;是分为Map阶段和Reduce阶段。 一般&#xff0c;我们称Map阶段的进程是MapTask&#xff0c;称Reduce阶段是ReduceTask。 其完整的工作流程如图&#xff…

开源酒店预订订房小程序源码系统+多元商户 前端+后端完整搭建教程 可二次开发

大家好啊&#xff0c;罗峰今天来给大家分享一款酒店预订订房小程序源码系统&#xff0c;这款系统进行了全新的升级&#xff0c;从原来的单门店升级成了多门店&#xff0c;可以自由切换账号&#xff0c;统一管理。功能强大。以下是部分代码截图&#xff1a; 酒店预订订房小程序源…

【数据结构】算法、时间复杂度和空间复杂度详解 ------ 算法篇

文章目录 &#x1f4cb;前言一. ⛳️算法的定义二. ⛳️算法的特性2.1 输入输出2.2 输入输出2.3 有穷性2.4 确定性2.5 可行性 三. ⛳️算法设计要求3.1 正确性3.2 可读性3.2 健壮性3.3 时间效率高和存储量低 四. ⛳️算法效率的度量方法4.1 事后统计方法4.2 事前分析估算方法 五…

学术 | IEEE ICASSP学术会议申请及截止时间

ICASSP会议即国际声学、语音与信号处理会议&#xff0c;是全世界最大的&#xff0c;也是最全面的信号处理及其应用方面的顶级会议&#xff0c;是IEEE&#xff08;电子技术与信息科学工程师协会&#xff09;旗下的重要国际会议。 2024 IEEE International Conference on Acousti…

Vue - 标准开发方式、组件(全局、局部、props、事件传递)、插槽的使用

目录 一、Vue 1.1、标准开发方式 1.2、组件的使用 1.2.1、全局组件 1.2.2、局部组件 1.2.3、props 传递静态数据 1.2.4、props 传递动态数据 1.2.5、事件传递 1.2.6、插槽slot 一、Vue 1.1、标准开发方式 Vue 的标准开发方式是 SPA&#xff08;Single Page Applicatio…

2023年【天津市安全员C证】模拟考试及天津市安全员C证实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员C证模拟考试是安全生产模拟考试一点通生成的&#xff0c;天津市安全员C证证模拟考试题库是根据天津市安全员C证最新版教材汇编出天津市安全员C证仿真模拟考试。2023年【天津市安全员C证】模拟考试及天津市…

10-SRCNN-使用CNN实现超分辨成像

文章目录 utils_dataset.pymodel.pytrain.pyuse.py主要文件 utils_dataset.py 工具文件,主要用来制作dataset,便于加入dataloader,用于实现数据集的加载和并行读取 model.py 主要写入网络(模型) train.py 主要用于训练 use.py 加载训练好的模型,用于测试或使用 utils_dat…

ACU-01B 3HNA024871-001/03 机器人将如何改变世界

ACU-01B 3HNA024871-001/03 机器人将如何改变世界 由于改进的传感器技术以及机器学习和人工智能方面更显著的进步&#xff0c;机器人将继续从单纯的机械机器转变为具有认知功能的合作者。这些进步&#xff0c;以及其他相关领域&#xff0c;正在享受一个上升的轨迹&#xff0c;…

Archive Team: The Twitter Stream Grab

该集合不再更新&#xff0c;应被视为静态数据集。 从一般 Twitter 流中抓取的 JSON 的简单集合&#xff0c;用于研究、历史、测试和记忆的目的。这是“Spritzer”版本&#xff0c;最轻、最浅的 Twitter 抓取。不幸的是&#xff0c;我们目前无法访问流的洒水器或花园软管版本。 …

MATLAB-自动批量读取文件,并按文件名称或时间顺序进行数据处理

我在处理文件数据时&#xff0c;发现一个一个文件处理效率太低&#xff0c;因此学习了下MATLAB中自动读取特定路径下文件信息的程序&#xff0c;并根据读取信息使用循环进行数据处理&#xff0c;提高效率&#xff0c;在此分享给大家这段代码并给予一些说明&#xff0c;希望能为…

Docker逃逸---授权 SYS_ADMIN Capability逃逸原理浅析

目录 一、产生原因 二、利用条件 三、复现过程 1、容器内挂载宿主机cgroup 2、设置notify_no_release并寻找容器在宿主机上的存储路径 3、将恶意脚本写入release_agent 一、产生原因 给容器额外授权了SYS_ADMIN Cap&#xff0c;并且容器以root权限运行&#xff0c;攻击者…

数据结构之堆

目录 前言 堆的概念与结构 堆的实现 堆的初始化 堆的销毁 堆的显示 堆的插入 堆的向上调整算法 堆的删除 堆的向下调整算法 堆的判空 获取堆顶元素 堆的数据个数 堆的创建 前言 二叉树的顺序结构存储即使用数组存储&#xff0c;而数组存储适用于完全二叉树&#xf…

C# OpenVINO Cls 图像分类

效果 耗时 class idbrown_bear, score0.86 preprocess time: 0.00ms infer time: 2.72ms postprocess time: 0.02ms Total time: 2.74ms项目 代码 using OpenCvSharp; using Sdcb.OpenVINO; using Sdcb.OpenVINO.Natives; using System; using System.Diagnostics; using Sys…

【分享】教你加速访问GitHub,进来学!

哈喽&#xff0c;大家好&#xff0c;木易巷来啦&#xff01; 众所周知&#xff0c;Github是一款程序猿必备的代码托管平台&#xff0c;上面已经存在了无数前辈的心血&#xff01;经常需要在上面查看大佬写的一些好用的开源项目&#xff0c;无赖国外网站的速度实在让人难以接受。…

基于ssm+vue的线上点餐系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

间歇性微服务问题...

在Kubernetes环境中&#xff0c;最近由于特定配置导致Pod调度失败。哪种 Kubernetes 资源类型&#xff08;通常与节点约束相关&#xff09;可能导致此故障&#xff0c;尤其是在未正确定义的情况下&#xff1f; 节点选择器资源配额优先级污点Pod 中断预算 已有 201 人回答了该…

华为数通方向HCIP-DataCom H12-831题库(单选题:261-280)

第261题 某网络通过部署1S-IS实现全网与通,若在一台IS-IS路由器的某接口下配置命令isis timer holding multiplier 5 level-2,则以下关于该场景的描述,正确的是哪一项? A、该接口Level-2邻居保持时间为5秒 B、该接口Level-1邻居保持时间为30秒 C、该接口为点对点链路接口 …

工控网络协议模糊测试:用peach对modbus协议进行模糊测试

0x00 背景 本人第一次在FB发帖&#xff0c;进入工控安全行业时间不算很长&#xff0c;可能对模糊测试见解出现偏差&#xff0c;请见谅。 在接触工控安全这一段时间内&#xff0c;对于挖掘工控设备的漏洞&#xff0c;必须对工控各种协议有一定的了解&#xff0c;然后对工控协议…

Qt开发之路--模块化设计.pri文件

Qt开发之路--模块化设计.pri文件 QT pro文件和pri文件的区别Chapter1 Qt开发之路--模块化设计.pri文件一&#xff1a;.pri文件简介二&#xff1a;通过.pri模块化设计三&#xff1a;结尾 Chapter2 Qt开发大型项目时&#xff0c;通过.pri文件将众多文件按功能模块分类显示Qt中多p…