امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
در اين مطلب از سايت ميرممد با Button Groups در بوتسترپ نسخه چهار كار خواهيم كرد.برای استفاده از گروه دکمه ها در بوتسترپ 4 کافیه در تگ div از کلاس btn-group استفاده کنیم و در آن دکمه های خودمونو قرار بدیم.تکه کد استفاده از Button Groups در Bootstrap 4 :
<div class="btn-group">
<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>
خروجی کد بالا :
این کلاس نسخه ی بزرگتری از btn-group درست میکند.
<div class="btn-group btn-group-lg">
<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>
خروجی کد بالا :
این کلاس نسخه ی کوچکتری از btn-group درست میکند.
<div class="btn-group btn-group-sm">
<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>
خروجی کد بالا :
این کلاس نسخه ی عمودی از btn-group درست میکند.
<div class="btn-group btn-group-vertical">
<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">
<button type="button" class="btn btn-primary">دکمه یک</button>
<button type="button" class="btn btn-primary">دکمه دو</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
دکمه سه
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
خروجی کد بالا :
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.