ایجاد دکمه در Bootstrap

تاریخ انتشار: 9 دی 1394

تعداد بازدید: 116 نفر

در این بخش نحوه ایجاد و تغییر دکمه ها با استفاده از بوت استرپ را خواهید آموخت.
دکمه ها، بخش لازم و مکمل یک وب سایت و برنامه هستند. دکمه ها برای اهداف متنوعی مانند 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 ، گرادیان های پس زمینه را در گوشه های گرد نمایش نمیدهد بنابراین گرادیان از دکمه ها حذف میشود.

حتما بخوانید : ایجاد فرم در bootsrap

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

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

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

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

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

حتما بخوانید: صفحه بندی(pagination) در bootstrap

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

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

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

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

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

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

حتما بخوانید: ایجاد پنل در bootsrap

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

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

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

پیشنهاد می کنیم در رابطه با طراحی سایت مقالات زیر را مطالعه کنید:

طراحی سایت فروشگاهی
طراحی سایت شرکتی
طراحی سایت حرفه ای
طراحی سایت ریسپانسو

اشتراک گذاری: