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

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

تاریخ انتشار: 9 دی 1394

تعداد بازدید: 23 نفر

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

خروجی مثال بالا به شکل زیر خواهد بود :

همچنین میتوانید با جایگزین کردن کلاس btn-group-vertical. به جای کلاس btn-group. ، گروه دکمه ها را به صورت عمودی نمایش دهید.

خروجی مثال بالا به شکل زیر خواهد بود :

ایجاد نوار ابزار با دکمه ها :

همچنین میتوانید با ترکیب مجموعه ای از گروه های دکمه اجزاء پیچیده تری مانند نوار ابزار ایجاد کنید. جهت انجام این کار، مجموعه گروه های دکمه را داخل یک div قرار داده و کلاس btn-toolbar. را بر آن اعمال کنید.

خروجی مثال بالا به شکل زیر خواهد بود :

تغییر ارتفاع گروه های دکمه :

همچنین میتوانید کلاس های تغییر سایز مانند btn-group-lg. ، btn-group-sm. یا btn-group-xs. را جهت بزرگتر یا کوچکتر شدن گروه دکمه ها روی آن ها اعمال کنید. کافیست کلاس های تغییر سایز را به جای تک تک دکمه ها مستقیماً به کلاس btn-group. اعمال کنید.

خروجی مثال بالا به شکل زیر خواهد بود :

ایجاد گروه دکمه های همتراز شده (justified) :

همچنین با اعمال کردن کلاس btn-group-justified. به کلاس btn-group. میتوانید گروه دکمه ها را از پهنا به اندازه یکسان کشیده کنید تا تمام پهنای parent خود را پوشش دهند.
مثال زیر یک گروه دکمه justified با استفاده از تگ a ایجاد میکند :

خروجی مثال بالا به شکل زیر خواهد بود :

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

مطلب بعدی -> ایجاد تصاویر responsive در بوت استرپ

اشتراک گذاری:

مشاهده نمونه های بیشتر

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

راهنمای جامع طراحی سایت فروشگاهی

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.