دکمه ها در بوت استرپ – قسمت دوم

آخرین بروز رسانی: آبان ۱۷, ۱۳۹۶

دکمه های گروهی در بوت استرپ – آموزش بوت استرپ

تیم طراحی سایت وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی برای دکمه های گروهی در بوت استرپ و Split Button Dropdowns آشنا خواهید شد.

مباحث دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ در مقاله ی دکمه ها در بوت استرپ – قسمت اول ذکر شده است که می توانید با مطالعه ی آن اطلاعات خود را درباره ی دکمه ها در بوت استرپ تکمیل نمایید.

ایجاد دکمه های گروهی در بوت استرپ

شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس btn-group  در تگ div استفاده کنید و دکمه ها را در این div قرار دهید. به کد زیر دقت کنید.

 

خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.

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

 

جالب است بدانید که شما می توانید برای این دکمه های گروهی در بوت استرپ سایز هم مشخص کنید. در واقع با اضافه کردن کلاس *-btn-group به تگ div می توانیم برای دکمه های گروهی یک سایز یکسان تعریف کنید. به جای * از عبارات xs ، sm ، md و lg استفاده می شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس آشنا می شوید.

 

خروجی به صورت زیر است.

سایز دکمه های گروهی در بوت استرپ

 

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

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

 

در این تصویر می توانید نتیجه ی کد بالا را ببینید.

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

 

کلاس btn-group-justified

برای اینکه دکمه های گروهی، تمام عرض صفحه را اشغال کنند باید از کلاس btn-group-justified  در تگ div استفاده کنید. اگر برای ایجاد دکمه ها از تگ a استفاده کنید که نیاز به کد دیگری نیست. اما اگر برای ایجاد دکمه از button  استفاده کنید، باید هر کدام از این دکمه ها را در یک تگ div با کلاس btn-group قرار دهید. به کد زیر دقت کنید.

 

در تصویر زیر می توانید نتیجه ی کدهای بالا را مشاهده کنید.

 

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

ایجاد منوی کشویی برای دکمه های گروهی

برای ایجاد منوی کشویی برای دکمه های گروهی باید دکمه ای را که می خواهید برای آن منوی کشویی بگذارید در یک تگ div جدا با کلاس btn-group بگذارید. سپس به دکمه ی مورد نظر کلاس dropdown-toggle  و خصوصیت  data-toggle=”dropdown” را اضافه کنید تا منو قابلیت باز شدن داشته باشد.
برای اضافه کردن آیتم های منو از تگ های ul و li استفاده کنید و به تگ ul کلاس dropdown-menu  را بدهید. به کد زیر دقت کنید.

 

خروجی کد بالا در این تصویر نشان داده شده است.

ایجاد منوی کشویی برای دکمه های گروهی

برای تقسیم بندی دکمه ای که منوی کشویی دارد، کافی است قسمتی که مربوط به فلش باز کردن منو است را در یک تگ button جداگانه بنویسید. به کد زیر دقت کنید.

 

خروجی به صورت زیر است.

Split Button Dropdowns

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

استایل دهی به متن در بوت استرپ

جدول در بوت استرپ

تصاویر در بوت استرپ

کلاس های well و jumbotron در بوت استرپ

هشدارها در بوت استرپ

دکمه ها در بوت استرپ – قسمت اول

برای آگاهی از جدیدترین آموزش های طراحی سایت وب یار در کانال @webyar_net عضو شوید.

مطالب مرتبط
ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا