گروه های دکمه
مجموعه ای از دکمه ها را روی یک خط با گروه دکمه ها گروه بندی کنید و با جاوااسکریپت به آن ها قدرت دهید.
مثال پایه
مجموعه ای از دکمه ها را ترکیب کنید تا یک سری از دکمه ها را با .btn در .btn-group پوشش دهید.
دکمه های پیش فرض
دکمه های تیره
دکمه های خط بیرونی دار
دکمه های تیره و خط بیرونی دار
مثال کد
<div class="btn-group" aria-label="مثال پایه"> <button type="button" class="btn btn-primary">راست</button> <button type="button" class="btn btn-primary">وسط</button> <button type="button" class="btn btn-primary">چپ</button> </div>
نوار ابزار دکمه ها
مجموعه ای از گروه های دکمه ها را در نوار ابزار دکمه ها برای کامپوننت های پیچیده تر ترکیب کنید.
مثال کد
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group" aria-label="گروه دوم">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" aria-label="گروه سوم">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
مثال کد
<div class="btn-toolbar mb-3">
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="مثال گروه های ورودی" aria-label="مثال گروه های ورودی" aria-describedby="btnGroupAddon">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
</div>
</div>
<div class="btn-toolbar justify-content-between">
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="مثال گروه های ورودی" aria-label="مثال گروه های ورودی" aria-describedby="btnGroupAddon2">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
</div>
</div>
سایزبندی دکمه ها
فقط .btn-group-{sm|lg} را به هر کلاس .btn-group اضافه کنید تا اعمال سایزبندی دکمه به صورت سراسری را کنترل کنید.
مثال کد
<div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div>
