首页 > 代码库 > BootStrap的菜单的快速创建
BootStrap的菜单的快速创建
在bootstrap的3.0版本及以上时,菜单的创建有所改变。
现在,我们只需记住3个类 dropdown open dropdown-menu。
前两个是为ul 列表的父元素用的,最后一个是给ul 用的。
现在直接上代码。
<div class="dropdown open"> <ul class="dropdown-menu "> <li><a href="javascript:void(0)">11111111111111</a></li> <li><a href="javascript:void(0)">11111111111111</a></li> <li><a href="javascript:void(0)">11111111111111</a></li> </ul> </div>
效果如下:
现在稍微升级下,如果想给菜单也小小的分个类呢? 这将用到 .dropdown-header 类。
只需在<li></li>上添加这个类变成<li class="dropdown-header "></li>.
直接上代码:
<div class="dropdown open"> <ul class="dropdown-menu pull-right"> <!--dropdown-header 一个菜单的分标题--> <li class="dropdown-header">可选项1</li> <li><a href="javascript:void(0)">11111111111111</a></li> <li><a href="javascript:void(0)">11111111111111</a></li> <li><a href="javascript:void(0)">11111111111111</a></li> <li class="divider"></li> <li class="dropdown-header">可选项2</li> <li><a href="javascript:void(0)">22222222222222</a></li> <li><a href="javascript:void(0)">1333333333333311</a></li> <li><a href="javascript:void(0)">111444444444411111</a></li> </ul>
</div>
效果如图:
再升级下:我想给选中的li加一个高亮显示,这时要加上 active 类。 <li class="active"><a href="javascript:void(0)">11111111111111</a></li>
效果如下:
如果想让某个li不能用,直接加上disable类。
直接上图:
加上红框的是给这个li禁用的,鼠标画上去的时候会有禁用标识出现,同时颜色会变浅。
虽然禁用看上去这个选项不能用了,但是,其行为还是需要javascript来禁用。
BootStrap的菜单的快速创建
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。