四、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>