در این قسمت مجموعه ای از کلاس های بوت استرپ را معرفی می کنیم که برای ایجاد منوهای آبشاری در دکمه ها برای طراحی سایت استفاده میکند. برای ایجاد منوی آبشاری داخل دکمه ها میتوانید تمام تگ های تعریف شده خود را ابتدا داخل کلاس btn-group قرار دهید. همچنین میتوانید یک هشتک(Caret) ایجاد کنید که کاربر را از وجود یک منوی آبشاری در دکمه آگاه سازد. مثال زیر یک منوی آبشاری ساده بایک دکمه را نشان میدهد:
کد HTML:
<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      Default <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="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>
<div class="btn-group">
   <button type="button" class="btn btn-primary dropdown-toggle" 
      data-toggle="dropdown">
      Primary <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="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>
تصویر این کد به صورت زیر است :

ایجاد شکاف در Button DropDown ها:

برای ایجاد شکاف بین علامت هشتک و دکمه میتوانید از کد زیر استفاده کنید:
کد HTML:
[LEFT]<div class="btn-group">
   <button type="button" class="btn btn-default">Default</button>
   <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu" role="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>
<div class="btn-group">
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-primary dropdown-toggle" 
      data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu" role="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>
[/LEFT]
تصویر این کد به صورت زیر است :

ایجاد اندازه های مختلف :

برای تغییر اندازه دکمه ها میتوانید از کد زیر استفاده کنید. کلاسهای استفاده شده : btn-large , btn-sm ,btn-xs هستند:

تغییر منوی جهت بازشدن منوی آبشاری:
برای اینکه منوی آبشاری در بالای دکمه باز شود میتوانید از کد زیر استفاده کنید. برای این کار کافی است به کلاس اصلی btn-group کلاس dropup را اضافه کنید.


کد HTML:
[LEFT]<div class="row" style="margin-left:50px; margin-top:200px">
   <div class="btn-group dropup">
      <button type="button" class="btn btn-default dropdown-toggle" 
         data-toggle="dropdown">
         Default <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="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>
   <div class="btn-group dropup">
      <button type="button" class="btn btn-primary dropdown-toggle" 
         data-toggle="dropdown">
         Primary <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="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>
</div>
[/LEFT]
تصویر این کد به صورت زیر است :

در قسمت بعد با input Group ها آشنا خواهیم شد. در گروه: کامپوننت های لایه بندی
منبع: طراحی سایت