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

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

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

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

گروه دکمه ها

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

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

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

دکمه بزرگ :

دکمه عادی

دکمه کوچک

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برچسب ها : Bootstrap 4، اموزش بوت استرپ

دیدگاه تازه ای بنویسید