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

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

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

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

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

در مطالب قبل درباره نحوه سبک دادن و تغییر دادن دکمه ها و ایجاد گروه های دکمه و نوار ابزار صحبت کردیم. در بوت استرپ کارهای بیشتری میتوانید با دکمه ها انجام دهید مانند کنترل حالت دکمه ها، ایجاد دکمه های رادیویی (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

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

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.