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实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JavaScript Array对象详解
Mar 01 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
深入了解Vue.js 混入(mixins)
Jul 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
用python爬取租房网站信息的代码
2018/12/14 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Django如何使用redis作为缓存
2020/05/21 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
高级销售员求职信
2013/10/25 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2015年统战工作总结
2015/05/19 职场文书
php实例化对象的实例方法
2021/11/17 PHP
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android