自举5模态

作者：祥荣华贵 | 来源：互联网 | 2023-10-11 12:40

自举5模态原文:https://www.geeksforge

自举 5 模态

原文:https://www.geeksforgeeks.org/bootstrap-5-modal/

Bootstrap 5 是 Bootstrap 的最新主要版本，在该版本中，他们修改了用户界面并进行各种更改。Modals 用于向您的站点添加对话框，用于灯箱、用户通知或完全自定义的内容。模态是用 HTML、CSS 和 Javascript 构建的。它们位于文档中的所有内容之上，并从中移除滚动，以便模态内容改为滚动。

语法:

Contents...

示例:该示例用于显示 Bootstrap 5 中一个模态的工作情况。

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】例:

             >
            
                GeeksforGeeks
            

            
            
            
                             id="exampleModal">
                
                    
                        
                            Modal title

                            
                        

                        
                            Tooltips in a modal

                                                           data-toggle="tooltip" 
                               title="GeeksforGeeks" 
                               data-placement="right">
                              Hover over me

输出:

Popovers: 可以加在情态里面。当模态关闭时，内的波波头也会自动消失。
T3】例:

             >
            
                GeeksforGeeks
            

            
            
            
                             id="exampleModal">
                
                    
                        
                            
                              Modal title

                            
                        

                        
                            Popover in a modal

                                                           data-toggle="popover" 
                               title="This is GeeksforGeeks" 
                               data-cOntent=
                               "Portal for CS Geeks">
                              Toggle popover

输出:

使用网格:我们可以通过嵌套在一个模型中使用 Bootstrap 网格系统。内的容器-流体。模体。然后，像在其他地方一样使用普通的网格系统类。
例:

             >
            
                GeeksforGeeks
            

            
            
            
                             id="exampleModal">
                
                    
                        
                            Modal title

                            
                        

                        
                            
                                
                                                                             >
                                      This is 4 grids

                                                                             >
                                      This is 8 grids

                                

                                
                                                                             >
                                      This is 12 grids

输出:

变化的模态内容:我们可以用下面给出的不同数据触发相同的模态。
T3】例:

             >
            
                GeeksforGeeks
            

            
            
            
            
            
                
                    
                        
                            
                              New message

                            
                        

                        
                            
                                
                                                                               class="col-form-label">
                                      Recipient:
                                                                               class="form-control"
                                           id="recipient-name" />
                                

                                
                                                                               class="col-form-label">
                                      Message:
                                                                                  id="message-text"><br>

输出不触发任何模态:

输出为点击发送邮件至@ geeks forgeeks:

输出为点击发送邮件至作者@ gurrung:

可选尺寸引导模式的默认最大宽度为 500 像素。Bootstrap 提供了通过使用如下所述的特定类来自定义模式大小的选项:

modal-xl

模态 lg

模态-sm

模态-xl: 这提供了最大的模态尺寸，最大宽度为 1140px。
T3】例:

             >
            
                GeeksforGeeks
            

            
            
            
                             id="exampleModal">
                
                    
                        
                            
                              Modal title

                            
                        

                        
                            GeeksforGeeks

输出:

模态-lg: 这提供了最大宽度为 800px 的大模态尺寸。
T3】例:

             >
            
                GeeksforGeeks
            

            
            
            
                             id="exampleModal">
                
                    
                        
                            
                              Modal title

                            
                        

                        
                            GeeksforGeeks

输出:

模态 sm: 这提供了最大的模态尺寸，最大宽度为 300px。
T3】例:

             >
            
                GeeksforGeeks
            

            
            
            
                             id="exampleModal">
                
                    
                        
                            
                              Modal title

                            
                        

                        
                            GeeksforGeeks

输出:

推荐阅读

list
Python3爬虫入门：pyspider的基本使用[python爬虫入门]

Python学习网有大量免费的Python入门教程，欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]

蜡笔小新 2024-11-22 18:00:41
go
如何在没有提交按钮的情况下提交HTML表单？

探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]

蜡笔小新 2024-11-22 17:48:42
list
深入解析Unity3D游戏开发中的音频播放技术

在游戏开发中，音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频，包括背景音乐和效果音效，并介绍实现这些功能的具体步骤。 ... [详细]

蜡笔小新 2024-11-22 21:05:22
数组
Vue CLI 基础入门指南

本文详细介绍了 Vue CLI 的基础使用方法，包括环境搭建、项目创建、常见配置及路由管理等内容，适合初学者快速掌握 Vue 开发环境。 ... [详细]

蜡笔小新 2024-11-22 14:48:35
default
JavaScript 页面卸载事件详解 (onunload)

当用户从页面离开时（如关闭页面或刷新页面），会触发 onunload 事件，此时可以执行预设的脚本。需要注意的是，不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]

蜡笔小新 2024-11-22 14:17:44
default
探索Java 11中的ZGC垃圾收集器

Java 11引入了一种新的垃圾收集器——ZGC，由Oracle公司研发，旨在支持TB级别的内存容量，并保证极低的暂停时间。本文将探讨ZGC的开发背景、技术特点及其潜在的应用前景。 ... [详细]

蜡笔小新 2024-11-22 13:36:53
default
利用Node.js实现PSD文件的高效切图

本文介绍了如何通过Node.js及其psd2json模块，快速实现PSD文件的自动化切图过程，以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率，还简化了从设计稿到实际应用的转换流程。 ... [详细]

蜡笔小新 2024-11-22 13:21:24
random
为何Compose与Swarm之后仍有Kubernetes的诞生？

探讨在已有Compose和Swarm的情况下，Kubernetes是如何以其独特的设计理念和技术优势脱颖而出，成为容器编排领域的领航者。 ... [详细]

蜡笔小新 2024-11-22 09:26:11
node.js
Node.js 后端开发指南与源码解析

本文探讨了Node.js后端开发的基础知识，包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]

蜡笔小新 2024-11-21 20:56:59
node.js
深入理解C++中的自定义String类实现

本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程，不仅能够检验开发者对C++基础知识的掌握程度，还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能，如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]

蜡笔小新 2024-11-22 19:21:22
node.js
CentOS 服务器自定义密码策略

随着Linux操作系统的广泛使用，确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则，以增强系统的安全性。 ... [详细]

蜡笔小新 2024-11-22 19:15:42
list
DedeCMS 手机端站点配置与优化指南

本文详细介绍如何安装和配置DedeCMS的移动端站点，包括新版本安装、老版本升级、模板适配以及必要的代码修改，以确保移动站点的正常运行。 ... [详细]

蜡笔小新 2024-11-22 18:44:25
list
3DSMAX制作超现实的体育馆模型

这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法，教程制作出来的体育馆模型非常地不错，不过教程有点难度，需要有一定基础的朋友学习，推荐到脚本之家，喜欢的朋友可 ... [详细]

蜡笔小新 2024-11-22 16:07:10
list
HDU 6116 路径计数优化

本文探讨了使用普通生成函数和指数生成函数解决组合与排列问题的方法，特别是在处理特定路径计数问题时的应用。文章通过详细分析和代码实现，展示了如何高效地计算在给定条件下不相邻相同元素的排列数量。 ... [详细]

蜡笔小新 2024-11-22 13:11:20
list
在Notepad++中配置Markdown语法高亮及实时预览功能

本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能，包括必要的插件安装和设置步骤。 ... [详细]

蜡笔小新 2024-11-22 13:03:49

祥荣华贵

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章