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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


بوت استرپ به شما اجازه می‌دهد که مجموعه ای از کلیدها را (در یک خط) با هم در یک دسته گروه بندی کنید:[۱]


از عنصر <div> با کلاس .btn-group برای ایجاد یک گروه کلید استفاده کنید:

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>


مشاهدهٔ نتیجه


نکته: به جای اعمال سایز کلید‌ها روی هر کلید موجود در گروه، از کلاس .btn-group-lg برای اندازه دادن به همهٔ کلیدهای گروه استفاده کنید:

مثال

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>


مشاهدهٔ نتیجه

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

بوت استرپ گروه‌های کلید عمودی را نیز پشتیبانی می‌کند:


از کلاس .btn-group-vertical برای ایجاد گروه کلید عمودی استفاده کنید:

مثال

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>


مشاهدهٔ نتیجه


گروه های کلید Justify شده

برای گرفتن کل عرض صفحه نمایش از کلاس .btn-group-justified استفاده کنید:


مثال با عنصرهای <a>:

مثال

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>


مشاهدهٔ نتیجه


توجه: برای عنصر‌های <button>، باید هر کلید را درون یک کلاس .btn-group قرار دهید:

مثال

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>


مشاهدهٔ نتیجه


گروه های کلید تودرتو و منو‌های کرکره ای (Dropdown)

گروه‌های کلید تودرتو برای ایجاد منوهای کرکره ای:

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>


مشاهدهٔ نتیجه


کلید مجزای کرکره ای

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <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="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>


مشاهدهٔ نتیجه


منابع آموزشی