Button Groups در بوت استرپ 4

در مقاله ی قبلی طریقه ی استفاده از دکمه ها در بوت استرپ را با هم بررسی کردیم “دکمه ها در بوت استرپ4”

حال در این مقاله نوع دیگری از نمایش دکمه ها را پیش رو خواهیم داشت.

Button Groups

بوت استرپ 4 این امکان را به ما می دهد که گروه هایی از دکمه ها را در کنار همدیگه داشته باشیم.

برای ایجاد یک باتن گروپ باید از یک المان 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 برای دکمه های سایز بزرگ و از کلاس .btn-group-sm برای دکمه های سایز کوچک استفاده کنیم.

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

Vertical Button Groups

برای ایجاد مجموعه دکمه ها به صورت عمودی می توانیم از کلاس .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>

Nesting Button Groups & Dropdown Menus

بوت استرپ 4 این مزیت ویژه را در اختیار طراحان قرار می دهد که منوهای کشویی را به باتن گروپ اضافه کنند.

<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
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

Split Button Dropdowns

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

Vertical Button Group w/ Dropdown

<div class="btn-group-vertical">
  <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
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

[/member]