نحوه ایجاد و ساخت دکمه button در بوت استرپ bootstrap

نحوه ساخت و استفاده دکمه ها buttons در بوت استرپ bootstrap،ایجاد دکمه های زیبا و همچنین استفاده از کلاس های دکمه بوت استرپ

استایل دکمه

bootstrap بوت استرپ style سبک های مختلفی از دکمه ها bottons را فراهم می کند:

Basic ,Default ,Primary ,Success ,Info, Warning, Danger, Link

اساسی، پیش فرض، اولیه، موفقیت، اطلاعات، هشدار، خطر، لینک

برای دستیابی به سبک های دکمه بالا، Bootstrap دارای کلاس های زیر است:

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

مثال زیر نشان می دهد کد برای سبک های دکمه های مختلف:

کلاس های دکمه را می توان بر روی یک عنصر <a>، <button> یا <input> استفاده کرد:

مثال

چرا ما # را در ویژگی href پیوند قرار می دهیم؟

از آنجا که ما هیچ صفحه ای برای پیوند آن نداریم و نمی خواهیم پیام 404 را نمایش دهد، ما # را به عنوان پیوند در نمونه هایمان قرار می دهیم.اگر شما استفاده می کنید باید یک URL واقعی برای یک صفحه در ان قرار دهید.

اندازه دکمه ها

بوت استرپ bootstrap چهار دکمه button size را فراهم می کند:

کلاس هایی که اندازه های مختلف را تعریف می کنند عبارتند از:

به ترتیب: بزرگ،متوسط،کوچک،کوچکتر

.btn-lg
.btn-md
.btn-sm
.btn-xs

مثال زیر نشان می دهد کد برای اندازه دکمه های مختلف:

مثال

دکمه های سطح بلوک

دکمه ی سطح بلوک Block Level Buttons تمام عرض عنصر والدین را پوشش می دهد.

برای ایجاد یک دکمه سطح بلوک، کلاس btn-block را اضافه کنید:

مثال

دکمه های فعال / غیرفعال

Active/Disabled Buttons

یک دکمه را می توان به حالت فعال (ظاهر فشار داده) یا وضعیت غیر فعال (غیر قابل کلیک) تنظیم کرد:

فعال اولیه/ غیر فعال اولیه

کلاس فعال باعث می شود یک دکمه ظاهر شود و کلاس .disabled یک دکمه غیرقابل کلیک می کند: