آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش دکمه های گروهی در Bootstrap

دوره های مرتبط با این مقاله

BootStrap این امکان را فراهم می آورد که بتوان مجموعه ای از دکمه ها را بر روی یک خط با هم گروه بندی نمود:
برای ایجاد گروه دکمه، عنصر <div> را با کلاسِ .btn-group استفاده کنید:

نمونه 1

امتحان کنید
نکته:

به جای اینکه سایز تک تک دکمه ها را به صورت مجزا در گروه دکمه تغییر دهید، از کلاسِ .btn-group-* استفاده کرده و تغییر سایز را برای تمامیِ دکمه های گروه اعمال نمایید

نمونه 2

امتحان کنید

گروه های عمودی دکمه (Vertical Button Groups)

BootStrap همچنین از گروه های دکمه عمودی پشتیبانی می کند.
برای ایجاد گروه دکمه عمودی از کلاسِ .btn-group-vertical استفاده نمایید:

نمونه 3

امتحان کنید

گروه های دکمه همتراز (Justified Button Group)

برای گسترده نمودنِ تمامیِ پهنای صفحه نمایش، از کلاسِ .btn-group-justified استفاده کنید:
در مثال زیر، از عناصرِ <a> استفاده شده است:

نکته:

برای عناصرِ <button> ، باید هر دکمه را در کلاسِ <button> قرار دهید:

نمونه 5

امتحان کنید

گروه های دکمه تو در تو و منوهای Dropdown (کشویی)

برای ایجاد منوهای Dropdown، گروه های دکمه را به صورت تو در تو به کار ببرید:

نمونه 6

امتحان کنید

دکمه های کشویی مجزا (Split Button Dropdown)

  • 913
  •    878
  • تاریخ ارسال :   1395/10/11

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .