8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

下拉菜单

dropdown

对齐方式：

.dropdown-menu-right    

.dropdown-menu-left

<div class="container">

        <div class="dropdown">  默认向下，向上的设置为 .dropup

            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

                下拉菜单

                <span class="caret"></span>    //向下箭头

            </button>

            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">

                <li class="dropdown-header">数字选择</li>    //下拉菜单标题

                <li><a href="#" role="menuitem">一</a></li>

                <li><a href="#" role="menuitem">二</a></li>

                <li><a href="#" role="menuitem">三</a></li>

                <li><a href="#" role="menuitem">四</a></li>

                <li role="presentation" class="divider"></li>   //分割线

                <li><a href="#" role="menuitem">1</a></li>

                <li><a href="#" role="menuitem">2</a></li>

                <li><a href="#" role="menuitem">3</a></li>

                <li><a href="#" role="menuitem">4</a></li>

            </ul>

        </div><!--end dropdown下拉菜单-->

</div>

 

<script src="js/jquery.mini.js"></script>

<script src="js/bootstrap.min.js"></script>

 

按钮组

<div class="container">

    <div class="btn-group btn-group-justified">

        <div class="btn-group">

            <button type="button" class="btn btn-default">left</button>

        </div>

        <div class="btn-group">

            <button type="button" class="btn btn-default">middle</button>

        </div>

        <div class="btn-group">

            <button type="button" class="btn btn-default">right</button>

        </div>

    </div>

</div>

 

按钮式下拉菜单

<div class="container">

    <div class="btn-group">

        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

            按钮式下拉菜单

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="menu">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

        </ul>

    </div>

</div>

<script src="js/jquery.mini.js"></script>

<script src="js/bootstrap.min.js"></script>

 

分裂式下拉菜单

<div class="container">

    <div class="btn-group">

        <button type="button" class="btn btn-info">按钮式下拉菜单</button>

        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="menu">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

        </ul>

    </div>

</div>

<script src="js/jquery.mini.js"></script>

<script src="js/bootstrap.min.js"></script>

 

按钮尺寸

<button type="button" class="btn btn-info btn-lg">按钮式下拉菜单</button>

<button type="button" class="btn btn-info btn-lg dropdown-toggle" data-toggle="dropdown">

btn-lg   btn-sm    btn-xs

 

使箭头向上

<div class="btn-group dropup">

        <button type="button" class="btn btn-info">按钮式下拉菜单</button>

        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="menu">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

        </ul>

    </div>