ایجاد دکمه در Bootstrap
خلاصه
بوت استرپ، طراحی سایت، طراحی وب سایت، آموزش بوت استرپ

در این بخش نحوه ایجاد و تغییر دکمه ها با استفاده از بوت استرپ را خواهید آموخت.
دکمه ها، بخش لازم و مکمل یک وب سایت و برنامه هستند. دکمه ها برای اهداف متنوعی مانند submit کردن یا reset کردن یک فرم HTML ، انجام دادن کارهای تعاملی مانند نمایش دادن یا مخفی کردن یک مطلب بر روی صفحه وب با کلیک کردن روی دکمه و ... به کار میروند. CSS مربوط به دکمه ها در بوت استرپ روش سریع و آسانی را برای ایجاد دکمه های دلخواه ارائه میدهد.
سبک دکمه های Bootstrap
کلاس های مختلفی جهت سبک دادن و تعریف حالت های متفاوت برای دکمه ها در بوت استرپ وحود دارد. سبک دکمه ها میتوانند بر روی هر مؤلفه ای اعمال شوند. این حالت به طور نرمال روی تگ های a ، input و button اعمال میشود.
جدول زیر لیستی از دکمه های موجود در بوت استرپ را نمایش میدهد :
دکمه ها (button) | کلاس | توضیحات |
default (پیش فرض) | btn btn-default | دکمه پیش فرض به رنگ طوسی با گرادیان |
Primary (ابتدایی،اصلی) | btn btn-primary | ایجاد حالت ظاهری متفاوت جهت مشخص کردن دکمه اصلی بین دیگر دکمه ها |
Info (اطلاعات) | btn btn-info | میتواند به عنوان جایگزین برای دکمه پیش فرض استفاده شود. |
Success (موفقیت) | btn btn-success | یک عمل مثبت یا موفقیت آمیز را نشان میدهد. |
Warning (هشدار) | btn btn-warning | هشدار در مورد انجام یک عمل |
Danger (خطر) | btn btn-danger | یک عمل منفی یا خطرناک را نشان میدهد. |
Link (لینک) | btn btn-link | شکل ظاهری دکمه را به حالت لینک نشان میدهد در حالی که همچنان ویژگی های دکمه را دارد. |
مثال زیر نحوه استفاده ار این دکمه ها را نمایش میدهد


خروجی مثال بالا به شکل زیر خواهد بود



حتما بخوانید : ایجاد فرم در bootsrap
تغییر سایز دکمه ها
بوت استرپ این امکان را به شما میدهد که اندازه دکمه ها را بزرگتر یا کوچکتر نمایید. میتوانید این کار را با اضافه کردن یک کلاس btn-lg. ، btn-sm. یا btn-xs. انجام دهید.

خروجی مثال بالا به شکل زیر خواهد بود


همچنین میتوانید دکمه هایی از نوع block level ایجاد کنید (دکمه هایی که پهنای کامل عنصر parent را پوشش میدهند).

خروجی مثال بالا به شکل زیر خواهد بود



دکمه های غیر فعال
گاهی اوقات نیاز است یک دکمه را به دلایل مشخص در حالت غیرفعال قرار دهیم. به طور مثال کاربر اجازه انجام یک کار را در یک موقعیت خاص نداشته باشد یا حصول اطمینان از اینکه کاربر قبل از کامل کردن موارد خواسته شده نتواند روی دکمه تأیید کلیک کرده و وارد مرحله بعدی شود.
ایجاد دکمه های غیرفعال با استفاده از تگ های لینک
دکمه های ایجاد شده توسط تگ a میتوانند با اضافه کردن کلاس disabled. ، غیرفعال شوند.

خروجی مثال بالا به شکل زیر خواهد بود




ایجاد دکمه های غیرفعال با استفاده از تگ های input و button
دکمه های ایجاد شده از طریق button یا input میتوانند با اضافه کردن ویژگی disbaled به مؤلفه موردنظر، غیرفعال شوند.

در مطلب بعدی نحوه ترکیب چندین دکمه به صورت افقی یا عمودی در یک خط مانند نوارهای ابزار با استفاده از گروه های دکمه در بوت استرپ را خواهید آموخت.
پیشنهاد می کنیم در رابطه با طراحی سایت مقالات زیر را مطالعه کنید:
طراحی سایت فروشگاهی
طراحی سایت شرکتی
طراحی سایت حرفه ای
طراحی سایت ریسپانسو