آشنایی با Bootstrap 5 Button Groups: گروه‌های دکمه با نسخه عمودی، کنار هم و تو در تو

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

1. گروه‌های دکمه با نسخه عمودی:

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

“`html

<div class="btn-group-vertical" role="group" aria-label="عنوان گروه دکمه">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</button>
<button type="button" class="btn btn-primary">دکمه ۳</button>
</div>

“`

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

برای نمایش دکمه‌ها در یک گروه کنار هم، از کلاس “btn-group” استفاده کنید. در ادامه کدی را مشاهده می‌کنید که نحوه استفاده از گروه‌های دکمه کنار هم را نشان می‌دهد:

“`html

<div class="btn-group" role="group" aria-label="عنوان گروه دکمه">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</button>
<button type="button" class="btn btn-primary">دکمه ۳</button>
</div>

“`

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

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

“`html

<div class="btn-group">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</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="#">گزینه ۱</a>
<a class="dropdown-item" href="#">گزینه ۲</a>
</div>
</div>
</div>

“`

مقالات مرتبط:

BS 5 Alerts

BS 5 Jumbotron

آموزش بوت استرپ Bootstrap 5

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

<div class="btn-group-vertical" role="group" aria-label="عنوان گروه دکمه">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</button>
<button type="button" class="btn btn-primary">دکمه ۳</button>
</div>

<div class="btn-group" role="group" aria-label="عنوان گروه دکمه">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</button>
<button type="button" class="btn btn-primary">دکمه ۳</button>
</div>

<div class="btn-group">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</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="#">گزینه ۱</a>
<a class="dropdown-item" href="#">گزینه ۲</a>
</div>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-primary">دکمه ۱</button>
<button type="button" class="btn btn-primary">دکمه ۲</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="#">گزینه ۱</a>
<a class="dropdown-item" href="#">گزینه ۲</a>
<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="#">گزینه ۳</a>
<a class="dropdown-item" href="#">گزینه ۴</a>
</div>
</div>
</div>
</div>
</div>

نتیجه‌گیری:

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