Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮
2018-06-12 19:35
549 查看
四、Bootstrap组件设计
1、Bootstrap下拉菜单
Bootstrap下拉菜单组建,主要包括标签、对齐方式、禁用和子菜单等方面的内容。
标签
下拉菜单是可以用于展示可切换、有关联的菜单链接。创建下拉菜单需要使用列表标签<ul>-<li>,且下拉菜单的触发器和整个下拉菜单都需要包裹在.dropdowm类中,又或者声明为“position:relative;”的其他页面元素中。
<div class="bs-docs-example"> <div class="dropdown clearfix"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">下拉菜单A</a></li> <li><a tabindex="-1" href="#">下拉菜单B</a></li> <li><a tabindex="-1" href="#">下拉菜单C</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">下拉菜单分割线D</a></li> <li><a tabindex="-1" href="#">下拉菜单分割线E</a></li> </ul> </div> </div>
对齐方式
Bootstrap框架可以为下拉菜单选择不同的对齐方式,默认下拉菜单是左对齐的,使用.pull-right类可以实现右对齐。<div class="bs-docs-example"> <div class="dropdown clearfix"> <ul class="dropdown-menu pull-left" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">左对齐下拉菜单A</a></li> <li><a tabindex="-1" href="#">左对齐下拉菜单B</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">左对齐下拉菜单分割线C</a></li> </ul> </div> <div class="dropdown clearfix"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">右对齐下拉菜单A</a></li> <li><a tabindex="-1" href="#">右对齐下拉菜单B</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">右对齐下拉菜单分割线C</a></li> </ul> </div> </div>
禁用
如果需要禁用下拉菜单的某一项,可以在<li>标签内增加.disabled类来实现。<div class="bs-docs-example"> <div class="dropdown clearfix"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">下拉菜单A</a></li> <li class="disabled"><a tabindex="-1" href="#">下拉菜单B</a></li> <li><a tabindex="-1" href="#">下拉菜单C</a></li> <li class="divider"></li> <li class="disabled"><a tabindex="-1" href="#">下拉菜单分割线D</a></li> <li><a tabindex="-1" href="#">下拉菜单分割线E</a></li> </ul> </div> </div>
下拉子菜单
Bootstrap框架默认子菜单是向右下方弹出的,还可以实现向左或向上的菜单。在<ul>中加入.pull-right类实现下拉菜单右对齐。在<li>中添加.pull-left类实现子菜单左弹出。<div class="bs-docs-example"> <div class="dropdown clearfix"> <!-- <div class="dropup clearfix"> --> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li><a tabindex="-1" href="#">下拉菜单A</a></li> <li><a tabindex="-1" href="#">下拉菜单B</a></li> <li class="divider"></li> <li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">弹出子下拉菜单</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">子下拉菜单A</a></li> <li><a tabindex="-1" href="#">子下拉菜单B</a></li> <li><a tabindex="-1" href="#">子下拉菜单C</a></li> </ul> </li> </ul> </div> </div>
阅读更多
相关文章推荐
- Bootstrap框架学习(四)——Bootstrap组件设计之按钮组
- Bootstrap框架学习(五)——Bootstrap插件设计之下拉菜单、滚动监听、标签页
- Bootstrap框架学习(四)——Bootstrap组件设计之导航
- Bootstrap框架学习(四)——Bootstrap组件设计之分页、标签与徽章、进度条、字体
- Bootstrap框架学习(五)——Bootstrap插件设计之按钮
- Bootstrap入门(十)组件4:按钮组与下拉菜单结合
- Bootstrap学习总结笔记(8)-- 基本组件之按钮组
- Bootstrap基本组件学习笔记之按钮组(8)
- 学习笔记8--bootstrap:布局组件之“下拉菜单”
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- BootStrap--CSS组件--按钮下拉菜单
- Bootstrap组件---下拉菜单,多级菜单 ,按钮
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- Bootstrap框架学习(五)——Bootstrap插件设计之模态对话框
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
- bootstrap 学习笔记 - 5 (Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单)
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- Bootstrap组件学习笔记(二)——按钮组和输入框组
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)