כפתורים
השתמש בסגנונות הכפתורים המותאמים אישית של Bootstrap עבור פעולות בטפסים, בדיאלוגים ועוד עם תמיכה במספר גדלים, מצבים ועוד.
Bootstrap כולל מספר סגנונות כפתורים מוגדרים מראש, כל אחד משרת את המטרה הסמנטית שלו, עם כמה תוספות שהוכנסו לשליטה רבה יותר.
העברת משמעות לטכנולוגיות מסייעות
שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .sr-only
בכיתה.
השיעורים .btn
מיועדים לשימוש עם <button>
האלמנט. עם זאת, אתה יכול גם להשתמש במחלקות אלה ב- <a>
or <input>
elements (אם כי דפדפנים מסוימים עשויים להחיל עיבוד מעט שונה).
בעת שימוש במחלקות לחצנים <a>
באלמנטים המשמשים להפעלת פונקציונליות בתוך הדף (כמו תוכן מתמוטט), במקום קישור לדפים או קטעים חדשים בדף הנוכחי, יש לתת קישורים אלה role="button"
כדי להעביר כראוי את מטרתם לטכנולוגיות מסייעות כגון קוראי מסך.
צריך כפתור, אבל לא את צבעי הרקע הכבדים שהם מביאים? החלף את מחלקות השינוי המוגדרות כברירת מחדל .btn-outline-*
באלו כדי להסיר את כל תמונות הרקע והצבעים בכל לחצן.
בא לכם על כפתורים גדולים או קטנים יותר? הוסף .btn-lg
או .btn-sm
לגדלים נוספים.
צור לחצנים ברמת הבלוק - אלה המשתרעים על כל הרוחב של הורה - על ידי הוספת .btn-block
.
הלחצנים יופיעו לחוץ (עם רקע כהה יותר, גבול כהה יותר וצל משובץ) כאשר הם פעילים. אין צורך להוסיף מחלקה ל- <button>
s מכיוון שהם משתמשים במחלקה פסאודו . עם זאת, אתה עדיין יכול לאלץ את אותה הופעה פעילה עם .active
(ולכלול את aria-pressed="true"
התכונה) אם תצטרך לשכפל את המצב באופן תוכנתי.
לגרום ללחצנים להיראות לא פעילים על ידי הוספת disabled
התכונה הבוליאנית לכל <button>
אלמנט.
כפתורים מושבתים המשתמשים <a>
באלמנט מתנהגים קצת אחרת:
<a>
s אינם תומכיםdisabled
בתכונה, לכן עליך להוסיף את.disabled
המחלקה כדי לגרום לה להיראות חזותית מושבתת.- כמה סגנונות ידידותיים לעתיד כלולים כדי להשבית את כל
pointer-events
כפתורי העוגן. בדפדפנים התומכים במאפיין זה, לא תראה את הסמן המושבת כלל. - ��חצנים מושבתים צריכים לכלול את
aria-disabled="true"
התכונה כדי לציין את מצב האלמנט לטכנולוגיות מסייעות.
אזהרת פונקציונליות קישור
המחלקה .disabled
משתמשת pointer-events: none
כדי לנסות להשבית את פונקציונליות הקישור של <a>
s, אבל מאפיין ה-CSS הזה עדיין לא סטנדרטי. בנוסף, אפילו בדפדפנים שכן תומכים pointer-events: none
, הניווט במקלדת לא מושפע, כלומר משתמשי מקלדת רואים ומשתמשים בטכנולוגיות מסייעות עדיין יוכלו להפעיל את הקישורים הללו. אז ליתר ביטחון, הוסף tabindex="-1"
תכונה בקישורים האלה (כדי למנוע מהם לקבל מיקוד במקלדת) והשתמש ב-JavaScript מותאם אישית כדי להשבית את הפונקציונליות שלהם.
עשה יותר עם כפתורים. שליטה במצבי לחצנים או צור קבוצות של לחצנים עבור רכיבים נוספים כמו סרגלי כלים.
הוסף data-toggle="button"
כדי להחליף מצב של כפתור active
. אם אתה מחליף לחצן מראש, עליך להוסיף באופן ידני את .active
הכיתה ול- .aria-pressed="true"
<button>
ניתן להחיל את הסגנונות של Bootstrap .button
על אלמנטים אחרים, כגון <label>
s, כדי לספק תיבת סימון או החלפת לחצן סגנון רדיו. הוסף data-toggle="buttons"
לקובץ .btn-group
המכיל את אותם כפתורים ששונו כדי לאפשר את התנהגות ההחלפה שלהם באמצעות JavaScript והוסף .btn-group-toggle
לסגנון ה- <input>
s בתוך הכפתורים שלך. שים לב שאתה יכול ליצור כפתורים בודדים המופעלים על ידי קלט או קבוצות שלהם.
המצב המסומן עבור כפתורים אלה מתעדכן רק באמצעות click
אירוע בלחצן. אם אתה משתמש בשיטה אחרת כדי לעדכן את הקלט - למשל, עם <input type="reset">
או על ידי יישום ידני של המאפיין של הקלט checked
- תצטרך להפעיל .active
את הקלט <label>
באופן ידני.
שים לב שכפתורים מסומנים מראש מחייבים אותך להוסיף באופן ידני את .active
המחלקה לקלט של הקלט <label>
.
שיטה | תיאור |
---|---|
$().button('toggle') |
מחליף מצב דחיפה. נותן לכפתור את המראה שהוא הופעל. |
$().button('dispose') |
הורס כפתור של אלמנט. |