• Telegram
  • Google Plus
  • Linked In

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

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

تاریخ درج: خلاصه

طراحی سایت، بوت استرپ، bootstrap، طراحی وب سایت، نحوه ایجاد button در بوت استرپ

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

در این بخش نحوه استفاده از گروه دکمه در بوت استرپ را خواهید آموخت.
در مطلب قبلی آموختید که چگونه با استفاده از کلاس های از پیش تعریف شده، انواع مختلفی از دکمه ها را ایجاد کرده و آن ها را تغییر دهید. بوت استرپ همچنین این امکان را به شما میدهد که از طریق گروه دکمه، یک سری از دکمه ها را به صورت گروهی در یک خط واحد قرار دهید.
جهت ایجاد یک گروه دکمه، مجموعه ای از دکمه ها را داخل یک 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 در بوت استرپ

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In