Greenapple-room

Bs3doc：Dropdowns

2016.01.03 Bootstrap Ver3 Dropdowns ドキュメント

Dropdowns（ドロップダウンメニュー）

ドロップダウンメニューを表示します。
背景色・文字色の指定は出来ないため、色を変更したい場合は自身にてCSSの追加・修正が必要です。

サンプル01－ドロップダウン表示
サンプル02－ドロップダウンのみを右端に表示
サンプル03－ドロップダウンにヘッダーを表示する
サンプル04－ドロップダウンのリンクを無効化する

サンプル01－ドロップダウン表示

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウンを表示します</a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

コーディング

.dropdown: 01行目　ドロップダウン表示のトリガーとなるリンク・表示するメニューを.dropdownで囲みます
.dropdown-toggle: 02行目　ドロップダウン表示のトリガーとなるリンクを設定します
.dropdown
.dropdown-menu: 03行目　表示するメニューを設定します
.divider: 07行目　メニュー内に仕切り線を表示します

サンプル02－ドロップダウンのみを右端に表示

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウンを右端に表示します</a>
    <ul class="dropdown-menu pull-right">
        <li><a href="#">…..</a></li>
        <li><a href="#">…..</a></li>
    </ul>
</div>

コーディング

.pull-right: 03行目　記述されているカラムの右端にドロップダウンメニューを表示します

サンプル03－ドロップダウンにヘッダーを表示

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウンにヘッダーを表示します</a>
    <ul class="dropdown-menu">
        <li class="dropdown-header">Dropdown header</li>
        <li><a href="#">…..</a></li>
        <li><a href="#">…..</a></li>
    </ul>
</div>

コーディング

.dropdown-header: 04行目　ドロップダウンメニューにヘッダーを表示します

サンプル04－ドロップダウンのリンクを無効化する

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウンのリンクを無効化します</a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li class="disabled"><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

コーディング

.disabled: 05行目　無効化したいリンクに.disabledを指定します

© Copyright 2024 GreenApple-Room