نمادها

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

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

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

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

 

دکمه های گروهی (button Groups)

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

برای ساخت دکمه های گروهی باز هم به سراغ کلاس های بوت استرپ میرویم و از آنها کمک میگیریم برای ساخت یک دکمه گروهی ساده نیاز است که شما از کلاس btn-group در قالب یک div استفاده کنید یعنی ابتدا یک div تعریف کنید دکمه های خود را به روش جلسه قبل بسازید و داخل این div با کلاس btn-group قرار دهید به این صورت دکمه ها به هم میچسبند و ظاهر یک منو ساده را به خود میگیرند. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اندازه دکمه های گروهی

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

  • حالت پیشفرض : در حالت عادی اگر هیچ کلاسی تعریف نشود اندازه متوسط در نظر گرفته میشود.
  • کلاس btn-group-lg : به کمک این کلاس میتوانید سایز دکمه ها را بزرگ کنید.
  • کلاس btn-group-sm : به کمک این کلاس میتوانید سایز کوچک از دکمه ها داشته باشید.

برای مشخص شدن موضوع ما از هر ۳ حالت برای شما در پایان این مقاله نمونه کدی آماده کرده ایم.

 

دکمه های گروهی عمودی

تا به اینجای کار هرچه آموزش داده ایم درباره منو ها و دکمه های افقی بود اما بوت استرپ برای ساخت دکمه های عمودی نیز کلاس خاصی دارد کافیست در div خود جای کلاس btn-group از کلاس btn-group-vertical استفاده کنید و به همین راحتی دکمه های گروهی خود را از حالت افقی به حالت عمودی تبدیل کنید توجه کنید که هر ۲ کلاس را در کنار هم قرار ندهید اگر قصد ساخت منو عمودی دارید تنها باید کلاس btn-group-vertical را استفاده کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

ساخت منو باز شو (dropdown)

درست است شما به کمک بوت استرپ و دکمه های گروهی میتوانید منو های بازشو بسازید برای اینکار مشابه روش های قبل منو گروهی خود را ایجاد میکنید. برای آن دکمه که میخواهید زیر منو داشته باشد یک div دیگر مشابه div اول با کلاس btn-group میسازید. سپس به دکمه ،که یک کلاس btn و یک کلاس رنگی دارد کلاس dropdown-toggle را نیز اضافه میکنید علاوه بر این مورد نیاز است که یک attribute با نام data-toggle با مقدار dropdown نیز با آن اضافه کنید تا اینجای کار به خود دکمه امکان باز شدن را داده اید حال نوبت ساخت زیر منو ها است .

بعد از بسته شدن تگ button یک div با کلاس dropdown-menu میسازید که بشود قاب زیر منو ما سپس گزینه های منو را با تگ a داخل آن میسازیم و به هرکدام از تگ های a کلاس dropdown-item را میدهیم به همین راحتی شما منویی با قابلیت زیر منو ساخته اید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت زیر منو split

split به حالتی گفته میشود که زیر منو جدا از دکمه باز میشود یعنی هم خود دکمه قابلیت کلیک دارد هم زیر منو باز میشود در اصل زیر منو با فلش کنار نوشته باز میشود. برای ساخت این منو مشابه روش قبل عمل میکنیم. با این تفاوت که برای فلش هم یک button مجزا تعریف میکنیم و در کنار کلاس های btn و کلاس رنگی و کلاس dropdown-toggle کلاس جدید dropdown-toggle-split را نیز اضافه میکنیم توجه کنید که attribute با نام data-toggle و مقدار dropdown را فراموش نکنید.

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

 

زیر منو برای دکمه های عمودی

بالاتر درباره ساخت دکمه های گروهی عمودی صحبت کردیم اما برای ساخت زیر منو برای این دکمه ها کاملا مشابه منو های افقی عمل میکنیم یعنی دکمه ای که قرار است زیر منو داشته باشد را در کنار کلاس های btn و کلاس رنگی آن کلاس dropdown-toggle و attribute آن را اضافه میکنیم و بعد از بسته شدن تگ button یک div با کلاس dropdown-menu میسازیم و داخل آن تگ های a با کلاس dropdown-item قرار میدهیم به همین راحتی برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

ساخت دکمه های گروهی کنار هم

اگر قصد دارید دکمه های گروهی مجزایی با تعداد مختلف کنار هم داشته باشید به راحتی میتوانید این کار را انجام دهید کافیست هر چند تا دکمه که میخواهید در یک گروه باشند را در یک div با کلاس btn-group قرار دهید و تعداد دیگر که میخواهید جدا از این دکمه ها باشند را در گروه دیگری به همین راحتی میتوانید چند دسته دکمه گروهی را در کنار همدیگر داشته باشید.

 

برای شما کدی شامل کد آموزش را آماده کرده ایم:

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

 

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

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

آموزش Bootstrap 4 جلسه یازدهم (Badge)

 

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

 

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

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

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

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

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

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

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

*

code

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