看程序学bootstrap13-组件之按钮式下拉菜单

最新推荐文章于 2024-04-03 03:18:31 发布
最新推荐文章于 2024-04-03 03:18:31 发布
阅读量128 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/93638791
版权

示例 1 : 单按钮下拉菜单

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle "  data-toggle="dropdown">
     default
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle "  data-toggle="dropdown">
     primary
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle "  data-toggle="dropdown">
     success
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle "  data-toggle="dropdown">
     info
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle "  data-toggle="dropdown">
     warning
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle "  data-toggle="dropdown">
     danger
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div style="height:100px"></div>

示例 2 : 分裂式按钮下拉菜单

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>
   <button type="button" class="btn btn-default dropdown-toggle"
      data-toggle="dropdown">
      <span class="caret"></span>
 
   </button>
   <ul class="dropdown-menu" role="menu">
     <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
   </ul>
</div>
 
<div style="height:100px"></div>

示例 3 : 按钮大小

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div class="btn-group">
    <button type="button" class="btn btn-lg btn-default dropdown-toggle " data-toggle="dropdown">
     大号
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   
  
<div class="btn-group">
    <button type="button" class="btn btn btn-default dropdown-toggle " data-toggle="dropdown">
     默认
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 
  
<div class="btn-group">
    <button type="button" class="btn btn-sm btn-default dropdown-toggle " data-toggle="dropdown">
     小号
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 
  
<div class="btn-group">
    <button type="button" class="btn btn-xs btn-default dropdown-toggle " data-toggle="dropdown">
     更小
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 
   
<div style="height:100px"></div>

示例 4 : 向上弹出式菜单

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
   
<div style="height:150px"></div>
 
<div class="btn-group dropup">
    <button type="button" class="btn btn-default dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown">
     default
      <span class="caret"></span>         
    </button>
       
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
   
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap中导航和下拉列表
qq_54998648的博客
05-25 1918
bootstrap-导航和下拉列表
小程序-dropdownmenu 下拉菜单
06-26
dropdownmenu一个写好的微信小程序帅选条件框，多条件筛选，下拉菜单，直接引用组件就可以 读懂并灵活运用必须具有html，css ，js基础，除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
【Bootstrap3.0建站笔记二】按钮可下拉弹出层
人生若南柯一梦
06-20 1821
【Bootstrap3.0建站笔记二】按钮可下拉弹出层
bootstrap 下拉菜单组件 与 按钮组组件 与 按钮式下拉菜单
purple_lumpy的博客
09-09 1016
下拉菜单组件 使用bootstrap 下拉菜单组件，需要引入jquery 与 bootstrap文件夹下js目录下的 bootstrap.js。 &lt;script src="jq/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt; 下拉菜单，都是包含在...
Bootstrap学习：按钮下拉菜单
逸轩
09-02 588
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用来指示按钮作为下拉菜单。  下面的实例演示了一个基本的简单的按钮下拉菜单： html> head> title>Bootstrap 实例 - 基本的按钮下拉菜单title> link href="/boo
7.2.4 分裂式按钮下拉菜单
测试
07-29 770
7.2.4 分裂式按钮下拉菜单程序示例document.querySelector(".post-body > ul").style.display="none"7.2.4 分裂式按钮下拉菜单所谓分裂式按钮下拉菜单,就是让按钮旁边的三角箭头来激发下拉菜单,因此需要将按钮旁边的三角箭头也变成按钮,且为其指定data-toggle="dropdown"属性,建议增加.dropdown-toggle样式...
bootstrap组件之按钮式下拉菜单小结
08-31
总的来说，Bootstrap 的按钮式下拉菜单是一个功能强大且易于使用的组件，能够帮助开发者快速构建具有专业外观和交互体验的网页界面。无论是单按钮还是分裂式，无论是常规尺寸还是定制大小，甚至是弹出方向，都可以...
基于bootstrap按钮式下拉菜单组件的搜索建议插件
12-12
本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码，供大家参考，具体内容如下 ...meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插
Bootstrap CSS组件之按钮下拉菜单
08-31
分离式下拉菜单将主按钮与下拉箭头分开，使得用户能更清晰地分辨按钮和下拉菜单。在这种模式下，`.dropdown-toggle`与主按钮`.btn`分别独立，点击下拉箭头才会显示菜单。例如： ```html <div class="btn-group"> ...
小程序-dropdownmenu
08-14
今天给大家带来的是在开发小程序过程中遇到一个下拉菜单
bootstrap下拉菜单与滚动监视器学习笔记（2-2 下拉菜单--属性声明式方法（一））
hellochenlu的博客
12-23 599
属性声明式方法： 一般下拉菜单都是出现在导航条中，比如下图的一个效果，用户点击带有三角形的菜单项都会弹出下拉菜单项： W3cplus 教程 CSS3 HTML5 Sass
bootstraptable表头添加自定义搜索框（带文本,下拉,弹窗多选搜索）
最新发布
2401_84094908的博客
04-03 800
shadeClose: true, //开启遮罩关闭。btn: [‘确认’, ‘取消’], //按钮。title: ‘前处理工序进度’,title: ‘色号/色名’,title: ‘开卡日期’,title: ‘订单类型’,title: ‘经营方式’,title: ‘品种信息’,title: ‘配方组合’,title: ‘计划米数’title: ‘卡号’,title: ‘批号’,title: ‘客户’,title: ‘颜色’,title: ‘工序’,//初始化过滤下拉内容。
创建小程序下拉菜单
小白的一次小程序编程的各种记录
03-07 2610
创建小程序下拉菜单 菜单的按钮箭头是利用边框线加旋转功能实。 利用css display: none;隐藏菜单，和.dropdown:hover .dropdown-content { display: block;显示菜单详见代码 wxml内容 &amp;lt;!--下拉菜单 --&amp;gt; &amp;lt;view class='weui-cell '&amp;gt; &amp;lt;!--下...
小程序动画下拉菜单
张火火
07-24 1156
.product-list { min-height: 100vh; background-color: #f0f0f0; /* padding-top: 80rpx; */ box-sizing: border-box; } /*条件选择*/ .choice-bar { position: fixed; /* top: 0; */ display: flex; ...
小程序 下拉选框
Andybfw的博客
08-15 1357
具体参考这个的链接 https://www.cnblogs.com/xjwy/p/8489256.html
Bootstrap系列之下拉菜单（Dropdowns）
热门推荐
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
bootstarp-table 最后一行操作按钮下拉菜单挤压表格
weixin_43029992的博客
02-20 317
问题： 解决： 找到bootstrap-table.css中 .fixed-table-body { overflow-x: auto; overflow-y: auto; height: 100%; } 修改为 .fixed-table-body { overflow:visible !important; height: 100%; }
Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现
weixin_38201175的博客
11-28 2868
Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现1) 接到任务2) 实现过程3) 想象 VS 现实 1) 接到任务 这周接到一个关于前端的任务，由于我是前端菜鸡，只能靠投机取巧来实现。需求描述：表格中最后一列的操作列中由于按钮太多，需要隐藏一部分。点击竖着排列的三个点（更多图标），弹出隐藏的按钮。完毕！ 2) 实现过程 一般遇到这种不会的问题就是上网找类似。无果，主要因...
微信小程序-自定义下拉框组件
weixin_41635311的博客
09-28 1万+
知识点：组件，animation，获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框，所以只有自定义。自定义的话，可以选择模板的方式，也可以选择组件的方式来创建。 这次我选择了组件，这样只需引入组件和添加数据，其它的不用管，就能实现多个地方重复使用了。 第一步：创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方，所以有了下面的目录结构   （1） ...
"Bootstrap三大组件：小图标、下拉菜单和按钮
综上所述，Bootstrap的图标菜单按钮组件包括了小图标组件、下拉菜单组件和各种按钮组件。这些组件不仅丰富多样，而且都有详细的文档说明和丰富的示例代码。通过这些组件，开发者可以快速搭建现代化的网站和 Web 应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值