Bootstrap 5 Button Groups: Vertical Button Groups, Button Groups Side by Side, Nesting Button Groups & Dropdown Menus

در طراحی وب، ابزارهایی که به کاربران امکان تعامل با سایت را می‌دهند، بسیار حائز اهمیت هستند. یکی از این ابزارها، گروه‌های دکمه است که در Bootstrap 5 به صورت پیش‌فرض ارائه می‌شوند. در این مقاله، به بررسی و آموزش استفاده از گروه‌های دکمه در Bootstrap 5 خواهیم پرداخت. سه مورد از نحوه استفاده از گروه‌های دکمه در Bootstrap 5 را بررسی می‌کنیم: گروه‌های دکمه عمودی، گروه‌های دکمه در کنار هم و تو در تو کردن گروه‌های دکمه با منوهای کشویی.

1. گروه‌های دکمه عمودی:

گروه‌های دکمه عمودی به شما امکان می‌دهند تا دکمه‌ها را به صورت عمودی در یک ستون نمایش دهید. برای استفاده از گروه‌های دکمه عمودی در Bootstrap 5، کافیست کد HTML زیر را به عنوان الگوی خود انتخاب کنید:

```html

<div class="btn-group-vertical">

<button type="button" class="btn btn-primary">دکمه 1</button>

<button type="button" class="btn btn-primary">دکمه 2</button>

<button type="button" class="btn btn-primary">دکمه 3</button>

</div>

```

مقاله مرتبط: BS 5 Jumbotron

2. گروه‌های دکمه در کنار هم:

در برخی مواقع، شاید نیاز داشته باشید تا دکمه‌ها را در یک سطر در کنار هم قرار دهید. در Bootstrap 5، شما می‌توانید از گروه‌های دکمه در کنار هم استفاده کنید. برای استفاده از گروه‌های دکمه در کنار هم در Bootstrap 5، کافیست کد HTML زیر را به عنوان الگوی خود انتخاب کنید:

```html

<div class="btn-group" role="group" aria-label="گروه دکمه‌ها">

<button type="button" class="btn btn-primary">دکمه 1</button>

<button type="button" class="btn btn-primary">دکمه 2</button>

<button type="button" class="btn btn-primary">دکمه 3</button>

</div>

```

پیشنهادی: آموزش بوت استرپ 5

3. تو در تو کردن گروه‌های دکمه با منوهای کشویی:

در Bootstrap 5، شما می‌توانید گروه‌های دکمه را با منوهای کشویی ترکیب کنید. این به شما امکان می‌دهد تا دکمه‌ها را به صورت سلسله‌مراتبی نمایش دهید. برای استفاده از گروه‌های دکمه تو در تو با منوهای کشویی در Bootstrap 5، کافیست کد HTML زیر را به عنوان الگوی خود انتختاب کنید:

```html

<div class="btn-group">

<button type="button" class="btn btn-primary">دکمه 1</button>

<button type="button" class="btn btn-primary">دکمه 2</button>

<div class="btn-group">

<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

منو

</button>

<div class="dropdown-menu">

<a class="dropdown-item" href="#">گزینه 1</a>

<a class="dropdown-item" href="#">گزینه 2</a>

<a class="dropdown-item" href="#">گزینه 3</a>

</div>

</div>

</div>

```

سوالات متداول

سوال ۱: چگونه می‌توانم گروه‌های دکمه عمودی را در Bootstrap 5 استفاده کنم؟

پاسخ: برای استفاده از گروه‌های دکمه عمودی در Bootstrap 5، کافیست کد HTML زیر را به عنوان الگوی خود انتخاب کنید:

```html

<div class="btn-group-vertical">

<button type="button" class="btn btn-primary">دکمه 1</button>

<button type="button" class="btn btn-primary">دکمه 2</button>

<button type="button" class="btn btn-primary">دکمه 3</button>

</div>

```

سوال ۲: چگونه می‌توانم گروه‌های دکمه را در کنار هم قرار دهم؟

پاسخ: برای قرار دادن دکمه‌ها در کنار هم به صورت گروهی در Bootstrap 5، می‌توانید از کد HTML زیر استفاده کنید:

```html

<div class="btn-group" role="group" aria-label="گروه دکمه‌ها">

<button type="button" class="btn btn-primary">دکمه 1</button>

<button type="button" class="btn btn-primary">دکمه 2</button>

<button type="button" class="btn btn-primary">دکمه 3</button>

</div>

```

سوال ۳: چگونه می‌توانم گروه‌های دکمه را با منوهای کشویی ترکیب کنم؟

پاسخ: برای ترکیب گروه‌های دکمه با منوهای کشویی در Bootstrap 5، می‌توانید از کد HTML زیر استفاده کنید:

```html

<div class="btn-group">

<button type="button" class="btn btn-primary">دکمه 1</button>

<button type="button" class="btn btn-primary">دکمه 2</button>

<div class="btn-group">

<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

منو

</button>

<div class="dropdown-menu">

<a class="dropdown-item" href="#">گزینه 1</a>

<a class="dropdown-item" href="#">گزینه 2</a>

<a class="dropdown-item" href="#">گزینه 3</a>

</div>

</div>

</div>

```

سوال ۴: آیا می‌توانم سبک و ظاهر گروه‌های دکمه را در Bootstrap 5 تغییر دهم؟

پاسخ: بله، در Bootstrap 5 شما می‌توانید با استفاده از کلاس‌های CSS مربوطه، سبک و ظاهر گروه‌های دکمه را تغییر دهید. برای مثال، با استفاده از کلاس‌های `btn-primary`، `btn-secondary` و غیره، می‌توانید رنگ دکمه‌ها را تغییر دهید. همچنین، با استفاده از کلاس‌های دیگری مانند `btn-lg`، `btn-sm` و غیره، می‌توانید اندازه دکمه‌ها را تنظیم کنید.

نتیجه:

در این مقاله، شما با استفاده از Bootstrap 5، نحوه استفاده از گروه‌های دکمه را در سه حالت مختلف، یعنی گروه‌های دکمه عمودی، گروه‌های دکمه در کنار هم و تو در تو کردن گروه‌های دکمه با منوهای کشویی، آموختید. با استفاده از این قابلیت‌ها، می‌توانید تجربه کاربری بهتری را برای کاربران خود فراهم کنید و سایت خود را بهبود دهید.