Bootstrap响应式前端框架笔记七——下拉菜单
2016-12-09 00:00
846 查看
摘要: 下拉菜单属于Bootstrap框架中组件。所谓组件,是由多个元素组成的复合控件。
默认创建的下拉菜单是隐藏的,为了演示方便,可以将ul的display属性重设:
效果如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/01/5725e65998627ca8d9e27385932f77b3.png)
使用dropdown-menu-left或者dropdown-menu-right可以实现对菜单列表的左对齐或者右对齐。
为列表的li元素添加dropdown-header类可以将此行设置为头信息行,示例如下:
效果如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/01/a5a00c7adeaae62e8bf5d1f2a97a9892.png)
为li标签设置divider类可以将此行设置为分割线,示例如下:
效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/01/2fc11a7bf84bc3c32491fc52a6c1ee3c.png)
可以为li设置disabled类来将此行选项设置为禁用,设置禁用后,此行标签也将无法点击,示例如下:
另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。
http://zyhshao.github.io/bootStrapDemo/dropList.html。
前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536
Bootstrap响应式前端框架笔记七——下拉菜单
在Bootstrap的Css框架中,下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成,一个触发按钮与一个选项列表。触发按钮dropdown-toggle类来创建,选项列表有drop-menu类来创建,这两部分元素需要包裹在一个dropdown类元素中,才能正确组合,示例代码如下:<p>正常的下拉菜单样式</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" > <li><a>白羊座</a></li> <li><a>金牛座</a></li> <li><a>摩羯座</a></li> <li><a>狮子座</a></li> </ul> </div>
默认创建的下拉菜单是隐藏的,为了演示方便,可以将ul的display属性重设:
<style> ul{ display: block !important; } </style>
效果如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/01/5725e65998627ca8d9e27385932f77b3.png)
使用dropdown-menu-left或者dropdown-menu-right可以实现对菜单列表的左对齐或者右对齐。
为列表的li元素添加dropdown-header类可以将此行设置为头信息行,示例如下:
<p>可以使用dropdown-header类来进行菜单头的设置</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" > <li class="dropdown-header">星座</li> <li><a>白羊座</a></li> <li><a>金牛座</a></li> <li class="dropdown-header">属相</li> <li><a>猴</a></li> </ul> </div>
效果如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/01/a5a00c7adeaae62e8bf5d1f2a97a9892.png)
为li标签设置divider类可以将此行设置为分割线,示例如下:
<p>可以使用divider类可以为菜单设置分割线</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">星座</li> <li> <a>白羊座</a> </li> <li> <a>金牛座</a> </li> <li class="divider"></li> <li class="dropdown-header">属相</li> <li> <a>猴</a> </li> </ul> </div>
效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/01/2fc11a7bf84bc3c32491fc52a6c1ee3c.png)
可以为li设置disabled类来将此行选项设置为禁用,设置禁用后,此行标签也将无法点击,示例如下:
<p>可以使用disabled类来禁用某些选项</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">星座</li> <li class="disabled"> <a>白羊座</a> </li> <li> <a>金牛座</a> </li> <li class="dropdown-header">属相</li> <li> <a>猴</a> </li> </ul> </div>
另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。
http://zyhshao.github.io/bootStrapDemo/dropList.html。
前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536
相关文章推荐
- 底部Popwindow形式菜单的类的封装
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 一步一步跟我学易语言之第二个易程序菜单设计
- IE右键菜单被修改
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- jQuery菜单插件用法实例
- jQuery实现向下滑出的平滑下拉菜单效果
- 点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
- 3种不同的ContextMenu右键菜单实现代码
- ASP动态级联菜单实现代码
- jQuery下拉友情链接美化效果代码分享
- BootStrap树状图显示功能
- 利用BootStrap弹出二级对话框的简单实现方法
- jQuery实现的超酷苹果风格图标滑出菜单效果代码
- Div+Js实现的带阴影菜单 微软以前网站曾用过
- Extjs学习笔记之四 工具栏和菜单
- C#实现基于XML配置MenuStrip菜单的方法
- 基于jQuery倾斜打开侧边栏菜单特效代码