مجموعهای از دکمهها را روی یک خط با گروه دکمهها گروهبندی کنید و با جاوا اسکریپت به آنها قدرت دهید.
مثال اساسی
یک سری دکمه را با .btnداخل بپیچید .btn-group. با افزونه دکمههای ما، رادیو جاوا اسکریپت اختیاری و رفتار استایل چک باکس را اضافه کنید .
اطمینان حاصل کنید که درست است roleو یک برچسب ارائه دهید
برای اینکه فناوری های کمکی (مانند صفحه خوان ها) نشان دهند که یک سری از دکمه ها گروه بندی شده اند، باید یک roleویژگی مناسب ارائه شود. برای گروه های دکمه ای، این خواهد بود role="group"، در حالی که نوار ابزار باید دارای یک role="toolbar"باشد.
علاوه بر این، به گروه ها و نوار ابزارها باید یک برچسب صریح داده شود، زیرا اکثر فناوری های کمکی در غیر این صورت، علی رغم وجود ویژگی نقش صحیح، آنها را اعلام نمی کنند. در مثالهای ارائهشده در اینجا، از , استفاده میکنیم aria-label، اما از جایگزینهایی مانند آن aria-labelledbyنیز میتوان استفاده کرد.
نوار ابزار دکمه
مجموعهای از گروههای دکمهها را در نوار ابزار دکمهها برای اجزای پیچیدهتر ترکیب کنید. در صورت نیاز از کلاس های کاربردی برای فاصله بین گروه ها، دکمه ها و موارد دیگر استفاده کنید.
به راحتی می توانید گروه های ورودی را با گروه های دکمه ای در نوار ابزار خود ترکیب کنید. مشابه مثال بالا، احتمالاً به برخی از ابزارهای کمکی نیاز دارید تا به درستی فضاها را جابجا کنید.
@
@
سایز بندی
بهجای اعمال کلاسهای اندازه دکمهها برای هر دکمه در یک گروه، فقط .btn-group-*به هر یک اضافه کنید .btn-group، از جمله هر یک در هنگام تودرتو کردن چند گروه.
لانه سازی
زمانی که میخواهید منوهای کشویی با یک سری دکمه ترکیب شوند، یک را .btn-groupدر دیگری قرار دهید..btn-group