欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮

程序员文章站 2024-02-02 12:26:40
...

四、Bootstrap组件设计

1、Bootstrap下拉菜单

    Bootstrap下拉菜单组建,主要包括标签、对齐方式、禁用和子菜单等方面的内容。

    标签

    下拉菜单是可以用于展示可切换、有关联的菜单链接。创建下拉菜单需要使用列表标签<ul>-<li>,且下拉菜单的触发器和整个下拉菜单都需要包裹在.dropdowm类中,又或者声明为“position:relative;”的其他页面元素中。

Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮

<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类可以实现右对齐。

    Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮

<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类来实现。
Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮
<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类实现子菜单左弹出。

Bootstrap框架学习(四)——Bootstrap组件设计之下拉菜单与按钮

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