بوت استرپ دکمه-گروه با گزینه های متنوعی برای ارائه گروه های دکمه ای منحصر به فرد که مطابق با استانداردهای طراحی مترونیک هستند.
Wrap a series of buttons with .btn in .btn-group.
<div class="btn-group" role="group" aria-label="پایه ای example">
<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-group" role="group" aria-label="پایه ای example">
<button type="button" class="btn btn-success">راست</button>
<button type="button" class="btn btn-success">وسط</button>
<button type="button" class="btn btn-success">چپ</button>
</div>
<div class="btn-group" role="group" aria-label="پایه ای example">
<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>
Add .btn-group-* to each .btn-group, including each one when nesting multiple groups for different sizes.
<div class="btn-group btn-group-lg" role="group" aria-label="دکمه بزرگ group">
<button type="button" class="btn btn-outline-secondary">راست</button>
<button type="button" class="btn btn-outline-secondary">وسط</button>
<button type="button" class="btn btn-outline-secondary">چپ</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="دکمه بزرگ group">
<button type="button" class="btn btn-outline-secondary">راست</button>
<button type="button" class="btn btn-outline-secondary">وسط</button>
<button type="button" class="btn btn-outline-secondary">چپ</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="دکمه بزرگ group">
<button type="button" class="btn btn-outline-secondary">راست</button>
<button type="button" class="btn btn-outline-secondary">وسط</button>
<button type="button" class="btn btn-outline-secondary">چپ</button>
</div>
Add btn-group-vertical to vertically stack buttons.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-outline-secondary">دکمه</button>
<button type="button" class="btn btn-outline-secondary">دکمه</button>
<button type="button" class="btn btn-outline-secondary">دکمه</button>
</div>Make a set of buttons appear vertically with a dropdown menu.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-outline-secondary">دکمه</button>
<button type="button" class="btn btn-outline-secondary">دکمه</button>
<div class="btn-group" role="group">
<button id="btnگروهVerticalDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ دان
</button>
<div class="dropdown-menu" aria-labelledby="btnگروهVerticalDrop1">
<a class="dropdown-item" href="#">لینک دراپ دان</a>
<a class="dropdown-item" href="#">لینک دراپ دان</a>
</div>
</div>
<button type="button" class="btn btn-outline-secondary">دکمه</button>
<button type="button" class="btn btn-outline-secondary">دکمه</button>
</div>
Place a .btn-group within another .btn-group when you want nested dropdown menus mixed with a series of buttons.
<div class="btn-group" role="group" aria-label="دکمه group with nested dropdown">
<button type="button" class="btn btn-primary font-weight-bold">1</button>
<button type="button" class="btn btn-success font-weight-bold">2</button>
<button type="button" class="btn btn-danger font-weight-bold">3</button>
<button type="button" class="btn btn-warning font-weight-bold">4</button>
<button type="button" class="btn btn-warning font-weight-bold">5</button>
<button type="button" class="btn btn-warning font-weight-bold">6</button>
<div class="btn-group" role="group">
<button id="btnگروهDrop1" type="button" class="btn btn-dark font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ دان
</button>
<div class="dropdown-menu" aria-labelledby="btnگروهDrop1">
<a class="dropdown-item" href="#">لینک دراپ دان</a>
<a class="dropdown-item" href="#">لینک دراپ دان</a>
</div>
</div>
</div>Combine sets of button groups into button toolbars for more complex components. Use utility classes to set the appropriate spacing and sizes.
<div class="btn-group" role="group" aria-label="پایه ای example">
<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>Use sets of button groups with icons.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group mr-2" role="group" aria-label="...">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-file-text-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-bold"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-paperclip"></i></button>
</div>
<div class="btn-group mr-2" role="group" aria-label="...">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-floppy-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-files-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-header"></i></button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-scissors"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-unlink"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-italic"></i></button>
</div>
</div>Mix input groups with button groups in your toolbars. Use utility classes to set the appropriate spacing and sizes.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-file-text-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-floppy-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-header"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-italic"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text" id="btnگروهAddon">@</span></div>
<input type="text" class="form-control" placeholder="ورودی group example" aria-describedby="btnگروهAddon"/>
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-primary btn-icon"><i class="la la-file-text-o"></i></button>
<button type="button" class="btn btn-success btn-icon"><i class="la la-paperclip"></i></button>
<button type="button" class="btn btn-warning btn-icon"><i class="la la-files-o"></i></button>
<button type="button" class="btn btn-info btn-icon"><i class="la la-scissors"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text" id="btnگروهAddon2">@</span></div>
<input type="text" class="form-control" placeholder="ورودی group example" aria-describedby="btnگروهAddon2"/>
</div>
</div>
