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

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