نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه نهم (button)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه نهم (button)

آموزش Bootstrap 4 جلسه نهم (button) از سری آموزش های تک قسمتی است.

 

دکمه ها (buttons)

شما در هر سایتی میتوانید دکمه ها را ببینید پس این نشان دهنده آن است که دکمه ها در صفحه های وب مهم هستند عمدتا call to action ها دکمه هستند و یا حتی لینک های خرید دکمه هستند پس ما به آنها نیاز داریم . بوت استرپ مثل باقی موارد مهم برای دکمه ها هم کلاس های جالب و متنوعی دارد. طبق معمول کافیست شما از این کلاس ها استفاده کنید تا بتوانید دکمه های زیبایی بسازید.

 

کلاس های رنگی دکمه ها

درست است دکمه ها نیز از کلاس های رنگی پشتیبانی میکنند مانند آموزش جلسه قبل که گفتیم برای ساخت کلاس های رنگی لازم است از کلاس alert به اضافه کلاس رنگی استفاده کنید که خروجی آن میشد alert-success در دکمه ها هم ما از کلاس پیش فرض btn استفاده میکنیم حال کافیست کلاس رنگی را به btn اضافه کنیم که میشود btn-success ما کلاس های رنگی مختلف را برای شما لیست میکنیم و هر کدام را توضیح میدهیم:

  • btn-primary :  به کمک این کلاس میتوانید دکمه به رنگ آبی بسازید.
  • btn-secondary : به کمک این کلاس دکمه به رنگ خاکستری میتوان ساخت.
  • btn-success : این کلاس دکمه با رنگ سبز به شما میدهد.
  • btn-info : رنگ این کلاس آبی کمرنگ است.
  • btn-warning : به کمک این کلاس میتوانید دکمه با رنگ نارنجی بسازید.
  • btn-danger :این کلاس رنگ قرمز به دکمه های شما میدهد.
  • btn-dark : اگر میخواهید دکمه ای با رنگ تیره بسازید این کلاس مناسب است
  • btn-light :اگر میخواهید دکمه با رنگ روشن و سفید بسازید از این کلاس کمک بگیرید.
  • btn-link : این کلاس رنگ خاصی ندارد و برای ساخت دکمه به حالت لینک استفاده میشود.

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

 

ساخت دکمه برای حالت های مختلف

گاهی اوقات شما نمیتوانید از تگ button به صورت مستقیم استفاده کنید فرض کنید لینکی دارید که میخواهید آن را تبدیل به دکمه کنید یا تگ های input دارید که قصد تبدیل آنها به دکمه را دارید. اگر شما تگ a دارید و قصد تبدیل آن به دکمه را دارید کافیست به تگ a خود کلاس btn و بعد از آن کلاس رنگی مد نظر را اضافه کنید مثلا btn-success علاوه بر این مورد باید attribute با نام role و با مقدار button را به آن اضافه کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:

اگر میخواهید به Input ها حالت دکمه بدهید کافیست به آن کلاس btn و بعد هم کلاس رنگی مد نظر خود را اضافه کنید در input ها نیازی به تعریف role نیست ما برای شما دو مثال میزنیم یکی Input از نوع submit و دیگری از نوع button :

 

کلاس های رنگی outline

در اول آموزش کلاس های رنگی را توضیح دادیم اما اگر میخواهید حالت دیگری هم داشته باشید میتوانید از این قسمت کمک بگیرید در این کلاس رنگ به border دکمه داده میشود و متن داخل آن و وقتی موس روی آن میرد دکمه رنگ border خود را میگیرد و با آن رنگ پر میشود برای این کار کافیست در کلاس های رنگی قسمت اول بین btn و کلاس رنگ مقدار Outline را اضافه کنید که به صورت btn-outline-success در می آید در این حالت Border دکمه شما و متن آن به رنگ سبز میشود و وقتی موس روی آن میرد کل دکمه با رنگ سبز پر میشود برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

اندازه button ها

تا به اینجای کار درباره رنگ و ظاهر دکمه ها صحبت کردیم اما شما میتوانید سایز دکمه ها را هم تغییر دهید ۳ سایز مختلف برای ساخت دکمه وجود دارد که کلاس آنها را برای شما لیست میکنیم:

  • حالت default : این حالت همین حالت پیش فرضی است که تا الان از آن استفاده کردیم و نیاز به کلاس ندارد
  • btn-lg : اگر قصد ساخت دکمه با اندازه بزرگ را دارید از این کلاس استفاده کنید.
  • btn-sm : اگر قصد ساخت دکمه با سایز کوچک را دارید از این کلاس استفاده کنید.

برای واضح شدن موضوع هر دو کلاس را در کد زیر برای شما آورده ایم:

 

دکمه هایی با width:100%

اگر میخواهید دکمه هایی تمام عرض بسازید که در تمام دستگاه ها به خوبی کار کند بوت استرپ برای شما کلاس آن را به وجود آورده و کافیست شما از آن در کد خود استفاده کنید برای این کار کافیست در کنار کلاس btn که ثابت است و کلاس رنگی که بعد آن می آید به عنوان کلاس سوم btn-block را تعریف کنید تا دکمه شما تمام عرض شود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

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

گاهی اوقات لازم است به صورت دستی دکمه ای را فعال یا غیر فعال کنیم برای این کار میتوانید از کلاس های بوت استرپ کمک بگیریم ۳ حالت وجود دارد که برای شما آن ها را لیست میکنیم و توضیح میدهیم:

  • دکمه فعال : برای این حالت کافیست به کلاس های قبلی کلاس active اضافه شود
  • دکمه غیر فعال : خارج از کلاس کنار تگ button نوشته شود disabled
  • لینک به صورت دکمه غیر فعال : به کلاس های مربوط به لینک که بالا توضیح دادیم کلاس disabled اضافه شود.

برای واضح بودن موضوع از کد زیر کمک بگیرید:

 

دکمه های انیمیشنی

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

امیدواریم که این آموزش هم برای شما مفید بوده باشد تمام کد های موارد آموزش این جلسه را به صورت یکجا در کد زیر برای شما آماده کرده ایم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه هشتم (alert)

آموزش Bootstrap 4 جلسه دهم (Button Group)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (2 رای, میانگین: 4٫50 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه نهم (button): نوع فایل:mp4 حجم فایل:39.74 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.