دکمهها
دکمه پیشفرض
بوتسترپ شامل شش سبک دکمه از پیش تعریف شده است که هر یک هدف معنایی خاص خود را ارائه می دهند.
دکمه دورخط دار
از کلاس رو به رو .btn-outline-*
برای استفاده از این ویژگی مانند نمونه های زیر استفاده کنید
دکمه های گرد
از کلاس روبهرو.btn-rounded
برای اجرای این حالت استفاده کنید
دکمه همراه آیکن
ایکن موردنظر خود را اضافه کنید
اندازه دکمه
از.btn-lg
یا .btn-sm
برای سایزهای مختلف استفاده کنید
عرض دکمه
از.w-xs
, .w-sm
, .w-md
و .w-lg
برای عرض های مختلف میتوانید استفاده کنید
تگ های دکمه
کلاس .btn
برای استفاده با تگ دکمه ساخته شده اند هرچند شما میتوانید این کلاس را به تگ های دیگر هم اضافه کنید<button>
<a>
یا <input>
تاگل استیت
از data-toggle="button"
برای تاگل .active
توانید مانند نمونه های زیر استفاده کنید اگر دوباره میخواهید از این ویژگی استفاده کنید با کد رو به رو و افزودن کلاس .active
and aria-pressed="true"
به دکمه میتوانید آن را اعمال کنید
<button>
.
دکمه تمام عرض
برای استفاده از یک دکمه که کاملا به اندازه ی المنت پدر باشد از این کلاس استفاده کنید .btn-block
.
چک باکس و رادیو باتن
از کلاس رو به رو.button
می شود برای تگ های دیگر هم مانند
<label>
استفاده کرد میتوانید ازdata-toggle="buttons"
در
.btn-group
هم استفاده کنید تا تاگل شدن را بتوانید اعمال کنید
دکمه گروهی
هر چند دکمه را با استفاده از کلاسهای رو به رو مانند نمونه زیر دکمه گروهی کنید.btn
.btn-group
.
دکمه تولبار
برای اجزای پیچیده تر ، مجموعه ای از گروه های دکمه را در نوار ابزار دکمه ترکیب کنید. از کلاس های ابزار در صورت لزوم برای فضا کردن گروه ها ، دکمه ها و موارد دیگر استفاده کنید.
اندازهها
به جای استفاده از کلاس های اندازه دهی دکمه در هر دکمه در یک گروه ، فقط از .btn-group-*
به هر .btn-group
, اضافه کنید ، از جمله هر کدام هنگام نستینگ کردن چندین گروه.
تنوع عمودی
مجموعه ای از دکمه ها را بجای افقی به صورت عمودی انباشته جلوه دهید. بازشدن دکمه تقسیم در اینجا پشتیبانی نمی شود.