دکمه گروهی در Bootstrap ورژن 4

یادگیری Bootstrap

تعداد بازدید : 3219

تاریخ و ساعت انتشار : یک شنبه 12 آذر 1396 23:21

دکمه گروهی

بوت استرپ 4 به شما امکان می دهد مجموعه ای از دکمه ها را با هم (در یک خط واحد) در یک گروه دکمه دسته بندی کنید:

AppleSamsungSony

از یک عنصر <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 | sm | xs از تمام دکمه های گروهی استفاده کنید:

Add class .btn-group-* to size all buttons in a button group.

AppleSamsungSony

اندازه دکمه گروهی

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

مشاهده مثال

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

بوت استرپ 4 همچنین از دکمه عمودی پشتیبانی می کند:

Use the .btn-group-vertical class to create a vertical button group:

AppleSamsungSony

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

مشاهده مثال

گروه بندی دکمه ها و منوهای کشویی

AppleSamsung

Sony

دکمه های Nest دکمه برای ایجاد منوهای کشویی (فصل های بعدی بیشتر درباره موارد منقضی یاد خواهید گرفت):

منو

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

مشاهده مثال

تقسیم منوهای کشویی دکمه

Sony

گروه بندی دکمه ها

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

مشاهده مثال

دکمه عمودی گروهی w / dropdown

AppleSamsung

Sony

دکمه عمودی گروهبندی

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

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما