כפתורים

השתמש בסגנונות הכפתורים המותאמים אישית של 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" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" 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')`	הורס כפתור של אלמנט.