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

 

转载于:https://www.cnblogs.com/Zell-Dinch/p/3887736.html