ブートストラップ ドロップダウン リストの設定方法

この章では、[ブートストラップ] ドロップダウン メニューに焦点を当てます。ドロップダウン メニューは切り替え可能で、リンクをリスト形式で表示するコンテキスト メニューです。これは、Dropdown JavaScript プラグインと対話することで実現できます。

ドロップダウン メニューを使用する必要がある場合は、クラス .dropdown にドロップダウン メニューを追加するだけです。 (推奨学習: Bootstrap ビデオ チュートリアル )

次の例は、基本的なドロップダウン メニューを示しています:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

でラップされています。

クラス	Description
.dropdown	ドロップダウン メニューとドロップダウン メニューを指定します.dropdown
.dropdown-menu	ドロップダウン メニューの作成
.dropdown-menu-right	ドロップダウン メニューを右揃えにします
.dropdown-header	ドロップダウン メニューにヘッダーを追加します
.dropup	ポップアップするドロップダウン メニューを指定します
.disabled	ドロップダウン メニューの無効な項目
.divider	ドロップダウン メニューの区切り線

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル をご覧ください。学べるコラム！

以上がブートストラップ ドロップダウン リストの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。