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

دکمه گروهی

بوت استرپ 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
AppleSamsungSony
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

دکمه های 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> 
مشاهده مثال

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

گروه بندی دکمه ها
 <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

دکمه عمودی گروهبندی
 <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> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز