bootstrap如何让dropdown menu按钮式下拉框长度一致


Posted in Javascript onApril 10, 2017

bootstrap框架提供了下拉菜单组件(dropdown),即点击一个元素或按钮,触发隐藏的列表显示出来。

1、基本代码和页面展示

按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置

data-toggle="dropdown"才能有效。对于菜单部分,设置 class="dropdown-menu"才能

自动隐藏并添加固定样式。设置 class="caret"表示箭头,可上可下。

<div class="dropdown"> 
<button class="btn btn-default" data-toggle="dropdown"> 
下拉菜单 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> 
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >资讯</a></li> 
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >产品</a></li> 
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于</a></li> 
</ul> 
</div>

bootstrap如何让dropdown menu按钮式下拉框长度一致

2、使用进阶和dropdown-menu长度问题

在解决这个问题之前,先记录bootstrap的按钮组功能(btn-group),可以将一组按钮集成在一个容器里,且相互之前没有间隔。直接贴代码和显示效果。

<span style="white-space:pre"> </span><div class="btn-group"> 
 <button type="button" class="btn btn-default">上一页</button> 
 <button type="button" class="btn btn-default">下一页</button> 
 <button type="button" class="btn btn-default">选择页数</button> 
 <div class="btn-group"> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉框 
  <i class="caret"></i> 
  </button> 
  <ul class="dropdown-menu" style="min-width:100%;"> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> 
  </ul> 
 </div> 
 </div>

bootstrap如何让dropdown menu按钮式下拉框长度一致

代码解析与总结:

首先嵌套了<div class="btn-group">容器,用于在按钮组中使用按钮式下拉框,

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">中的dropdown-toggle的作用是让按钮式下拉框的也拥有btn-group的圆边角。</span>
<i class="caret">
</i>
<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">三角图标,使用<span>也可以。
</span>

data-toggle="dropdown"是html5的标签属性,指以什么事件触发,常用的如:modal,popover,tooltips。这里指该button按钮用于下拉按钮。并且亲测在html4中使用该属性,虽然IDE会发出警告,但是仍然可以实际运行,此特性作用于html5的其他新属性,如input标签的placeholder。

<ul class="dropdown-menu" style="min-width:100%;"> min-width:100%属性用于将下拉框长度与按钮长度保持一致,因为bootstrap并没有设置这一点。原始效果如下: 

bootstrap如何让dropdown menu按钮式下拉框长度一致

以上所述是小编给大家介绍的bootstrap如何让dropdown menu按钮式下拉框长度一致,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的表格操作插件
Apr 22 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
javascript 回调函数详解
Nov 11 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
js判断是否是手机页面
Mar 17 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
ES6生成器用法实例分析
Apr 10 #Javascript
基于javascript的异步编程实例详解
Apr 10 #Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 #Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 #Javascript
js实现适配不同的屏幕大小
Apr 10 #Javascript
JS闭包可被利用的常见场景小结
Apr 09 #Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
潜说js对象和数组
2011/05/25 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python保留小数位的三种实现方法
2020/01/07 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
彪马法国官网:PUMA法国
2019/12/15 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
业务主管岗位职责
2013/11/20 职场文书
年度考核自我鉴定
2014/03/19 职场文书
销售团队口号大全
2014/06/06 职场文书
学校火灾防控方案
2014/06/09 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书