Bootstrap页面布局15 - BS带下拉菜单的按钮

带下拉菜单的按钮

<div class='btn-toolbar'>

    <div class='btn-group'>

        <a href='javascript:;' class='btn dropdown-toggle' data-toggle='dropdown'>专题 <span class='caret'></span></a>

        <ul class='dropdown-menu'>

            <li><a href='#'>自然科学</a></li>

            <li><a href='#'>社会科学</a></li>

            <li><a href='#'>人文历史</a></li>

            <li><a href='#'>地理海洋</a></li>

        </ul>

    </div>

</div>

如图：

<div class='btn-toolbar'>

    <div class='btn-group'>

        <a href='javascript:;' class='btn'>专题</a> 

        <a href='javascript:;' class='btn dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></a>

        <ul class='dropdown-menu'>

            <li><a href='#'>自然科学</a></li>

            <li><a href='#'>社会科学</a></li>

            <li><a href='#'>人文历史</a></li>

            <li><a href='#'>地理海洋</a></li>

        </ul>

    </div>

</div>

说明：

　　.caret:小三角图标

　　使用ul li 构造一个下拉列表并且给这ul添加class='dropdown'

　　最外围：.btn-toolbar

　　.btn-group:按钮群组包围.btn和ul的div