2 flat logo on transparent 256
2018-07-22

Bootstrapでドロップダウンボタンを設定する|コピペで動くサンプル付き

Button 211

Bootstrapでドロップダウンボタンを設定する方法を記載します。

Bootstrapのドロップダウンボタンは hoverすると色が変わったりするなど、ドロップダウンボタン用のデザインが用意されているので、普通のhtmlで設定するより デザイン性に優れています。

以下のようなナビゲーションバーへドロップダウンボタンを設定する事も可能です

ドロップダウン画像

今回もコピペで動くサンプルコード付きです。

サンプルコード解説

以下コードをメモ帳などに貼り付けコピペすれば確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ドロップダウンボタンのテストページ</title>
    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .m-30 {
            margin-top: 30px;
        }
    </style>
</head>

<!--以下通常のドロップボタン-->

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" 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>
    </ul>
</div>

<!--以下はナビゲーションバーの設定-->

<ul class="nav nav-tabs m-30">
    <li role="presentation">
        <a href="#">ナビゲーションホーム</a>
    </li>
    <li role="presentation" class="dropdown active">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
            ナビゲーションメニュー1 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">ドロップボタン選択肢1−1</a>
            </li>
            <li>
                <a href="#">ドロップボタン選択肢1−2</a>
            </li>
            <li >
                <a href="#">ドロップボタン選択肢1−3</a>
            </li>
        </ul>
    </li>
    <li role="presentation" class="dropdown active">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
            ナビゲーションメニュー2 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">ドロップボタン選択肢2−1</a>
            </li>
            <li>
                <a href="#">ドロップボタン選択肢2−2</a>
            </li>
            <li>
                <a href="#">ドロップボタン選択肢2−3</a>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

サンプルコード解説

data-toggle属性のdropdownはボタンの初期値に設定されているテキストの表示と非表示を設定します。

は選択肢の下矢印の表示用の要素です

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        ここをクリック
        <span class="caret"></span>
    </button>

dropdown-menuは選択肢を設定する要素に設定します。

<ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">ドロップボタン選択肢1−1</a>
            </li>
            <li>
                <a href="#">ドロップボタン選択肢1−2</a>
            </li>
            <li >
                <a href="#">ドロップボタン選択肢1−3</a>
            </li>
        </ul>

以上になります。

その他関連記事

Bootstrapでアラートメッセージを表示する|コピペで動くサンプル付き

Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

LocalStorageとBootstrapのモーダルを利用する

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

前の記事
次の記事