آموزش Bootstrap-گروه بندی دکمه ها در Bootstrap 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل کار با دکمه Button در Bootstrap4 آشنا شدیم.

حال با ادامه آموزش بوت استرپ 4 همراه باشید:

آموزش گروه بندی دکمه ها Button در Bootstrap 4:

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

برای گروه بندی دکمه ها در Bootstrap 4، از یک تگ <div> با کلاس .btn-group استفاده کرده و Button ها را درون آن قرار می دهید، همانند کد مثال عملی زیر:

مثال 1

<div class=&quotbtn-group&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Apple</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Samsung</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Sony</button>

</div>

نکته :

به جای تعیین کلاس سایز در هر دکمه گروه، کافی است برای بزرگ بودن دکمه ها کلاس .btn-group-lg و برای کوچک بودن آن ها، کلاس .btn-group-sm را به تگ <div> یا عنصر دربرگیرنده دکمه ها، اضافه کنید. در شکل زیر سایز انواع دکمه های بوت استرپ 4 را نشان داده ایم:

آموزش bootstrap

مثال عملی: در کد مثال عملی زیر، 3 دکمه (Button) را با استفاده از کلاس btn-group-lg تگ <div>، در سایز بزرگ دسته بندی کرده ایم:

مثال 2

<div class=&quotbtn-group btn-group-lg&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Apple</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Samsung</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Sony</button>

</div>

آموزش گروه بندی عمودی دکمه ها در Bootstrap 4:

بوت استرپ 4 این امکان را نیز فراهم کرده که دکمه ها را به صورت عمودی گروه بندی نمایید، همانند شکل زیر:

برای این منظور، بایستی مثل کد مثال عملی زیر، دکمه ها را درون یک تگ <div> با کلاس .btn-group-vertical قرار دهید :

مثال 3

<div class=&quotbtn-group-vertical&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Apple</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Samsung</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Sony</button>

</div>

آموزش گروه بندی تو در تو (Nested) دکمه ها و ساخت منوی کشویی (DropDown) در بوت استرپ 4:

با گروه بندی تو در تو دکمه ها (Nested Buttons) در Bootstrap 4، می توانید منوهای کرکره ای یا DropDown ایجاد نمایید. در بخش های بعدی به آموزش کامل کار با DropDown در بوت استرپ خواهیم پرداخت.

مثال: در کد مثال عملی زیر، درون دکمه با عنوان Sony یک گروه دکمه قرار داده ایم که باعث شده تا این دکمه به صورت منوی کرکره ای در بیاید:

دوره آموزش BootStrap 4

مثال 4

<div class=&quotbtn-group&quot>AppleSamsung

<div class=&quotbtn-group&quot>Sony

<div class=&quotdropdown-menu&quot><a class=&quotdropdown-item&quot href=&quot#&quot>Tablet</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Smartphone</a></div>

</div>

</div>

با استفاده از یک تگ <span> با کلاس Caret می توانید بین عنوان منوی کرکره ای و فلش آن، کمی فاصله ایجاد کنید، همانند کد مثال و خروجی زیر:

<div class=&quotbtn-group&quot>Sony

<div class=&quotdropdown-menu&quot><a class=&quotdropdown-item&quot href=&quot#&quot>Tablet</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Smartphone</a></div>

</div>

همچنین در صورت استفاده از کلاس .btn-group-vertical، می توانید منوی کرکره ای و سایر دکمه ها را به صورت عمودی نشان دهید، همانند کد مثال زیر:

مثال 6

<div class=&quotbtn-group-vertical&quot>AppleSamsung

<div class=&quotbtn-group&quot>Sony

<div class=&quotdropdown-menu&quot><a class=&quotdropdown-item&quot href=&quot#&quot>Tablet</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Smartphone</a></div>

</div>

</div>

قرار دادن دو گروه دکمه در کنار هم در Bootstrap 4:

دکمه های گروهی به صورت پیش فرص خطی یا inline هستند، بنابراین اگر دو گروه دکمه در کنار یکدیگر نمایش داده می شوند، همانند کد مثال عملی زیر:

مثال 7

<div class=&quotbtn-group&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Apple</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Samsung</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Sony</button>

</div>

<div class=&quotbtn-group&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>BMW</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Mercedes</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Volvo</button>

</div>

آموزش کار با نشان برجسته Badges در Bootstrap 4

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

برای مثال می توانید از یک عنصر با کلاس .badges به همراه یک عنصر دیگر که دارای کلاس های رنگی متنی (مثلا کلاس .badges-secondary) است مثل یک المنت <span> برای ایجاد یک نشان مستطیل رنگی، استفاده کنید.

توجه داشته باشید که چنانچه عنصر badge درون یک عنصر مادر یا parent باشد، اندازه خود را بر حسب بزرگی یا کوچکی آن ، تنظیم می کند.

مثال عملی: در کد مثال عملی زیر، نحوه ایجاد یک عنصر badge را درون تگ های عنوان <h1> تا <h6> نشان داده ایم:

مثال 1

<h1>Example heading New</h1>

 <h2>Example heading New</h2>

 <h3>Example heading New</h3>

 <h4>Example heading New</h4>

 <h5>Example heading New</h5>

 <h6>Example heading New</h6>

آموزش استفاده از کلاس های متنی رنگی برای badge:

می توانید از کلاس های متنی رنگی پیش فرض بوت استرپ 4 ، که در بخش های قبلی آن ها را آموزش دادیم، برای تعیین رنگ عنصر badge استفاده نمایید.

مثال عملی : در کد مثال عملی زیر، انواع badge های رنگی را به وسیله کلاس های متنی رنگی Bootstrap 4 استفاده کرده ایم:

دوره آموزش BootStrap 4

مثال 2

<span class=&quotbadge badge-primary&quot>Primary</span>

<span class=&quotbadge badge-secondary&quot>Secondary</span>

<span class=&quotbadge badge-success&quot>Success</span>

<span class=&quotbadge badge-danger&quot>Danger</span>

<span class=&quotbadge badge-warning&quot>Warning</span>

<span class=&quotbadge badge-info&quot>Info</span>

<span class=&quotbadge badge-light&quot>Light</span>

<span class=&quotbadge badge-dark&quot>Dark</span>

آموزش ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4 :

از کلاس .badges-pill می توانید برای گرد کردن گوشه های عنصر badge در Bootstrap 4 استفاده کنید.

مثال: در کد مثال عملی زیر، نحوه استفاده از کلاس .badge-pill و ساخت Pill Badge را نشان داده ایم :

<span class=&quotbadge badge-pill badge-primary&quot>Primary</span>

<span class=&quotbadge badge-pill badge-secondary&quot>Secondary</span>

<span class=&quotbadge badge-pill badge-success&quot>Success</span>

<span class=&quotbadge badge-pill badge-danger&quot>Danger</span>

<span class=&quotbadge badge-pill badge-warning&quot>Warning</span>

<span class=&quotbadge badge-pill badge-info&quot>Info</span>

<span class=&quotbadge badge-pill badge-light&quot>Light</span>

<span class=&quotbadge badge-pill badge-dark&quot>Dark</span>

آموزش استفاده از Badge درون یک عنصر دیگر :

در کد مثال عملی زیر، از یک عنصر Badge در یک دکمه استفاده کرده ایم:

مثال 4

<p>Messages 4</p>

دوره آموزش BootStrap 4 ادامه دارد