3

サブメニューを使用してbtn-groupを構築する方法を知りたいのですが。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

そして私はこれをbtn-groupに入れたいと思います：

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

これは私が欲しいものです:(しかしtwiiter-bootstrapを使って） これは私が欲しいものです

4

2 に答える 2

3

説明: 基本的に、この btn はどこにでも移動できます。このボタンに特別なものがないことを示すために、ボタン グループに配置しました。

まず、data-toggle= ドロップダウンをボタンに追加します。次に、標準のドロップダウン メニューをボタンに追加する必要があります。ここで重要なのは、サブメニューに 2 番目のドロップダウン メニューを追加することを妨げるものは何もないことを知っていることだと思います。

ですから、サブメニューを任意の < li > に追加し、その中にもう 1 つのドロップダウン メニューを追加します。基本的に、ボタン -> ドロップダウン メニュー -> ドロップダウン サブメニュー -> ドロップダウン メニュー -> サブ要素があります。少し混乱しますが、かなり簡単だと思います

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <!--start of dropdown button -->
      <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         <li class="dropdown-submenu">
           <a tabindex="-1" href="#">More options</a>
           <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
           </ul>
         </li>
     </ul>
    </div>
    <!--end of dropdown button -->
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>

編集：

これで少し遊んだ後、私はあなたが必要であることに気付きました

<div class="btn-group">

たとえそれが単独で立っているとしても、ボタンを包んでください。この更新されたフィドルを作成してデモを行いました。
http://jsfiddle.net/jamiematthews/yWrRA/1/

于 2013-02-13T20:59:16.587 に答える
1

少し実験しましたが、これを行う方法は次のとおりです。

http://jsfiddle.net/ewQTE/2/

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="#">Dropwn Link #1</a></li>
          <li><a href="#">Dropwn Link #2</a></li>
      </ul>
    </div>

    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>
于 2013-02-13T15:58:29.983 に答える