Sourceקבוצת כפתורים
קבץ סדרה של כפתורים יחד בשורה אחת עם קבוצת הכפתורים, והפעל אותם עם JavaScript.
דוגמה בסיסית
עטוף סדרה של כפתורים עם .btn
. .btn-group
הוסף התנהגות אופציונלית של JavaScript רדיו וסגנון תיבת סימון עם תוסף הלחצנים שלנו .
עותק
<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 id= "btnGroupDrop1" type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</button>
<div class= "dropdown-menu" aria-labelledby= "btnGroupDrop1" >
<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>