ارسال نظر برای این مطلب
سید محمد میرعالی
امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
دسته بندی مطالب
آمار سایت
کل مطالب : 39
کل نظرات : 6
افراد آنلاین : 1
تعداد اعضا : 0
آی پی امروز : 4
آی پی دیروز : 19
بازدید امروز : 76
باردید دیروز : 173
گوگل امروز : 0
گوگل دیروز : 2
بازدید هفته : 535
بازدید ماه : 840
بازدید سال : 28,588
بازدید کلی : 86,246
آموزش کار با Button Groups در Bootstrap 4
در اين مطلب از سايت ميرممد با 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-lg در Bootstrap 4 :
این کلاس نسخه ی بزرگتری از 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-sm در Bootstrap 4 :
این کلاس نسخه ی کوچکتری از 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-vertical در Bootstrap 4 :
این کلاس نسخه ی عمودی از 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>
خروجی کد بالا :
ترکیبی از dropdown-menu و btn-group در Bootstrap 4 :
<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>
خروجی کد بالا :
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.
پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :