Bootstrap按钮下拉菜单添加方法

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

创新互联是专业的蓬安网站建设公司，蓬安接单;提供成都网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行蓬安网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

Bootstrap 目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。也可以使用来指示按钮作为下拉菜单。

下面的实例演示了一个基本的简单的按钮下拉菜单：


  
       
   type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认                
   
      "menu">         
               "#">功能                 
               "#">另一个功能                 
               "#">其他                 
            
               "#">分离的链接             
  
  

  
       
   type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始                
   
      "menu">         
               "#">功能                 
               "#">另一个功能                 
               "#">其他                 
            
               "#">分离的链接

尝试一下 » 结果如下所示：

分割的按钮下拉菜单

分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。

实例


  
       
   type="button" class="btn btn-default">默认    
   type="button" class="btn btn-default dropdown-toggle"        data-toggle="dropdown">                切换下拉菜单        
   
      "menu">         
   "#">功能         
   "#">另一个功能         
   "#">其他         
            
   "#">分离的链接     
  
  

  
       
   type="button" class="btn btn-primary">原始    
   type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">                切换下拉菜单        
   
      "menu">         
   "#">功能         
   "#">另一个功能         
   "#">其他         
            
   "#">分离的链接

尝试一下 » 结果如下所示：

按钮下拉菜单的大小

您可以使用带有各种大小按钮的下拉菜单：.btn-lg、.btn-sm 或 .btn-xs。

实例


  
       
   type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认                
   
      "menu">         
               "#">功能                 
               "#">另一个功能                 
               "#">其他                 
            
               "#">分离的链接             
  
  

  
       
   type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">原始                
   
      "menu">         
               "#">功能                 
               "#">另一个功能                 
               "#">其他                 
            
               "#">分离的链接             
  
  

  
       
   type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">成功            
   
      "menu">         
               "#">功能                 
               "#">另一个功能                 
               "#">其他                 
            
               "#">分离的链接

尝试一下 » 结果如下所示：

按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。

实例


  
   "margin-left:50px; margin-top:200px">    
   
    "btn-group dropup">        
    type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认                            
    
      "menu">             
                   "#">功能                         
                   "#">另一个功能                         
                   "#">其他                         
                
                   "#">分离的链接                     
      
       
   
    "btn-group dropup">        
    type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始                            
    
      "menu">             
                   "#">功能                         
                   "#">另一个功能                         
                   "#">其他                         
                
                   "#">分离的链接

尝试一下 » 结果如下所示：

分享文章：Bootstrap按钮下拉菜单添加方法
网页路径：http://www.csdahua.cn/qtweb/news45/268845.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容

ChatGPT知识

行业网站建设