مثال ها
بوت استرپ شامل شش سبک دکمه از پیش تعریف شده است که هر کدام هدف معنایی خود را انجام می دهند.
دکمه های طرح کلی
به یک دکمه نیاز دارد، اما نه آنقدر .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-bs-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-bs-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-bs-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.
تنوع عمودی
مجموعه ای از دکمه ها را به صورت عمودی نشان دهید