BootStrap笔记-信息提示框的使用

程序运行截图如下：

源码如下；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid"><div class="alert alert-success"><strong>成功</strong></div><div class="alert alert-danger alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert" style="outline: none">&times;</button><strong>危险操作</strong></div></div>
</body>
</html>

解释：

①其中alter就是信息提示框，后面可以接.alert-sucess、alert-info、alert-waring、alert-danger、alert-secondary、alert-light、alert-dark；

②&times打包是关闭符号，如：

后面有各种各样的符号；

③.fade和.show在关闭提示框时有淡出和淡入的效果。

BootStrap笔记-信息提示框的使用相关推荐

爬虫训练场项目前端之 Bootstrap 信息提示框，按钮与按钮组，徽章，进度条
爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条 Bootstrap5 信息提示框 Bootstrap 5 按钮和按钮组 Bootstrap 5 徽章进度条 Boot ...
Bootstrap 信息提示框
一.Bootstrap 信息提示框 1.1 基本信息提示框提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .a ...
WEB前端网页设计-Bootstrap4 信息提示框
目录提示框添加链接关闭提示框提示框动画 Bootstrap 4 可以很容易实现信息提示框. 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, ...
1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5. 此外,所有的 <p> 元素 margin-top ...
Bootstrap智能消息提示框
Bootstrap智能消息提示框. "我觉得操作成功后,需要一个弹出提示框",客户说. "需要吗?我觉得没必要,错误的时候提示,成功时自动跳转就行了!",我弱弱 ...
DELMIA软件：文本信息提示框功能介绍与使用方法
目录概述文本信息创建修改文本信息增加文本信息删除文本信息仿真运行本文已经首发在个人微信公众号:工业机器人仿真与编程(微信号:IndRobSim),欢迎关注! 概述 DELMIA软件在机器 ...
CSS特效十：信息提示框
今天来讲一个信息提示框,可以在上下左右四个方向展示,先给大家看看效果图(文末有彩蛋!!!): 其中的重点就是一个尖角的展示: 我们可以用CSS 伪元素 ::after 及 content 属性为提示工 ...
Framework7中弹出确认信息提示框，取消/确定
使用Framework7框架进行开发时,如果需要弹出确认信息提示框之后根据用户选择再进行后续操作,相关代码如下: myApp.confirm('确定删除此订单吗?', '系统提示', func ...
Msgbox信息提示框
在"自考"<软件开发工具>一书中有这么一个提法,让我记忆深刻--程序设计者能做的事,不让用户做:能让用户少做,哪怕程序设置者需要多做的,都应该做.这不是宣言,应该是践行 ...

BootStrap笔记-信息提示框的使用

BootStrap笔记-信息提示框的使用相关推荐

最新文章

热门文章