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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 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
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
详解Python中with语句的用法
2015/04/15 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
区分python中的进程与线程
2020/08/13 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
拒绝黄毒毒宣传标语
2014/06/26 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
道路施工安全责任书
2014/07/24 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
使用refresh_token实现无感刷新页面
2022/04/26 Javascript