btn-group с подменю twitterbootstrap

Question

Я хотел бы знать, как я могу создать группу btn с подменю.

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

и я», как поставить это в БТН-группы:

<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-загрузчике)

Answer 1

Пояснение: В принципе, этот btn мог уйти куда угодно, я просто положил его в группу кнопок, чтобы показать, что в этой кнопке нет ничего особенного.

Итак, сначала вы хотите добавить data-toggle = dropdown к вашей кнопке. Затем вам нужно добавить стандартное выпадающее меню к кнопке. Я думаю, что ключ здесь - это знать, что нет ничего, что помешает вам добавить второе раскрывающееся меню в подменю.

Так что идите в голову, добавьте подменю в любое место, которое вы хотите, и внутри этого, просто выпадающее меню. Таким образом, у нас есть меню Button -> выпадающего меню -> раскрывающееся меню -> раскрывающееся меню -> подэлементы. Alittle запутанным, но довольно прямо вперед, я думаю, что

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

Edit:

После игры с этим Alittle, я понял, что вы нуждаетесь в

<div class="btn-group"> 

оберточной кнопку, даже если она будет просто стоять в одиночестве. Я создал эту обновленную скрипту, чтобы продемонстрировать ее.
http://jsfiddle.net/jamiematthews/yWrRA/1/

Answer 2

Взял немного экспериментируя, но вот как вы это делаете:

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>