دکمه ها و کلیدهای گروهی در بوت استرپ

گروه های کلید

مؤلفه های چیدمان Bootstrap

گروه های کلید (Button groups) به ما اجازه می دهند تا چندین کلید را در یک خط انباشته کنیم. این کار زمانی مفید است که بخواهیم آیتم هایی مانند کلیدهای هم تراز را با هم قرار دهیم. می توانیم یک رادیو جاوا اسکریپت (JavaScript radio) اختیاری و رفتار سبک checkbox را با افزونه کلید بوت استرپ (Bootstrap Button Plugin) اضافه کنیم.

جدول زیر ، کلاس های مهم Bootstrap را برای استفاده در گروه های کلید ، خلاصه می کند :

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

   <div class = "btn-group">...</div>

   <div class = "btn-group">...</div>

</div>

<div class = "btn-group btn-group-lg">...</div>

<div class = "btn-group btn-group-sm">...</div>

<div class = "btn-group btn-group-xs">...</div>

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

   ...

</div>

گروه کلید پایه

مثال زیر ، کاربرد کلاس btn-group. را که در جدول فوق تشریح شده است ، نشان می دهد :

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Toolbar Button

مثال زیر ، کاربرد کلاس btn-toolbar. را که در جدول فوق تشریح شده است ، نشان می دهد :

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

اندازه کلید

مثال زیر ، کاربرد کلاس *-btn-group. را که در جدول فوق تشریح شده است ، نشان می دهد :

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

تو در تویی

ما می توانیم گروه های کلید را در یک گروه کلید دیگر قرار دهیم. یعنی یک گروه .btn-group. را درون btn-group. دیگری قرار دهیم. این کار زمانی انجام می شود که بخواهیم منوهای کشویی را با یک سری از کلیدها ها ترکیب نماییم.

به مثال زیر توجه نمایید :

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

گروه کلید عمودی

مثال زیر ، کاربرد کلاس btn-group-vertical. را که در جدول فوق تشریح شده است ، نشان می دهد :

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :