آموزش Bootstrap ساخت دکمه های گروهی در بوت استرپ

علیرضا حاتمی نیا 1167

bootstap button group tutorial

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

دکمه های گروهی در بوت استرپ

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

 jquery button group sample
ساخت دکمه گروهی در بوت استرپ

برای ساخت یک گروه از دکمه ها در بوت استرپ کافیست به یک تگ <div> کلاس btn-group را بدهید و سپس ساخت دکمه هایی که در مبحث دکمه ها در بوت استرپ آموختید را داخل آن به کار ببرید.

مثال ساخت گروهی از دکمه ها از نوع primary

<div class="btn-group">
  <button type="button" class="btn btn-primary">PHP</button>
  <button type="button" class="btn btn-primary">ASP.net</button>
  <button type="button" class="btn btn-primary">Javascript</button>
</div>

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

برای تعیین اندازه گروه دکمه ها در بوت استرپ در سه سایز lg,sm,xs کافیست از کلاس btn-group-lg|sm|xs برای کل مجموعه دکمه ها استفاده کنید. 

مثال ساخت مجموعه دکمه ها در اندازه xs

 bootstrap3 button group in xs size

<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">PHP</button>
    <button type="button" class="btn btn-primary">ASP.net</button>
    <button type="button" class="btn btn-primary">Javascript</button>
</div>

دکمه های گروهی به صورت عمودی در بوت استرپ

همچنین بوت استرپ امکان ساخت گروهی از دکمه ها به صورت عمودی را به شما می دهد. برای این کار کافیست به تگ <div> کلاس btn-group-vertical را اضافه کنید.

 bootstrap button group vertical sample
مثال ساخت گروهی از دکمه های عمودی مانند تصویر بالا

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">PHP</button>
    <button type="button" class="btn btn-success">ASP.net</button>
    <button type="button" class="btn btn-danger">Javascript</button>
</div>

دکمه های گروهی هم تراز شده در بوت استرپ

برای ساخت دکمه های گروهی در محدوده کل عرض صفحه نمایش که به اصلاح دکمه های همتراز می گویند کافیست از کلاس btn-group-justified استفاده کنید:
 bootstrap button group justified
مثال ساخت دکمه های گروهی هم ترازشده در بوت استرپ

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">PHP</a>
    <a href="#" class="btn btn-success">ASP.net</a>
    <a href=”#” class=”btn btn-danger”>Javascript</a>
</div>


توجه داشته باشید که در مثال بالا به جای استفاده از تگ <button> از تگ <a> استفاده کردیم. جهت استفاده از تگ <button> بایستی هر تگ <button> را داخل یک تگ <div> با کلاس btn-group قرار دهید.

مثال ساخت مجموعه دکمه های همتراز شده با تگ <button>

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">PHP</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-success">ASP.net</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Javascript</button>
  </div>
</div>

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

جهت ساخت دکمه های گروهی همراه با دکمه کشویی (سازگار با دستگاه های لمسی) به این شکل عمل می کنیم:
 bootstrap button group dropdown

 

<div class="btn-group">
    <button type="button" class="btn btn-primary">PHP</button>
    <button type="button" class="btn btn-primary">ASP.net</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      web design <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">javascript</a></li>
        <li><a href="#">html & css</a></li>
      </ul>
    </div>
</div>

 

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت