כפתורים
השתמש בסגנונות הכפתורים המותאמים אישית של Bootstrap עבור פעולות בטפסים, בדיאלוגים ועוד עם תמיכה במספר גדלים, מצבים ועוד.
Bootstrap כולל מספר סגנונות כפתורים מוגדרים מראש, כל אחד משרת את המטרה הסמנטית שלו, עם כמה תוספות שהוכנסו לשליטה רבה יותר.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>העברת משמעות לטכנולוגיות מסייעות
שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .sr-onlyבכיתה.
השיעורים .btnמיועדים לשימוש עם <button>האלמנט. עם זאת, אתה יכול גם להשתמש במחלקות אלה ב- <a>or <input>elements (אם כי דפדפנים מסוימים עשויים להחיל עיבוד מעט שונה).
בעת שימוש במחלקות לחצנים <a>באלמנטים המשמשים להפעלת פונקציונליות בתוך הדף (כמו תוכן מתמוטט), במקום קישור לדפים או קטעים חדשים בתוך הדף הנוכחי, יש לתת לקישורים הללו אסמכתא role="button"כדי להעביר כראוי את מטרתם לטכנולוגיות מסייעות כגון קוראי מסך.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">צריך כפתור, אבל לא את צבעי הרקע הכבדים שהם מביאים? החלף את מחלקות השינוי המוגדרות כברירת מחדל .btn-outline-*באלו כדי להסיר את כל תמונות הרקע והצבעים בכל לחצן.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>בא לכם על כפתורים גדולים או קטנים יותר? הוסף .btn-lgאו .btn-smלגדלים נוספים.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>צור לחצנים ברמת הבלוק - אלה המשתרעים על כל הרוחב של הורה - על ידי הוספת .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>הלחצנים יופיעו לחוץ (עם רקע כהה יותר, גבול כהה יותר וצל מובנה) כאשר הם פעילים. אין צורך להוסיף מחלקה ל- <button>s מכיוון שהם משתמשים במחלקה פסאודו . עם זאת, אתה עדיין יכול לאלץ את אותה הופעה פעילה עם .active(ולכלול את aria-pressed="true"התכונה) אם תצטרך לשכפל את המצב באופן תוכנתי.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>לגרום ללחצנים להיראות לא פעילים על ידי הוספת disabledהתכונה הבוליאנית לכל <button>אלמנט.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>כפתורים מושבתים המשתמשים <a>באלמנט מתנהגים קצת אחרת:
<a>s אינם תומכיםdisabledבתכונה, לכן עליך להוסיף את.disabledהמחלקה כדי לגרום לה להיראות חזותית מושבתת.- כמה סגנונות ידידותיים לעתיד כלולים כדי להשבית את כל
pointer-eventsכפתורי העוגן. בדפדפנים התומכים במאפיין זה, לא תראה את הסמן המושבת כלל. - לחצנים מושבתים צריכים לכלול את
aria-disabled="true"התכונה כדי לציין את מצב האלמנט לטכנולוגיות מסייעות.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>אזהרת פונקציונליות קישור
המחלקה .disabledמשתמשת pointer-events: noneכדי לנסות להשבית את פונקציונליות הקישור של <a>s, אבל מאפיין ה-CSS הזה עדיין לא סטנדרטי. בנוסף, אפילו בדפדפנים שכן תומכים pointer-events: none, הניווט במקלדת לא מושפע, כלומר משתמשי מקלדת רואים ומשתמשים בטכנולוגיות מסייעות עדיין יוכלו להפעיל את הקישורים הללו. אז ליתר ביטחון, הוסף tabindex="-1"תכונה בקישורים האלה (כדי למנוע מהם לקבל מיקוד במקלדת) והשתמש ב-JavaScript מותאם אישית כדי להשבית את הפונקציונליות שלהם.
עשה יותר עם כפתורים. שליטה במצבי לחצנים או צור קבוצות של לחצנים עבור רכיבים נוספים כמו סרגלי כלים.
הוסף data-toggle="button"כדי להחליף מצב של כפתור active. אם אתה מחליף לחצן מראש, עליך להוסיף באופן ידני את .activeהמחלקה ול- .aria-pressed="true"<button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</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>.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div><div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>| שיטה | תיאור |
|---|---|
$().button('toggle') |
מחליף מצב דחיפה. נותן לכפתור את המראה שהוא הופעל. |
$().button('dispose') |
הורס כפתור של אלמנט. |