دکمه ها در بوت استرپ – قسمت دوم

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

تیم طراحی سایت اصفهان وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی برای دکمه های گروهی در بوت استرپ و Split Button Dropdowns آشنا خواهید شد.

مباحث دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ در مقاله ی دکمه ها در بوت استرپ – قسمت اول ذکر شده است که می توانید با مطالعه ی آن اطلاعات خود را درباره ی دکمه ها در بوت استرپ تکمیل نمایید.

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

شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس btn-group  در تگ div استفاده کنید و دکمه ها را در این div قرار دهید. به کد زیر دقت کنید.

<div class="btn-group">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>

خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.

جالب است بدانید که شما می توانید برای این دکمه های گروهی در بوت استرپ سایز هم مشخص کنید. در واقع با اضافه کردن کلاس *-btn-group به تگ div می توانیم برای دکمه های گروهی یک سایز یکسان تعریف کنید. به جای * از عبارات xs ، sm ، md و lg استفاده می شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس آشنا می شوید.

<div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-primary">ok</button>
  <button type="button" class="btn btn-primary">cancel</button>
  <button type="button" class="btn btn-primary">Apply</button>
</div>
<br><br>
<div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-primary">ok</button>
  <button type="button" class="btn btn-primary">cancel</button>
  <button type="button" class="btn btn-primary">Apply</button>
</div>
<br><br>
<div class="btn-group btn-group-md">
  <button type="button" class="btn btn-primary">ok</button>
  <button type="button" class="btn btn-primary">cancel</button>
  <button type="button" class="btn btn-primary">Apply</button>
</div>
<br><br>
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">ok</button>
  <button type="button" class="btn btn-primary">cancel</button>
  <button type="button" class="btn btn-primary">Apply</button>
</div>

خروجی به صورت زیر است.

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

بوت استرپ به شما این امکان را می دهد که دکمه های گروهی را به صورت عمودی ایجاد کنید. برای این منظور کافی است از کلاس btn-group-vertical استفاده کنید. این کلاس را در یک تگ div نوشته و دکمه ها را در این تگ قرار دهید. با دقت به کد زیر می توانید دکمه های گروهی عمودی را ایجاد کنید.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ok</button>
  <button type="button" class="btn btn-primary">cancel</button>
  <button type="button" class="btn btn-primary">Apply</button>
</div>

در این تصویر می توانید نتیجه ی کد بالا را ببینید.

کلاس btn-group-justified

برای اینکه دکمه های گروهی، تمام عرض صفحه را اشغال کنند باید از کلاس btn-group-justified  در تگ div استفاده کنید. اگر برای ایجاد دکمه ها از تگ a استفاده کنید که نیاز به کد دیگری نیست. اما اگر برای ایجاد دکمه از button  استفاده کنید، باید هر کدام از این دکمه ها را در یک تگ div با کلاس btn-group قرار دهید. به کد زیر دقت کنید.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">ok</a>
  <a href="#" class="btn btn-primary">cancel</a>
  <a href="#" class="btn btn-primary">Apply</a>
</div>
<br>
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-success">ok</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">cancel</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Apply</button>
</div>
</div>

در تصویر زیر می توانید نتیجه ی کدهای بالا را مشاهده کنید.

ایجاد منوی کشویی

برای ایجاد منوی کشویی برای دکمه های گروهی باید دکمه ای را که می خواهید برای آن منوی کشویی بگذارید در یک تگ div جدا با کلاس btn-group بگذارید. سپس به دکمه ی مورد نظر کلاس dropdown-toggle  و خصوصیت  data-toggle=”dropdown” را اضافه کنید تا منو قابلیت باز شدن داشته باشد.
برای اضافه کردن آیتم های منو از تگ های ul و li استفاده کنید و به تگ ul کلاس dropdown-menu  را بدهید. به کد زیر دقت کنید.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Html</button>
  <button type="button" class="btn btn-primary">Css</button>
  <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Bootstrap <span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
              <li><a href="#">BS Button</a></li>
              <li><a href="#">BS Button Groups</a></li>
          </ul>
   </div>
</div>

خروجی کد بالا در این تصویر نشان داده شده است.

برای تقسیم بندی دکمه ای که منوی کشویی دارد، کافی است قسمتی که مربوط به فلش باز کردن منو است را در یک تگ button جداگانه بنویسید. به کد زیر دقت کنید.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Bootstrap</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
       <li><a href="#">BS Button</a></li>
       <li><a href="#">BS Button Groups</a></li>
  </ul>
</div>

خروجی به صورت زیر است.

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

استایل دهی به متن در بوت استرپ

جدول در بوت استرپ

تصاویر در بوت استرپ

کلاس های well و jumbotron در بوت استرپ

هشدارها در بوت استرپ

دکمه ها در بوت استرپ – قسمت اول

برای آگاهی از جدیدترین آموزش های طراحی سایت وب یار در کانال webyar_net@ عضو شوید.