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

در این بخش نحوه ایجاد دکمه های مبدل و بارگذاری را در بوت استرپ خواهید آموخت.

کنترل موقعیت دکمه ها :

در مطالب قبل درباره نحوه سبک دادن و تغییر دادن دکمه ها و ایجاد گروه های دکمه و نوار ابزار صحبت کردیم. در بوت استرپ کارهای بیشتری میتوانید با دکمه ها انجام دهید مانند کنترل حالت دکمه ها، ایجاد دکمه های رادیویی (radio button) و checkbox

ایجاد دکمه مبدل:

میتوانید از طریق اضافه کردن ویژگی "data-toggel="button به دکمه مورد نظر، حالت مبدل را روی آن فعال نمایید(یعنی حالت نرمال را تغییر داده و به حالت push تبدیل کنید و بالعکس).




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

 

اضافه کردن حالت بارگذاری ( load ) به دکمه ها :

میتوانید با اضافه کردن ویژگی "... data-loading-text="loading به دکمه مورد نظر، حالت نرمال یک دکمه را به حالت بارگذاری (loading) تبدیل نمایید.




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

 

ایجاد checkbox :

برای این کار میتوانید ویژگی "data-toggle="buttons را به گروه چک باکس ها اضافه نمایید.










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



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










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

 

ایجاد دکمه های رادیویی :

به طور مشابه میتوانید ویژگی "data-toggle="buttons را به گروه ورودی های رادیویی اضافه نمایید.











چنانچه میخواهید گزینه ای به صورت پیش فرض انتخاب شده باشد، کلاس active. را به تگ label اضافه کنید.










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

 

فعال کردن دکمه ها با جاوا اسکریپت :

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










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


 

توابع:

توابع زیر، توابع استاندارد بوت استرپ برای دکمه ها میباشند.

('button ('toggle.( )$

این تابع حالت push یک دکمه را به حالت مبدل ( toggle ) تغییر میدهد. ظاهر دکمه را تغییر داده و به شکل یک دکمه فعال شده نشان میدهد. همچنین میتوانید با استفاده از ویژگی data-toggle ، حالت اتوماتیک مبدل را روی یک دکمه ایجاد نمایید.





 

('button ('loading.( )$

این تابع حالت بارگذاری را برای دکمه ایجاد میکند. در زمان بارگذاری دکمه غیرفعال شده و متن آن با مقدار ویژگی data-loading-text جا به جا میشود.







نکته : استفاده از data-loading-text و تابع ('button ('loading.( )$ در Bootstrap3 منسوخ شده است و در نسخه 4 حذف خواهد شد. بهتر است جهت تضمین سازگاری از تابع (button (string.( )$ استفاده نمایید.

('button ('reset.( )$

این تابع حالت دکمه را از طریق جا به جا کردن متن آن با متن اصلی دکمه، reset میکند.







 

(button (string.( )$

این تابع حالت دکمه را از طریق جا به جا کردن متن آن با هر متن دیگری که متعلق به ویژگی -data میباشد، reset میکند.










مطلب بعدی -> ایجاد پنل های آکاردئونی (collapsible) در Bootstrap

---