دکمه ها

از سبک‌های دکمه سفارشی بوت استرپ برای اعمال در فرم‌ها، دیالوگ‌ها و موارد دیگر با پشتیبانی از چندین اندازه، حالت و موارد دیگر استفاده کنید. برای لیست کامل دستورالعمل ها و گزینه های دیگر مستندات رسمی بوت استرپ را بخوانید.

مثال پایه

بوت استرپ شامل چندین سبک دکمه از پیش تعریف شده است، که هر کدام هدف معنایی خود را انجام می دهند، و برای کنترل بیشتر، چند مورد اضافی به کار رفته است.

دکمه های معکوس

دکمه های معکوس.

برچسب های دکمه

کلاس‌های .btn برای استفاده با عنصر <button> طراحی شده‌اند. با این حال، می‌توانید از این کلاس‌ها در عناصر <a> یا <input> استفاده کنید (اگرچه ممکن است برخی مرورگرها رندر کمی متفاوت اعمال کنند).

دکمه های اوت لاین

آیا به یک دکمه نیاز دارید، اما نه به رنگ های پس زمینه سنگینی که می آورند؟ کلاس‌های اصلاح‌کننده پیش‌فرض را با کلاس‌های .btn-outline-* جایگزین کنید تا همه تصاویر پس‌زمینه و رنگ‌های روی هر دکمه حذف شوند.

سایز ها

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ برای اندازه های بیشتر، .btn-lg، .btn-sm یا .btn-xs را اضافه کنید.

دکمه‌های سطح بلوک را ایجاد کنید - دکمه‌هایی که تمام عرض یک والد را پوشش می‌دهند.

وضعیت فعال

هنگامی که فعال باشد، دکمه‌ها فشار داده شده (با پس‌زمینه تیره‌تر، حاشیه تیره‌تر، و سایه داخلی) ظاهر می‌شوند. نیازی به افزودن کلاس به <button>ها نیست زیرا از کلاس شبه استفاده می کنند. با این حال، همچنان می‌توانید همان ظاهر فعال را با .active اجباری کنید (و ویژگی aria-pressed="true" را در آن لحاظ کنید) در صورتی که نیاز به تکرار وضعیت به صورت برنامه‌نویسی داشته باشید.

وضعیت غیرفعال

با افزودن ویژگی بولی disabled به هر عنصر <button>، دکمه‌ها را غیرفعال کنید.

دکمه های غیرفعال شده با استفاده از عنصر <a> کمی متفاوت عمل می کنند. <a>ها از ویژگی disabled پشتیبانی نمی‌کنند، بنابراین باید کلاس .disabled را اضافه کنید تا از نظر بصری غیرفعال به نظر برسد.

دکمه های آیکون

برای دکمه‌هایی که فقط نماد دارند، کلاس .btn-icon را اضافه کنید.

دکمه با آیکون و متن

>نماد و متن را داخل .btn-icon-text قرار دهید و از .btn-icon-prepend یا .btn-icon-append برای تگ‌های نماد استفاده کنید.

دکمه های آیکون شبکه اجتماعی

دکمه های شبکه اجتماعی به همراه آیکون و متن