כפתורים

השתמש בסגנונות הכפתורים המותאמים אישית של 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>

השבת גלישת טקסט

אם אינך רוצה שהטקסט של הכפתור יתעטף, תוכל להוסיף את .text-nowrapהכיתה לכפתור. ב-Sass, אתה יכול להגדיר $btn-white-space: nowrapלהשבית גלישת טקסט עבור כל כפתור.

תגי כפתור

השיעורים .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כפתורי העוגן. בדפדפנים התומכים במאפיין זה, לא תראה את ה��מן המושבת כלל.
• לחצנים מושבתים שמשתמשים <a>בהם צריכים לכלול את aria-disabled="true"התכונה כדי לציין את מצב האלמנט לטכנולוגיות מסייעות.
• לחצנים מושבתים שבהם משתמשים <a> לא אמורים לכלול את hrefהתכונה.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

אזהרת פונקציונליות קישור

כדי לכסות מקרים שבהם אתה צריך לשמור את hrefהתכונה בקישור מושבת, .disabledהכיתה משתמשת pointer-events: noneכדי לנסות להשבית את פונקציונליות הקישור של <a>s. שים לב שמאפיין CSS זה עדיין אינו סטנדרטי עבור HTML, אך כל הדפדפנים המודרניים תומכים בו. בנוסף, אפילו בדפדפנים שכן תומכים pointer-events: none, הניווט במקלדת לא מושפע, כלומר משתמשי מקלדת רואים ומשתמשים בטכנולוגיות מסייעות עדיין יוכלו להפעיל את הקישורים הללו. אז ליתר ביטחון, בנוסף ל aria-disabled="true", כלול גם tabindex="-1"תכונה בקישורים האלה כדי למנוע מהם לקבל מיקוד במקלדת, והשתמש ב-JavaScript מותאם אישית כדי להשבית את הפונקציונליות שלהם לחלוטין.

<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>

תוסף כפתור

עשה יותר עם כפתורים. שליטה במצבי לחצנים או צור קבוצות של לחצנים עבור רכיבים נוספים כמו סרגלי כלים.

החלף מצבים

הוסף data-toggle="button"כדי להחליף מצב של כפתור active. אם אתה מחליף לחצן מראש, עליך להוסיף באופן ידני את .activeהכיתה ול- .aria-pressed="true"<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

שיטות