ایجاد دکمه در 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	شکل ظاهری دکمه را به حالت لینک نشان میدهد در حالی که همچنان ویژگی های دکمه را دارد.

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








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




هشدار : Internet Explorer 9 ، گرادیان های پس زمینه را در گوشه های گرد نمایش نمیدهد بنابراین گرادیان از دکمه ها حذف میشود.

تغییر سایز دکمه ها :

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




















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








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





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

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

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

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

دکمه های ایجاد شده توسط تگ a میتوانند با اضافه کردن کلاس disabled. ، غیرفعال شوند.




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




نکته : کلاس disabled. فقط حالت ظاهری لینک را از طریق تغییر رنگ آن به طوسی و حذف کردن حالت hover تغییر میدهد ولی لینک همچنان قابل کلیک کردن باقی میماند. مگراینکه ویژگی href را حذف کنید. میتوانید برای برداشتن حالت کلیک به صورت دلخواه از تابع ( ) removeAttr در jQuery استفاده کنید.

ایجاد دکمه های غیرفعال با استفاده از تگ های input و button :

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





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