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 相关文章推荐
浏览器页面区域大小的js获取方法
Sep 21 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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
关于手调机和数调机的选择
2021/03/02 无线电
php生成html文件方法总结
2014/12/01 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python实现斐波那契数列的方法示例
2017/01/12 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python用700行代码实现http客户端
2021/01/14 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
企业出纳岗位职责
2014/03/12 职场文书
社区服务活动总结
2014/05/07 职场文书
中学校园广播稿
2015/08/18 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang
MySQL RC事务隔离的实现
2022/03/31 MySQL