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

 

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

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

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

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

برای ساخت یک گروه از دکمه ها در بوت استرپ کافیست به یک تگ <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

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

 <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 را اضافه کنید.

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

 <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 استفاده کنید:
 دکمه های گروهی هم تراز شده
مثال ساخت دکمه های گروهی هم ترازشده در بوت استرپ

 <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>

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

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

 <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>

 

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

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