bootstrap的模态框怎么创建

本篇内容主要讲解“bootstrap的模态框怎么创建”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“bootstrap的模态框怎么创建”吧!

创新互联是一家集网站建设,西湖企业网站建设,西湖品牌网站建设,网站定制,西湖网站建设报价,网络营销,网络优化,西湖网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

bootstrap的模态框是覆盖在父窗体上的,是一个子窗体;模态框的目的是显示来自一个单独的源内容,可以在不离开父窗体的情况下有一些互动,子窗体可以提供信息交互等等,可以通过添加“.modal-sm”类来创建一个小模态框,添加“.modal-lg”类创建一个大模态框。

本教程操作环境:Windows10系统、bootstrap5版、DELL G3电脑

bootstrap的模态框

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

如何创建模态框

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




  Bootstrap 实例
  
  
  
  
  
  



  

模态框实例

          打开模态框                                                          模态框头部           ×         
                                模态框内容..         
                                关闭         
          
          

输出结果:

bootstrap的模态框怎么创建

模态框尺寸

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

尺寸类放在

元素的 .modal-dialog 类后 :




  Bootstrap 实例
  
  
  
  
  
  



  

模态框实例

          打开模态框                                                          模态框头部           ×         
                                模态框内容..                                          关闭                               

输出结果:

bootstrap的模态框怎么创建

到此,相信大家对“bootstrap的模态框怎么创建”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


文章名称:bootstrap的模态框怎么创建
转载注明:http://pwwzsj.com/article/ishpdj.html