Bootstrap 5 保姆级教程(十一):模态框 提示框

一、模态框

1.1 创建模态框

以下实例创建了一个简单的模态框效果 :

<div class="container mt-3"><h3>模态框实例</h3><p>点击按钮打开模态框</p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>
</div><!-- 模态框 -->
<div class="modal" id="myModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

1.2 添加动画

使用 .fade 类可以设置模态框弹出或关闭的效果:

<div class="container mt-3"><h3>模态框实例</h3><p>点击按钮打开模态框</p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>
</div><!-- 模态框 -->
<div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

1.3 模态框尺寸

我们可以通过添加 .modal-sm 类来创建一个小模态框,.modal-lg 类可以创建一个大模态框。

尺寸类放在 <div>元素的 .modal-dialog 类后 :

1.3.1 小模态框

<div class="container mt-3"><h3>模态框实例</h3><p>点击按钮打开模态框</p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>
</div><!-- 模态框 -->
<div class="modal fade" id="myModal"><div class="modal-dialog modal-sm"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

1.3.2 大模态框

类名:modal-lg

1.3.3 超大模态框

类名:modal-xl 

1.3.4 全屏显示

类名:modal-fullscreen

1.4 模态框居中显示

使用 .modal-dialog-centered 类可以设置模态框水平和垂直方向都居中显示:

<div class="container mt-3"><h3>水平和垂直方向都居中显示</h3><p>点击按钮打开模态框</p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>
</div><!-- 模态框 -->
<div class="modal" id="myModal"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

1.5 模态框滚动条

默认情况下模态框如果包含很多内容,页面会自动生成一个滚动,模态框随着页面的滚动而滚动:

<div class="container mt-3"><h3>模态框滚动条实例</h3><p>点击按钮打开模态框</p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>
</div><!-- 模态框 -->
<div class="modal" id="myModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br /></div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

如果我们只想在模态框里头设置一个滚动条,可以使用 .modal-dialog-scrollable 类:

<div class="container mt-3"><h3>模态框滚动条实例</h3><p>点击按钮打开模态框</p><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>
</div><!-- 模态框 -->
<div class="modal" id="myModal"><div class="modal-dialog modal-dialog-scrollable"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br />模态框内容..<br /></div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

二、提示框

2.1 创建提示框

通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。

title 属性的内容为提示框显示的内容:

注意: 提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

以下实例可以在文档的任何地方使用提示框:

<div class="container mt-3"><h3>提示框实例</h3><button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</button>
</div><script>
// 初始化提示框
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

2.2 指定提示框的位置

默认情况下提示框显示在元素上方。

可以使用 data-bs-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:

<div class="container mt-3"><h3>提示框显示位置实例</h3><p>可以使用 data-bs-placement 属性来设定提示框显示的方向:</p><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="我是提示内容!">鼠标移动到我这</a><a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="我是提示内容!">鼠标移动到我这</a><a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="我是提示内容!">鼠标移动到我这</a><a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="我是提示内容!">鼠标移动到我这</a>
</div><script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

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

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

相关文章

有哪些网站设计教程

网站设计教程是帮助人们学习如何设计和开发网站的资源&#xff0c;它们提供了从基础知识到高级技巧的全方位指导。无论您是初学者还是经验丰富的开发者&#xff0c;都可以从这些教程中获益。下面是一些广受欢迎的网站设计教程&#xff0c;它们涵盖了各种技术和工具&#xff1a;…

监督算法建模前数据质量检查

一、定义缺失值检测函数 def missing_values_table(df):# 总的缺失值mis_val df.isnull().sum()# 缺失值占比mis_val_percent 100 * df.isnull().sum() / len(df)# 将上述值合并成表mis_val_table pd.concat([mis_val, mis_val_percent], axis1)# 重命名列名mis_val_table_…

轻量级SQLite可视化工具Sqliteviz

什么是 Sqliteviz &#xff1f; Sqliteviz 是一个单页面离线优先的渐进式网络应用&#xff08;PWA&#xff09;&#xff0c;用于完全客户端的 SQLite 数据库或 CSV 文件的可视化。 所谓完全客户端&#xff0c;就是您的数据库永远不会离开您的计算机。使用 sqliteviz&#xff0c…

2024 抖音欢笑中国年之渲染技术实践与探索

SAR Creator是一款基于 Typescript 的高性能、轻量化的互动解决方案&#xff0c;目前支持了浏览器和跨端框架平台&#xff0c;服务于字节内部的各种互动业务。 前言 抖音在2024年春节期间推出了欢笑中国年系列活动&#xff0c;为用户带来了全新的体验和乐趣。而SAR Creator则为…

01 MySQL--概念、三范式、表、字段设计方法与规范

1. 定义 1.1 SQL的分类 DQL - 数据查询语言&#xff08;Data Query Language, DQL&#xff09;负责进行数据查询而不会对数据本身进行修改的语句。 SELECT、FROM、WHERE、GROUP BY、HAVING、ORDER BY。DDL - 数据定义语言 (Data Definition Language, DDL) 负责数据结构定义与…

【RV1106的ISP使用记录之基础知识】硬件连接关系与设备树的构建

RV1106具备2个mipi csi2 dphy硬件&#xff0c;1个VICAP硬件和1个ISP硬件。其中&#xff1a; 1、mipi csi2 dphy 用于对数据流的解析&#xff0c;支持MIPC,LVDS,DVP三种接口&#xff1b; 2、VICAP用于数据流的捕获&#xff1b; 3、ISP用于对图像数据进行处理&#xff1b; 这三个…

leetcode39--组合总数I

1. 题意 给一堆数&#xff0c;和一个目标和&#xff0c;求所有可能的不重复的组合。 组合总数 2. 题解 主要是去重&#xff0c;每次推入数到目标数组&#xff0c;将下次枚举的数的开头设为当前的下标就不会重复噜噜o_O 即如何避免 2 3 2 2\ 3\ 2 2 3 2 和 3 2 2 3\ 2\ 2 3…

文件夹变白之谜:原因、恢复与防范之道

在日常电脑使用中&#xff0c;我们有时会遇到一些文件夹突然变成白色文件的情况。这些文件夹看起来就像失去了原有的属性&#xff0c;无法被正常打开或访问。这种情况往往让人感到困惑和焦虑&#xff0c;因为文件夹中可能存储着重要的数据和信息。那么&#xff0c;文件夹为何会…

git代码管理常用命令以及示例

Git 是一个开源的分布式版本控制系统&#xff0c;用于跟踪文件的变更。以下是一些 Git 代码管理的常用命令及其示例&#xff1a; 1、初始化仓库 git init这会在当前目录创建一个新的 Git 仓库。 2、克隆仓库 git clone <repository-url>这会克隆一个远程仓库到本地。…

匿名对象 与 new delet初识

一.匿名对象 1.定义&#xff1a; 没有名称的临时创建的对象&#xff0c;通常用于临时操作或作为函数的实参或返回值。 2.声明周期与作用域&#xff1a; 仅仅在定义所在代码行中&#xff0c;执行完就销毁。 3.使用格式 类名(构造参数) 4.使用场景 临时调用成员函数 mid…

【Vue3】reactive对象类型的响应式数据

文章目录 reactive简介 reactive简介 用法: let xx reactive({xxx:“xxx”})返回值: 一个Proxy的对象&#xff0c;就是响应式对象特别注意: 数组也属于对象范畴&#xff0c;所以也能使用reactive&#xff0c;使其变成响应式数据reactive修改值时&#xff0c;不需要在值后写.v…

css 如何设置背景图片定位

在CSS中设置背景图片的位置&#xff0c;可以使用 background-position 属性。这个属性用于指定背景图像在元素背景区域中的起始位置。它可以接受多种类型的值&#xff0c;包括关键字、长度单位&#xff08;像素、百分比等&#xff09;以及组合值。 各种用法示例&#xff1a; 关…

MapReduce 机理

1.hadoop 平台进程 Namenode进程: 管理者文件系统的Namespace。它维护着文件系统树(filesystem tree)以及文件树中所有的文件和文件夹的元数据(metadata)。管理这些信息的文件有两个&#xff0c;分别是Namespace 镜像文件(Namespace image)和操作日志文件(edit log)&#xff…

书生浦语大模型实战训练营--第二期第六节--Lagent AgentLego 智能体应用搭建--homework

一、基础作业 1.完成 Lagent Web Demo 使用&#xff0c;并在作业中上传截图 根据以下命令启动成功&#xff01; 2.完成 AgentLego 直接使用部分&#xff0c;并在作业中上传截图 这是原图 使用AgentLego进行自动目标检测后&#xff0c;很明显图中的物体已经被识别出来了 二、…

Ubuntu20.04上安装ssmtp通过SMTP方式发送邮件

系统中使用脚本监控内存和磁盘使用情况&#xff0c;需要用到smtp来发送通知邮件。mailx无法在ubuntu系统上使用&#xff0c;经过尝试可以安装ssmtp来使用SMTP服务向外发送邮件。 1、安装好的Ubuntu20.04中可能已经自带了邮件系统&#xff0c;先删除它们 sudo apt autoremove p…

【QT教程】QT6Lite开发实战

QT6Lite开发实战 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费…

【python】如何通过python来发邮件,各种发邮件方式详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

MQ技术选型

消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合、异步消息、流量削锋等问题。它可以实现高性能、高可用、可伸缩和最终一致性架构&#xff0c;是大型分布式系统不可缺少的中间件。 RabbitMQ 特点&#xff1a; RabbitMQ 相当轻量级的消息队列&#xff…

英伟达一系列高质量公开课来了!

B站&#xff1a;啥都会一点的研究生公众号&#xff1a;啥都会一点的研究生 英伟达免费提供许多自学课程&#xff0c;评价肥肠高&#xff0c;有专为初学者设计的也有更进阶的内容&#xff08;提供证书&#xff09;&#xff0c;若实验室/单位基于NVIDIA Jetson进行开发&#xff…

正则表达式大全,30个正则表达式详细案例

正则表达式在中是非常强大的工具&#xff0c;以下是正则表达式的30个使用案例&#xff1a; 1. 查找以特定字符开始的数据: SELECT * FROM table WHERE column REGEXP ^a; 2. 查找以特定字符结束的数据: SELECT * FROM table WHERE column REGEXP a$; …