Bootstrap ドロップダウン メニューのサンプル チュートリアル

この章では、Bootstrap クラスを使用してボタンにドロップダウン メニューを追加する方法を説明します。ボタンにドロップダウン メニューを追加するには、ボタンとドロップダウン メニューを .btn-group に配置するだけです。 f092556db850dedfd562431d5552770054bdf357c58b8a65c66d7c19c8e4d114 を使用して、ボタンがドロップダウン メニューとして機能することを示すこともできます。

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

例

<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>

基本的な使用法

Bootstrap フレームワークでドロップダウン メニュー コンポーネントを使用する場合、正しい構造を使用することが非常に重要です。構造名とクラス名が正しく使用されていないため、コンポーネントが正常に使用できるかどうかに直接影響します

1. 「dropdown」という名前のコンテナを使用して、ドロップダウン メニュー要素全体をラップします

c0a838506a57d6efb82c3faebdcfa64e16b28748ea4df4d9c2150843fecfba68

2. 3565c633d8f3dfc6868aab8f8c968f7e

3. ドロップダウンメニュー項目は UL リストを使用し、 を定義します。 クラス名は "dropdown-menu" です

ae363fd8bc2e4ee3b3446338ba23f464

  
  
  ActionAnother actionSomething else here

4. ドロップダウン メニューの親要素に .dropup クラスを設定することで、次のようにすることができますメニューがポップアップします (デフォルトはポップダウンです)

14481b0d0ba7c394e2501a352872843d
  1172180f0ea09fa48126f1bf9c16d1a6Dropupa11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

Principle Analysis

Bootstrap フレームワークのドロップダウン メニュー コンポーネント、そのドロップダウン メニュー項目はデフォルトでは非表示になっています。 「dropdown-menu」のデフォルトのスタイルは「display:none」に設定されています。ユーザーが親メニュー項目をクリックすると、ドロップダウン メニューが表示されます。ユーザーが再度クリックすると、ドロップダウン メニューは引き続き非表示になります。

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

それでは、実装原理を分析してみましょう。これは非常に簡単です。js テクノロジーを使用して、クラス名「open」を追加または削除して、ドロップダウン メニューの表示または非表示を制御します。つまり、デフォルトでは、「div.dropdown」にはクラス名「open」がありません。ユーザーが初めてクリックすると、「div.dropdown」にはクラス名「open」が追加されます。もう一度、「div.dropdown」は「コンテナ内のクラス名「open」が再び削除されます

.open > .dropdown-menu {
  display: block;
}

拡張使用法

[区切り文字]

Bootstrap フレームワークのドロップダウン メニューは、ドロップを提供します-down セパレータ。ドロップダウン メニュー グループが 2 つあると仮定すると、グループ間に空の 25edfb22a4f469ecb59f1190150159c6 を追加し、この 25edfb22a4f469ecb59f1190150159c6 にクラス名「divider」を追加します。ディバイダー

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【メニュータイトル】

ドロップダウンメニューの一連のアクションを示すタイトルを追加できます

c220632b5e888796ad159d12fa43bfcbDropdown headerbed06894275b65c1ab86501b08a632eb

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c53aee3cf423ceaf51d11d60f48002773第一部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb53aee3cf423ceaf51d11d60f48002773第二部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【配置】

ブートストラップフレームの中央と下部のプルメニュー デフォルトは左揃えです。ドロップダウンメニューを親コンテナに対して右揃えにしたい場合は、「dropdown-menu-right」を追加できます。クラス名を "dropdown-menu" に変更します

.dropdown-menu-right {
  right: 0;
  left: auto;
}

b8ddb9e59aed2cc4ef62bdf2caf180ff 以降、デフォルトはブロックレベル要素であり、親の幅を埋めます。ここで、要素の内容が幅を広げて左側から一定の距離を保つように、要素に inline-block と margin-left を設定する必要があります

    display: inline-block;
    margin-left: 60px;

bc237f0a329903d1c97cfadcb81fa83a
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  0e067206866e68769a13ad0253578a2717107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【メニュー項目の状態】

ドロップダウン メニュー項目 デフォルトの状態はホバー状態 (:hover) とフォーカス状態 (:focus) です

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

上記の 2 つの状態に加えて、ドロップダウン メニュー項目には現在の状態 (.active) もあります。および無効な状態 (.disabled)。これら 2 つの状態を使用するには、対応するクラス名を対応するメニュー項目に追加するだけです

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c556e13e9c9f7f01f9fb88f9dc143761412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb9e19533ed9cabe256346eae338ee3b4412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

以上がBootstrap ドロップダウン メニューのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。