良许Linux教程网 干货合集 Bootstrap按钮下拉菜单添加方法

Bootstrap按钮下拉菜单添加方法

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

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

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

如何使用 Bootstrap class 向按钮添加下拉菜单如何使用 Bootstrap class 向按钮添加下拉菜单

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

       
    "menu">        
  •            "#">功能        
  •        
  •            "#">另一个功能        
  •        
  •            "#">其他        
  •        
  •        
  •            "#">分离的链接        
  •    
       
    "menu">        
  •            "#">功能        
  •        
  •            "#">另一个功能        
  •        
  •            "#">其他        
  •        
  •        
  •            "#">分离的链接        
  •    

尝试一下 » 结果如下所示: 如何使用 Bootstrap class 向按钮添加下拉菜单如何使用 Bootstrap class 向按钮添加下拉菜单

分割的按钮下拉菜单

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

实例

           
           

尝试一下 » 结果如下所示: 如何使用 Bootstrap class 向按钮添加下拉菜单如何使用 Bootstrap class 向按钮添加下拉菜单

按钮下拉菜单的大小

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

实例

       
    "menu">        
  •            "#">功能        
  •        
  •            "#">另一个功能        
  •        
  •            "#">其他        
  •        
  •        
  •            "#">分离的链接        
  •    
       
    "menu">        
  •            "#">功能        
  •        
  •            "#">另一个功能        
  •        
  •            "#">其他        
  •        
  •        
  •            "#">分离的链接        
  •    
       
    "menu">        
  •            "#">功能        
  •        
  •            "#">另一个功能        
  •        
  •            "#">其他        
  •        
  •        
  •            "#">分离的链接        
  •    

尝试一下 » 结果如下所示: 如何使用 Bootstrap class 向按钮添加下拉菜单如何使用 Bootstrap class 向按钮添加下拉菜单

按钮上拉菜单

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

实例

"margin-left:50px; margin-top:200px">    
"btn-group dropup">                
    "menu">            
  •                "#">功能            
  •            
  •                "#">另一个功能            
  •            
  •                "#">其他            
  •            
  •            
  •                "#">分离的链接            
  •        
   
   
"btn-group dropup">                
    "menu">            
  •                "#">功能            
  •            
  •                "#">另一个功能            
  •            
  •                "#">其他            
  •            
  •            
  •                "#">分离的链接            
  •        
   

尝试一下 » 结果如下所示: 如何使用 Bootstrap class 向按钮添加下拉菜单如何使用 Bootstrap class 向按钮添加下拉菜单

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部