دکمه ها
مثال ها
بوت استرپ شامل شش سبک دکمه از پیش تعریف شده است که هر کدام هدف معنایی خود را انجام می دهند.
دکمه های طرح کلی
کلاس های اصلاح کننده پیش فرض را با the جایگزین کنید.btn-outline-*
ones to remove all background images and colors on any button.
برچسب های دکمه
را.btn
classes are designed to be used with the <button>
element. However, you can also use these classes on <a>
or <input>
elements (though some browsers may apply a slightly different rendering).
اندازه ها
دکمه های بزرگتر یا کوچکتر را دوست دارید؟ .btn-lg
or .btn-sm
for additional sizes.
دکمه های بلوک
با افزودن، دکمههای سطح بلوک را ایجاد کنید - دکمههایی که تمام عرض یک والد را پوشش میدهند.d-grid
.
وضعیت ها را تغییر دهید
اضافه کردنdata-toggle="button"
to toggle a button’s active
state. If you’re pre-toggling a button, you must manually add the .active
class
و aria-pressed="true"
to the
<button>
.
دکمه های چک باکس
بوت استرپ.button
styles can be applied to other elements, such as
<label>
s, to provide checkbox or radio style button toggling. Add data-toggle="buttons"
to a
.btn-group
containing those modified buttons to enable toggling in their respective styles.
دکمه های رادیویی
بوت استرپ.button
styles can be applied to other elements, such as
<label>
s, to provide checkbox or radio style button toggling. Add data-toggle="buttons"
to a
.btn-group
containing those modified buttons to enable toggling in their respective styles.
گروه دکمه
یک سری دکمه را با آن بپیچید.btn
in .btn-group
.
نوار ابزار دکمه
مجموعهای از گروههای دکمهها را در نوار ابزار دکمهها برای اجزای پیچیدهتر ترکیب کنید.
سایز بندی
به جای اعمال کلاس های اندازه دکمه برای هر دکمه در یک گروه، فقط اضافه کنید.btn-group-*
to each .btn-group
, including each one when nesting multiple groups.
تنوع عمودی
کاری کنید که مجموعه ای از دکمه ها به جای افقی به صورت عمودی روی هم قرار گیرند.