دکمه ها
نمونه ها
بوت استرپ شامل شش سبک دکمه از پیش تعریف شده است که هر کدام هدف معنایی خود را انجام می دهند.
دکمه های طرح کلی
به یک دکمه نیاز دارد، اما نه آنقدر رنگ پس زمینه ای که می آورند؟ کلاس های اصلاح کننده پیش فرض را با را.btn-outline-*آنهایی که باید حذف شوند تمام تصاویر پس زمینه و رنگ ها بر روی هر دکمه.
دکمه های گرد
از کلاس استفاده کنید.btn-roundedبرای لبه گرد دکمه.
دکمه ها با آیکون
دکمه اضافه کردن نماد در
اندازه ها
دکمه های بزرگتر یا کوچکتر را دوست دارید؟ اضافه کنید.btn-lgیا.btn-smبرای اندازه های اضافی
عرض دکمه ها
اضافه کنید.w-xs, .w-sm, .w-mdو .w-lgکلاس برای عرض دکمه های اضافی.
برچسب های دکمه
را.btnکلاس ها برای استفاده با<button>عنصر با این حال، می توانید از این کلاس ها نیز استفاده کنید<a>یا<input>عناصر (هر چند برخی از مرورگرها ممکن است رندر کمی متفاوت اعمال کنند).
وضعیت ها را تغییر دهید
اضافه کنیدdata-bs-toggle="button"برای تغییر دادن یک دکمهactiveدولت اگر از قبل دکمه ای را تغییر می دهید، باید آن را به صورت دستی اضافه کنید.activeکلاسو aria-pressed="true"به<button>.
دکمه های بلوک
دکمه های سطح بلوک را ایجاد کنید - آنهایی که با افزودن، تمام عرض یک والد را بپوشانید.d-grid.
چک باکس و دکمه های رادیویی
با استفاده از چک باکس های دکمه مانند و دکمه های رادیویی ایجاد کنید.btnسبک ها به جای.form-check-labelبر روی<label>عناصر
گروه دکمه
یک سری دکمه را با آن بپیچید.btnدر.btn-group.
نوار ابزار دکمه
مجموعه ای از گروه های دکمه را با هم ترکیب کنید نوار ابزار دکمه برای اجزای پیچیده تر. از کلاس های کاربردی به عنوان استفاده کنید برای فاصله بین گروه ها، دکمه ها و موارد دیگر لازم است.
سایز بندی
به جای اعمال اندازه دکمه کلاس ها را به هر دکمه در یک گروه، فقط اضافه کنید.btn-group-*به هر کدام.btn-group، از جمله هر یک هنگام تودرتو کردن گروه های متعدد
تنوع عمودی
مجموعه ای از دکمه ها را به صورت عمودی نشان دهید انباشته شده به جای افقی. کشویی دکمه تقسیم نیست اینجا پشتیبانی می شود.