首页 > 代码库 > BootStrap的菜单的快速创建

BootStrap的菜单的快速创建

2024-09-01 07:07:34   215人阅读

在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的菜单的快速创建


联系
我们