原文:https://www.geeksforgeeks.org/bootstrap-5-modal/
Bootstrap 5 是 Bootstrap 的最新主要版本，在该版本中，他们修改了用户界面并进行各种更改。Modals 用于向您的站点添加对话框，用于灯箱、用户通知或完全自定义的内容。模态是用 HTML、CSS 和 Javascript 构建的。它们位于文档中的所有内容之上，并从中移除滚动，以便模态内容改为滚动。
语法:
示例:该示例用于显示 Bootstrap 5 中一个模态的工作情况。 触发模式前输出: 触发模态后输出: 工具提示:可以添加到模态内部。当模态关闭时，内的工具提示也会自动消失。 输出: Popovers: 可以加在情态里面。当模态关闭时，内的波波头也会自动消失。 输出: 使用网格:我们可以通过嵌套在一个模型中使用 Bootstrap 网格系统。内的容器-流体。模体。然后，像在其他地方一样使用普通的网格系统类。 输出: 变化的模态内容:我们可以用下面给出的不同数据触发相同的模态。 输出不触发任何模态: 可选尺寸引导模式的默认最大宽度为 500 像素。Bootstrap 提供了通过使用如下所述的特定类来自定义模式大小的选项: 模态-xl: 这提供了最大的模态尺寸，最大宽度为 1140px。 输出: 模态-lg: 这提供了最大宽度为 800px 的大模态尺寸。 输出: 模态 sm: 这提供了最大的模态尺寸，最大宽度为 300px。 输出: Contents...
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
GeeksforGeeks
T3】例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
Tooltips in a modal
data-toggle="tooltip"
title="GeeksforGeeks"
data-placement="right">
Hover over me
T3】例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
Popover in a modal
data-toggle="popover"
title="This is GeeksforGeeks"
data-cOntent=
"Portal for CS Geeks">
Toggle popover
例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
>
This is 4 grids
>
This is 8 grids
>
This is 12 grids
T3】例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
New message
class="form-control"
id="recipient-name" />
输出为点击发送邮件至@ geeks forgeeks:
输出为点击发送邮件至作者@ gurrung:
T3】例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
GeeksforGeeks
T3】例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
GeeksforGeeks
T3】例:
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
>
GeeksforGeeks
id="exampleModal">
Modal title
GeeksforGeeks
写下你的评论吧 !
推荐阅读
本文目录一览：1、如何在IIS中执行Python脚本 ...
[详细]
蜡笔小新 2023-10-17 19:41:52
本文整理了Java中java.lang.NoSuchMethodError.getMessage()方法的一些代码示例，展示了NoSuchMethodErr ...
[详细]
蜡笔小新 2023-12-09 17:50:11
篇首语：本文由编程笔记#小编为大家整理，主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识，希望对你有一定的参考价值。一、加密加密 ...
[详细]
蜡笔小新 2023-12-14 15:18:35
目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ...
[详细]
蜡笔小新 2023-12-14 13:56:20
转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一，为我们带来了全新的界面风格和设计语言。看起来很受欢迎 ...
[详细]
蜡笔小新 2023-12-13 16:11:00
本文介绍了FineReport平台数据分析图表显示部分系列接口的应用场景和实现思路。当图表系列较多时，用户希望可以自己设置哪些系列显示，哪些系列不显示。通过调用FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex).setSeriesVisible()接口，可以获取需要显示的系列图表对象，并在表单中显示这些系列。本文以决策报表为例，详细介绍了实现方法，并给出了示例。 ...
[详细]
蜡笔小新 2023-12-12 15:32:43
JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ...
[详细]
蜡笔小新 2023-12-11 11:40:52
本文介绍了C#中生成随机数的三种方法，并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法，但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数，进一步突显了这个问题。文章指出，随机数生成在任何编程语言中都是必备的功能，但Random类生成的随机数并不可靠。最后，提出了需要寻找其他可靠的随机数生成方法的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:15:30
本文介绍了Redis的基础数据结构string的应用场景，并以面试的形式进行问答讲解，帮助读者更好地理解和应用Redis。同时，描述了一位面试者的心理状态和面试官的行为。 ...
[详细]
蜡笔小新 2023-12-14 14:02:42
本文介绍了在CentOS/RHEL 7/6，Fedora 27/26/25上安装JAVA 9的详细步骤和方法。首先需要下载最新的Java SE Development Kit 9发行版，然后按照给出的Shell命令行方式进行安装。详细的步骤和方法请参考正文内容。 ...
[详细]
蜡笔小新 2023-12-13 09:26:47
项目重构的Git地址：https:github.comrazerdpFriendCircletreemain-dev项目同步更新的文集：http:www.jianshu.comno ...
[详细]
蜡笔小新 2023-12-11 19:09:56
在JavaScript中，函数没有重载的概念，如果声明了多个重名的函数，不管函数的形参个数是否一样，只有最后一个有效。如果调用函数时传入的参数个数与函数定义时的参数个数不符，会出现不同的情况。函数调用时，传入的参数个数少于函数定义时的参数个数，未传入的参数会被当做undefined处理，可能会导致错误。而传入的参数个数多于函数定义时的参数个数，多余的参数不会被使用，但不会报错。 ...
[详细]
蜡笔小新 2023-12-11 14:48:06
Vue基础一、什么是Vue1.1概念Vue(读音vjuː，类似于view)是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不 ...
[详细]
蜡笔小新 2023-10-17 19:45:53
祥荣华贵
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有