1. 程式人生 > >bootstrap按鈕下拉選單(12)

bootstrap按鈕下拉選單(12)

如需向按鈕新增下拉選單,只需要簡單地在在一個 .btn-group 中放置按鈕和下拉選單即可。
您也可以使用 <span class="caret"></span> 來指示按鈕作為下拉選單。
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">預設
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一個功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分離的連結</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一個功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分離的連結</a>
        </li>
    </ul>
</div>
按鈕下拉選單的大小
您可以使用帶有各種大小按鈕的下拉選單:.btn-lg、.btn-sm 或 .btn-xs。
按鈕上拉選單
選單也可以往上拉伸的,只需要簡單地向父 .btn-group 容器新增 .dropup 即可。