قسمت دهم bootstrap : نحوه ی تعریف گروه دکمه ها در بوت استرپ ۴

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت دهم bootstrap : نحوه ی تعریف دکمه های گروهی در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

4427

Calendar-amico (2)

تاریخ انتشار:

11 , مهر , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

اکثر اوغات گروه دکمه برای منوها ، تب ها و …. کاربردهای مختلفی دارند ، گروه دکمه ها در بوت استرپ به صورت پیش فرض وجود دارند ، در این قسمت از اموزش های بوت استرپ به طراحی دکمه های گروهی خواهیم پرداخت.

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

گروه دکمه ها

بوت استرپ ۴ به شما امکان می دهد یک سری دکمه ها را با هم (در یک خط) در یک گروه دکمه گروه بندی کنید به نمونه مثال زیر توجه کنید :

برای ساخت دکمه های بالا کافی است در المنت div از کلاس .btn-group استفاده کنید ، مثال زیر را بررسی کنید :

نکته : به جای اعمال اندازه دکمه در هر دکمه در یک گروه ، از کلاس .btn-group-lg برای یک گروه بزرگ دکمه یا .btn-group-sm برای یک گروه دکمه کوچک استفاده کنید:

دکمه بزرگ :

دکمه عادی

دکمه کوچک

مثال برای درک ساختن دکمه در سایز های مختلف به روش زیر است :

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

بوت استرپ ۴ از گروههای دکمه ای عمودی نیز به شکل زیر پشتیبانی می کند:

برای ساخت دکمه های عمودی کافی است کلاس .btn-group-vertical را به المنت div خود اضافه کنید :

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

گروه های دکمه ای کشویی برای ایجاد منوهای کشویی (در فصل بعد اطلاعات بیشتری در مورد بازشویی ها خواهید یافت):

تقسیم دکمه کشو

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

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

شما این امکان را به صورت پیش فرض دارید که دکمه ها را به صورت زیر کنار یک دیگر و به صورت گروهی قرار دهید .

ویدیوی قسمت دهم

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

پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

درصورت تمایل میتوانید سایر قسمت های دوره bootstrap را دنبال کنید.

موفق و پیروز باشید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت دهم bootstrap : نحوه ی تعریف گروه دکمه ها در بوت استرپ ۴"

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد.