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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
PHP循环获取GET和POST值的代码
2008/04/09 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
vue实现购物车的监听
2020/04/20 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
python随机数分布random测试
2018/08/27 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
金士达面试非笔试
2012/03/14 面试题
如何写一个自定义标签
2012/12/28 面试题
诉讼授权委托书范本
2014/10/05 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年妇联工作总结
2014/11/21 职场文书
教师求职信怎么写
2015/03/20 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
监护人证明
2015/06/19 职场文书
会议营销主持词
2015/07/03 职场文书
详解nginx location指令
2022/01/18 Servers
Golang 结构体数据集合
2022/04/22 Golang