گروه دکمه
مجموعهای از دکمهها را روی یک خط با گروه دکمهها گروهبندی کنید و با جاوا اسکریپت به آنها قدرت دهید.
مثال اساسی
یک سری دکمه را با .btn
داخل بپیچید .btn-group
. با افزونه دکمههای ما، رادیو جاوا اسکریپت اختیاری و رفتار استایل چک باکس را اضافه کنید .
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
اطمینان حاصل کنید که درست است role
و یک برچسب ارائه دهید
برای اینکه فناوری های کمکی (مانند صفحه خوان ها) نشان دهند که یک سری از دکمه ها گروه بندی شده اند، باید یک role
ویژگی مناسب ارائه شود. برای گروه های دکمه ای، این خواهد بود role="group"
، در حالی که نوار ابزار باید دارای یک role="toolbar"
باشد.
علاوه بر این، به گروه ها و نوار ابزارها باید یک برچسب صریح داده شود، زیرا اکثر فناوری های کمکی در غیر این صورت، علی رغم وجود ویژگی نقش صحیح، آنها را اعلام نمی کنند. در مثالهای ارائهشده در اینجا، از , استفاده میکنیم aria-label
، اما از جایگزینهایی مانند آن aria-labelledby
نیز میتوان استفاده کرد.
نوار ابزار دکمه
مجموعهای از گروههای دکمهها را در نوار ابزار دکمهها برای اجزای پیچیدهتر ترکیب کنید. در صورت نیاز از کلاس های کاربردی برای فاصله بین گروه ها، دکمه ها و موارد دیگر استفاده کنید.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
به راحتی می توانید گروه های ورودی را با گروه های دکمه ای در نوار ابزار خود ترکیب کنید. مشابه مثال بالا، احتمالاً به برخی از ابزارهای کمکی نیاز دارید تا به درستی فضاها را جابجا کنید.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
سایز بندی
بهجای اعمال کلاسهای اندازه دکمهها برای هر دکمه در یک گروه، فقط .btn-group-*
به هر یک اضافه کنید .btn-group
، از جمله هر یک در هنگام تودرتو کردن چند گروه.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
لانه سازی
زمانی که میخواهید منوهای کشویی با یک سری دکمه ترکیب شوند، یک را .btn-group
در دیگری قرار دهید..btn-group
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
تنوع عمودی
کاری کنید که مجموعه ای از دکمه ها به جای افقی به صورت عمودی روی هم قرار گیرند. کشویی دکمه تقسیم در اینجا پشتیبانی نمی شود.
<div class="btn-group-vertical">
...
</div>