גליפיקונים

גליפים זמינים

כולל למעלה מ-250 גליפים בפורמט גופן מתוך ערכת ה-Glyphicon Halflings. Glyphicons Halflings בדרך כלל אינם זמינים בחינם, אך היוצר שלהם הפך אותם לזמינים עבור Bootstrap ללא עלות. בתור תודה, אנו רק מבקשים ממך לכלול קישור חזרה ל- Glyphicons במידת האפשר.

  • גליפיקון גליפיקון-כוכבית
  • glyphicon glyphicon-plus
  • גליפיקון גליפיקון-אירו
  • glyphicon glyphicon-eur
  • גליפיקון גליפיקון-מינוס
  • גליפיקון גליפיקון-ענן
  • גליפיקון גליפיקון-מעטפת
  • גליפיקון גליפיקון-עיפרון
  • גליפיקון גליפיקון-זכוכית
  • גליפיקון גליפיקון-מוזיקה
  • גליפיקון גליפיקון-חיפוש
  • גליפיקון גליפיקון-לב
  • גליפיקון גליפיקון-כוכב
  • גליפיקון גליפיקון-כוכב-ריק
  • glyphicon glyphicon-משתמש
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • גליפיקון גליפיקון-בסדר
  • גליפיקון גליפיקון-הסר
  • glyphicon glyphicon-זום-אין
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • גליפיקון גליפיקון-אות
  • גליפיקון גליפיקון-קוג
  • גליפיקון גליפיקון-זבל
  • glyphicon glyphicon-home
  • glyphicon glyphicon-קובץ
  • גליפיקון גליפיקון-זמן
  • גליפיקון גליפיקון-כביש
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-הורדה
  • העלאת גליפיקון גליפיקון
  • glyphicon glyphicon-inbox
  • גליפיקון גליפיקון-משחק-מעגל
  • גליפיקון גליפיקון-חזרה
  • גליפיקון גליפיקון-רענון
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • גליפיקון גליפיקון-דגל
  • glyphicon glyphicon-אוזניות
  • glyphicon glyphicon-נפח-כבוי
  • גליפיקון גליפיקון-הורדת נפח
  • גליפיקון גליפיקון-הגדלת נפח
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-ברקוד
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • גליפיקון ספר גליפיקון
  • glyphicon glyphicon-סימנייה
  • גליפיקון גליפיקון-הדפס
  • גליפיקון מצלמת גליפיקון
  • glyphicon glyphicon-font
  • גליפיקון גליפיקון מודגש
  • גליפיקון גליפיקון נטוי
  • גליפיקון גליפיקון-טקסט-גובה
  • גליפיקון גליפיקון-טקסט-רוחב
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-תמונה
  • glyphicon glyphicon-map-marker
  • גליפיקון התאמת גליפיקון
  • גליפיקון גליפיקון-גוון
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • גליפיקון גליפיקון-צעד-לאחור
  • גליפיקון גליפיקון-מהיר-אחורה
  • גליפיקון גליפיקון-לאחור
  • גליפיקון משחק גליפיקון
  • גליפיקון גליפיקון-פאוזה
  • glyphicon glyphicon-stop
  • גליפיקון גליפיקון-קדימה
  • גליפיקון גליפיקון-מהיר קדימה
  • גליפיקון גליפיקון-צעד-קדימה
  • glyphicon glyphicon-eject
  • גליפיקון גליפיקון-שברון-שמאל
  • גליפיקון גליפיקון-שברון-ימין
  • glyphicon glyphicon-plus-sign
  • גליפיקון גליפיקון-סימן מינוס
  • גליפיקון גליפיקון-הסר-סימן
  • glyphicon glyphicon-ok-sign
  • גליפיקון גליפיקון-שאלה-סימן
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-צילום מסך
  • גליפיקון גליפיקון-הסר-מעגל
  • גליפיקון גליפיקון-אוקי-מעגל
  • גליפיקון גליפיקון-איסור-מעגל
  • גליפיקון גליפיקון-חץ-שמאלה
  • גליפיקון גליפיקון-חץ-ימינה
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-שינוי גודל-מלא
  • גליפיקון גליפיקון-שינוי גודל-קטן
  • גליפיקון גליפיקון-סימן-קריאה
  • גליפיקון גליפיקון-מתנה
  • גליפיקון גליפיקון-עלה
  • גליפיקון גליפיקון-אש
  • גליפיקון גליפיקון-עיניים פתוחות
  • גליפיקון גליפיקון-עין-קרוב
  • גליפיקון סימן-אזהרה-גליפיקון
  • גליפיקון גליפיקון-מישור
  • גליפיקון גליפיקון-לוח שנה
  • גליפיקון גליפיקון-אקראי
  • glyphicon glyphicon-comment
  • גליפיקון גליפיקון-מגנט
  • glyphicon glyphicon-chevron-up
  • גליפיקון גליפיקון-שברון-דאון
  • glyphicon glyphicon-ציוץ מחדש
  • גליפיקון גליפיקון-עגלת קניות
  • glyphicon glyphicon-תיקייה-סגור
  • glyphicon glyphicon-תיקיה-פתוח
  • גליפיקון גליפיקון-שינוי גודל-אנכי
  • גליפיקון גליפיקון-שינוי גודל-אופקי
  • glyphicon glyphicon-hdd
  • גליפיקון גליפיקון-בולהורן
  • גליפיקון גליפיקון-פעמון
  • גליפיקון תעודת גליפיקון
  • גליפיקון גליפיקון-אגודל למעלה
  • גליפיקון גליפיקון-אגודל-למטה
  • גליפיקון גליפיקון-יד-ימין
  • גליפיקון גליפיקון-יד-שמאל
  • גליפיקון גליפיקון-יד למעלה
  • גליפיקון גליפיקון-יד למטה
  • גליפיקון גליפיקון-מעגל-חץ-ימינה
  • גליפיקון גליפיקון-מעגל-חץ-שמאלה
  • גליפיקון גליפיקון-מעגל-חץ למעלה
  • גליפיקון גליפיקון-מעגל-חץ למטה
  • גליפיקון גליפיקון-גלובוס
  • גליפיקון גליפיקון-ברגים
  • גליפיקון משימות גליפיקון
  • גליפיקון גליפיקון-פילטר
  • glyphicon glyphicon-תיק
  • glyphicon glyphicon-מסך מלא
  • glyphicon glyphicon-לוח מחוונים
  • גליפיקון גליפיקון-מהדק
  • גליפיקון גליפיקון-לב-ריק
  • glyphicon glyphicon-link
  • גליפיקון גליפיקון-טלפון
  • גליפיקון גליפיקון-סיכה
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-מיין
  • גליפיקון גליפיקון-מיון-לפי-אלפבית
  • glyphicon glyphicon-מיין-לפי-אלפבית-alt
  • גליפיקון גליפיקון-מיון-לפי-סדר
  • glyphicon glyphicon-מיון-לפי-סדר-alt
  • גליפיקון גליפיקון-מיון-לפי-תכונות
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon לא מסומן
  • glyphicon glyphicon-expand
  • גליפיקון גליפיקון-התמוטטות-למטה
  • גליפיקון גליפיקון-התמוטטות
  • glyphicon glyphicon-login
  • גליפיקון גליפיקון-פלאש
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • גליפיקון גליפיקון-רשומה
  • גליפיקון גליפיקון-שמור
  • גליפיקון גליפיקון פתוח
  • גליפיקון נשמר גליפיקון
  • glyphicon glyphicon-ייבוא
  • glyphicon glyphicon-יצוא
  • גליפיקון גליפיקון-שלח
  • גליפיקון גליפיקון-תקליטון
  • גליפיקון גליפיקון-תקליטון-שמור
  • גליפיקון גליפיקון-תקליטון-הסר
  • גליפיקון גליפיקון-תקליטון-שמירה
  • גליפיקון גליפיקון-תקליטון-פתוח
  • glyphicon glyphicon-כרטיס אשראי
  • גליפיקון גליפיקון-העברה
  • גליפיקון גליפיקון-סכו"ם
  • glyphicon glyphicon-header
  • גליפיקון דחוס גליפיקון
  • glyphicon glyphicon-אוזניות
  • glyphicon glyphicon-phone-alt
  • גליפיקון גליפיקון-מגדל
  • גליפיקון גליפיקון-סטטיסטיקות
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-כתוביות
  • גליפיקון גליפיקון-סאונד-סטריאו
  • גליפיקון גליפיקון-סאונד-דולבי
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-סימן זכויות יוצרים
  • glyphicon glyphicon-רישום-סימן
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • גליפיקון גליפיקון-עץ-מחט
  • גליפיקון גליפיקון-עץ-נשיר
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • גליפיקון העלאת רמת גליפיקון
  • גליפיקון גליפיקון-עותק
  • גליפיקון גליפיקון-הדבק
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-אקוולייזר
  • גליפיקון גליפיקון-מלך
  • גליפיקון גליפיקון-מלכה
  • גליפיקון גליפיקון-פאון
  • גליפיקון גליפיקון-בישוף
  • גליפיקון גליפיקון-אביר
  • גליפיקון גליפיקון-נוסחה לתינוק
  • glyphicon glyphicon-אוהל
  • גליפיקון גליפיקון-לוח שחור
  • גליפיקון גליפיקון-מיטה
  • גליפיקון גליפיקון-תפוח
  • גליפיקון מחיקת גליפיקון
  • גליפיקון גליפיקון-שעון חול
  • גליפיקון גליפיקון-מנורת
  • גליפיקון גליפיקון-כפיל
  • גליפיקון גליפיקון-חזרזיר-בנק
  • גליפיקון גליפיקון-מספריים
  • גליפיקון גליפיקון-ביטקוין
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • גליפיקון גליפיקון-יין
  • glyphicon glyphicon-jpy
  • גליפיקון גליפיקון-רובל
  • גליפיקון גליפיקון-לפשוף
  • גליפיקון בקנה מידה גליפיקון
  • גליפיקון גליפיקון-קרח-לולי
  • גליפיקון גליפיקון-קרח-לולי-טעם
  • גליפיקון גליפיקון-חינוך
  • גליפיקון גליפיקון-אופציונלי-אופקי
  • glyphicon glyphicon-אופציונלי-אנכי
  • גליפיקון גליפיקון-תפריט-המבורגר
  • glyphicon glyphicon-modal-window
  • גליפיקון גליפיקון-שמן
  • גליפיקון גליפיקון-דגן
  • glyphicon glyphicon-משקפי שמש
  • גליפיקון גליפיקון-טקסט-גודל
  • גליפיקון גליפיקון-טקסט-צבע
  • גליפיקון גליפיקון-טקסט-רקע
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • גליפיקון גליפיקון-משולש-ימני
  • גליפיקון גליפיקון-משולש-שמאלי
  • גליפיקון גליפיקון-משולש-תחתית
  • גליפיקון גליפיקון-משולש-עליון
  • glyphicon glyphicon-console
  • גליפיקון גליפיקון-סופר-על
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

איך להישתמש

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

אין לערבב עם רכיבים אחרים

לא ניתן לשלב באופן ישיר מחלקות אייקונים עם רכיבים אחרים. אין להשתמש בהם יחד עם מחלקות אחרות על אותו אלמנט. במקום זאת, הוסף מקנן <span>והחל את מחלקות הסמלים על ה- <span>.

רק לשימוש על אלמנטים ריקים

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

שינוי מיקום גופן הסמל

Bootstrap מניח שקובצי גופן אייקונים יהיו ממוקמים ../fonts/בספרייה, ביחס לקבצי ה-CSS שהורכבו. העברה או שינוי שמות של קובצי גופן אלה פירושה עדכון ה-CSS באחת משלוש דרכים:

השתמש בכל אפשרות המתאימה ביותר למערך הפיתוח הספציפי שלך.

סמלים נגישים

גרסאות מודרניות של טכנולוגיות מסייעות יכריזו על תוכן שנוצר ב-CSS, כמו גם על תווים ספציפיים של Unicode. כדי למנוע פלט לא מכוון ומבלבל בקוראי מסך (במיוחד כאשר סמלים משמשים אך ורק לקישוט), אנו מסתירים אותם באמצעות aria-hidden="true"התכונה.

אם אתה משתמש בסמל כדי להעביר משמעות (ולא רק כאלמנט דקורטיבי), ודא שמשמעות זו תועבר גם לטכנולוגיות מסייעות - למשל, כלול תוכן נוסף, מוסתר ויזואלית עם .sr-onlyהכיתה.

אם אתה יוצר פקדים ללא טקסט אחר (כגון <button>שמכיל רק סמל), עליך תמיד לספק תוכן חלופי כדי לזהות את מטרת הפקד, כך שיהיה הגיוני למשתמשים בטכנולוגיות מסייעות. במקרה זה, תוכל להוסיף aria-labelתכונה על הפקד עצמו.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

דוגמאות

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

סמל המשמש בהתראה כדי להעביר שזו הודעת שגיאה, עם .sr-onlyטקסט נוסף כדי להעביר את הרמז הזה למשתמשים בטכנולוגיות מסייעות.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

תפריטים נפתחים

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

עטוף את הטריגר של התפריט הנפתח ואת התפריט הנפתח בתוך .dropdown, או אלמנט אחר שמצהיר position: relative;. לאחר מכן הוסף את ה-HTML של התפריט.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ניתן לשנות תפריטים נפתחים להתרחבות כלפי מעלה (במקום מטה) על ידי הוספה .dropupלהורה.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

כברירת מחדל, תפריט נפתח ממוקם באופן אוטומטי 100% מלמעלה ולאורך הצד השמאלי של ההורה שלו. הוסף לימין יישר .dropdown-menu-rightאת .dropdown-menuהתפריט הנפתח.

עשוי לדרוש מיקום נוסף

תפריטים נפתחים ממוקמים אוטומטית באמצעות CSS בתוך הזרימה הרגילה של המסמך. המשמעות היא שתפריטים נפתחים עשויים להיחתך על ידי הורים עם overflowמאפיינים מסוימים או להופיע מחוץ לתחום נקודת התצוגה. טפל בבעיות אלה בעצמך כשהן מתעוררות.

.pull-rightיישור הוצא משימוש

החל מגרסה 3.1.0, הוצאנו משימוש .pull-rightתפריטים נפתחים. כדי ליישר תפריט ימינה, השתמש ב- .dropdown-menu-right. רכיבי ניווט מיושרים לימין בסרגל הניווט משתמשים בגרסת mixin של מחלקה זו כדי ליישר אוטומטית את התפריט. כדי לעקוף אותו, השתמש ב- .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

הוסף כותרת לתווית מקטעי פעולות בכל תפריט נפתח.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

הוסף מחלק לסדרות נפרדות של קישורים בתפריט נפתח.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

הוסף .disabledל-a <li>בתפריט הנפתח כדי להשבית את הקישור.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

קבוצות כפתורים

קבץ סדרה של לחצנים יחד בשורה אחת עם קבוצת הכפתורים. הוסף התנהגות אופציונלית של JavaScript רדיו וסגנון תיבת סימון עם תוסף הלחצנים שלנו .

טיפים וכלים קופצים בקבוצות לחצנים דורשים הגדרה מיוחדת

בעת שימוש בטיפים של כלים או קופצים על אלמנטים בתוך .btn-group, יהיה עליך לציין את האפשרות container: 'body'להימנע מתופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/או מאבד את הפינות המעוגלות שלו כאשר תיאור הכלים או המוקפץ מופעל).

ודא נכון וספק roleתווית

על מנת שטכנולוגיות מסייעות - כגון קוראי מסך - יבינו שסדרת כפתורים מקובצת, יש לספק roleתכונה מתאימה. עבור קבוצות לחצנים, זה יהיה role="group", בעוד שבסרגלי כלים צריך להיות role="toolbar".

חריג אחד הן קבוצות המכילות רק פקד בודד (למשל קבוצות הכפתורים המוצדקות עם <button>אלמנטים) או תפריט נפתח.

בנוסף, יש לתת לקבוצות ולסרגלי כלים תווית מפורשת, שכן מרבית הטכנולוגיות המסייעות לא יכריזו עליהם, למרות נוכחות roleהתכונה הנכונה. בדוגמאות שסופקו כאן, אנו משתמשים ב- , אך ניתן להשתמש גם aria-labelבחלופות כגון .aria-labelledby

דוגמה בסיסית

עטוף סדרה של כפתורים עם .btn..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

סרגל כלים לחצנים

שלב סטים של <div class="btn-group">לרכיבים <div class="btn-toolbar">מורכבים יותר.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</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>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

קינון

הצב .btn-groupבתוך אחר .btn-groupכאשר אתה רוצה תפריטים נפתחים מעורבבים עם סדרה של לחצנים.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

וריאציה אנכית

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

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

קבוצות כפתורים מוצדקות

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

טיפול בגבולות

בשל ה-HTML וה-CSS הספציפיים המשמשים להצדקת כפתורים (כלומר display: table-cell), הגבולות ביניהם מוכפלים. בקבוצות כפתורים רגילות, margin-left: -1pxמשמש לערום את הגבולות במקום להסיר אותם. עם זאת, marginלא עובד עם display: table-cell. כתוצאה מכך, בהתאם להתאמות האישיות שלך ל-Bootstrap, ייתכן שתרצה להסיר או לצבוע מחדש את הגבולות.

IE8 וגבולות

Internet Explorer 8 אינו מציג גבולות של לחצנים בקבוצת לחצנים מוצדקת, בין אם זה מופעל <a>או <button>אלמנטים. כדי לעקוף את זה, עטפו כל כפתור באחר .btn-group.

ראה #12476 למידע נוסף.

עם <a>אלמנטים

פשוט עטוף סדרה של .btns ב .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

קישורים הפועלים ככפתורים

אם <a>האלמנטים משמשים כלחצנים - מפעילים פונקציונליות בתוך הדף, במקום ניווט למסמך או קטע אחר בעמוד הנוכחי - יש לתת להם גם התאמה מתאימה role="button".

עם <button>אלמנטים

כדי להשתמש בקבוצות לחצנים מוצדקות עם <button>אלמנטים, עליך לעטוף כל כפתור בקבוצת לחצנים . רוב הדפדפנים לא מיישמים כראוי את ה-CSS שלנו להצדקה על <button>אלמנטים, אבל מכיוון שאנו תומכים בתפריטי כפתורים נפתחים, אנו יכולים לעקוף זאת.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

כפתורים נפתחים

השתמש בכל כפתור כדי להפעיל תפריט נפתח על ידי הצבתו בתוך a .btn-groupומתן סימון התפריט המתאים.

תלות בפלאגין

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

תפריטים נפתחים של כפתור בודד

הפוך כפתור לתפריט נפתח עם כמה שינויים בסיסיים בסימון.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

תפריטים נפתחים של כפתור פיצול

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

גודל

כפתורים נפתחים פועלים עם כפתורים בכל הגדלים.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

וריאציה של Dropup

הפעל תפריטים נפתחים מעל אלמנטים על ידי הוספה .dropupלהורה.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

קבוצות קלט

הרחב את פקדי הטפסים על ידי הוספת טקסט או לחצנים לפני, אחרי או משני הצדדים של כל טקסט מבוסס טקסט <input>. השתמש .input-groupעם .input-group-addonאו .input-group-btnכדי להוסיף או להוסיף אלמנטים ליחיד .form-control.

טקסטים <input>בלבד

הימנע משימוש <select>באלמנטים כאן מכיוון שלא ניתן לעצב אותם במלואם בדפדפני WebKit.

הימנע משימוש <textarea>באלמנטים כאן מכיוון rowsשהתכונה שלהם לא תכובד במקרים מסוימים.

טיפים וכלים קופצים בקבוצות קלט דורשים הגדרה מיוחדת

בעת שימוש בטיפים של כלים או קופצים על אלמנטים בתוך .input-group, יהיה עליך לציין את האפשרות container: 'body'להימנע מתופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/או מאבד את הפינות המעוגלות שלו כאשר תיאור הכלים או המוקפץ מופעל).

אין לערבב עם רכיבים אחרים

אל תערבב קבוצות טופס או מחלקות עמודות רשת ישירות עם קבוצות קלט. במקום זאת, קן את קבוצת הקלט בתוך קבוצת הטפסים או האלמנט הקשור לרשת.

הוסף תמיד תוויות

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

הטכניקה המדויקת שבה יש להשתמש (אלמנטים גלויים <label>, <label>אלמנטים מוסתרים באמצעות .sr-onlyהמחלקה, או שימוש בתכונה aria-label, aria-labelledby, aria-describedby, titleאו placeholderתכונה) ואיזה מידע נוסף יהיה צורך להעביר ישתנו בהתאם לסוג המדויק של ווידג'ט הממשק שאתה מיישם. הדוגמאות בחלק זה מספקות כמה גישות מוצעות, ספציפיות למקרה.

דוגמה בסיסית

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

אנחנו לא תומכים במספר הרחבות ( .input-group-addonאו .input-group-btn) בצד אחד.

איננו תומכים במספר פקדי טופס בקבוצת קלט אחת.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

גודל

הוסף את מחלקות גודל הטופס היחסיות .input-groupלעצמה והתוכן בפנים ישנה אוטומטית את הגודל - אין צורך לחזור על מחלקות הגודל של בקרת הטופס בכל רכיב.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

תיבות סימון ותוספות רדיו

הצב כל תיבת סימון או אפשרות רדיו בתוך תוסף של קבוצת קלט במקום טקסט.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

תוספות לחצנים

הלחצנים בקבוצות קלט הם קצת שונים ודורשים רמה אחת נוספת של קינון. במקום .input-group-addon, תצטרך להשתמש .input-group-btnכדי לעטוף את הכפתורים. זה נדרש עקב סגנונות ברירת מחדל של דפדפן שלא ניתן לעקוף.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

כפתורים עם תפריטים נפתחים

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

כפתורים מפולחים

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

מספר כפתורים

אמנם אתה יכול לקבל רק תוסף אחד בכל צד, אבל אתה יכול להחזיק מספר כפתורים בתוך .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs

לנתונים הזמינים ב-Bootstrap יש סימון משותף, החל ממחלקת הבסיס .nav, כמו גם מצבים משותפים. החלף מחלקות שינוי כדי לעבור בין כל סגנון.

שימוש ב-navs עבור לוחות כרטיסיות דורש תוסף JavaScript לשוניות

עבור כרטיסיות עם אזורים הניתנים לכרטיסיות, עליך להשתמש בתוסף JavaScript של tabs . הסימון ידרוש גם תכונות נוספות ו-ARIA - ראה את הסימון לדוגמהrole של התוסף לפרטים נוספים.

הפוך את הניווטים המשמשים כניווט לנגישים

אם אתה משתמש ב-navs כדי לספק סרגל ניווט, הקפד להוסיף א role="navigation"למכיל האב ההגיוני ביותר של ה- <ul>, או לעטוף <nav>אלמנט סביב כל הניווט. אל תוסיף את התפקיד <ul>לעצמו, מכיוון שזה ימנע את הכרזתו כרשימה ממשית על ידי טכנולוגיות מסייעות.

שימו לב .nav-tabsשהמחלקה דורשת את .navהמחלקה הבסיסית.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

קח את אותו HTML, אבל השתמש .nav-pillsבמקום זאת:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

גלולות גם ניתנות לערום אנכית. רק להוסיף .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

הפוך בקלות כרטיסיות או גלולות לרוחבים שווים של ההורים במסכים רחבים מ-768 פיקסלים עם .nav-justified. במסכים קטנים יותר, קישורי הניווט מוערמים.

קישורי ניווט מוצדקים של סרגל ניווט אינם נתמכים כרגע.

ספארי וניווט מוצדק רספונסיבי

החל מגרסה 9.1.2, Safari מציג באג שבו שינוי גודל הדפדפן שלך אופקית גורם לשגיאות רינדור בניווט המוצדק שמתנקות בעת רענון. באג זה מוצג גם בדוגמה הניווט המוצדקת .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

עבור כל רכיב ניווט (כרטיסיות או כדורים), הוסף .disabledעבור קישורים אפורים וללא אפקטים של ריחוף .

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

מחלקה זו תשנה רק את <a>המראה של ה-'s, לא את הפונקציונליות שלו. השתמש ב-JavaScript מותאם אישית כדי להשבית קישורים כאן.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

הוסף תפריטים נפתחים עם מעט HTML נוסף ואת הפלאגין JavaScript הנפתחות .

כרטיסיות עם תפריטים נפתחים

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

גלולות עם תפריט נפתח

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbar

סרגלי Navbar הם רכיבי מטא רספונסיביים המשמשים ככותרות ניווט עבור האפליקציה או האתר שלך. הם מתחילים להתמוטט (וניתנים להחלפה) בתצוגות ניידות והופכים לאופקיים ככל שרוחב יציאת התצוגה הזמין גדל.

קישורי ניווט מוצדקים של סרגל ניווט אינם נתמכים כרגע.

תוכן עולה על גדותיו

מכיוון ש-Bootstrap לא יודע כמה מקום צריך התוכן בסרגל הניווט שלך, אתה עלול להיתקל בבעיות עם גלישת תוכן לשורה שנייה. כדי לפתור את זה, אתה יכול:

  1. הקטנת הכמות או הרוחב של פריטי הניווט.
  2. הסתר פריטי ניווט מסוימים בגדלי מסך מסוימים באמצעות מחלקות שירות רספונסיביות .
  3. שנה את הנקודה שבה סרגל הניווט שלך עובר בין מצב מכווץ למצב אופקי. התאם אישית את @grid-float-breakpointהמשתנה או הוסף שאילתת מדיה משלך.

דורש תוסף JavaScript

אם JavaScript מושבת ושדה התצוגה צר מספיק כדי שסרגל הניווט יתמוטט, אי אפשר יהיה להרחיב את סרגל הניווט ולהציג את התוכן בתוך ה- .navbar-collapse.

סרגל הניווט הרספונסיבי מחייב את התוסף לכיווץ להיכלל בגרסה שלך של Bootstrap.

שינוי נקודת השבירה של סרגל הניווט הנייד המכווץ

סרגל הניווט מתמוטט לתצוגה הניידת האנכית שלו כאשר שדה התצוגה צר יותר מ- @grid-float-breakpoint, ומתרחב לתצוגה האופקית הלא-נייד שלו כאשר נקודת התצוגה היא לפחות @grid-float-breakpointברוחב. התאם את המשתנה הזה במקור Less כדי לשלוט מתי סרגל הניווט מתכווץ/מתרחב. ערך ברירת המחדל הוא 768px(מסך ה"קטן" או ה"טאבלט" הקטן ביותר).

הפוך את סרגלי הניווט לנגישים

הקפד להשתמש <nav>באלמנט או, אם אתה משתמש ברכיב גנרי יותר כגון <div>, הוסף a role="navigation"לכל סרגל ניווט כדי לזהות אותו באופן מפורש כאזור ציון דרך עבור משתמשים בטכנולוגיות מסייעות.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

החלף את המותג navbar בתמונה משלך על ידי החלפת הטקסט ב- <img>. מכיוון .navbar-brandשיש לו ריפוד וגובה משלו, ייתכן שתצטרך לעקוף חלק מה-CSS בהתאם לתמונה שלך.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

הצב בתוכו תוכן של טופס .navbar-formליישור אנכי נכון והתנהגות מכווצת באזורי תצוגה צרים. השתמש באפשרויות היישור כדי להחליט היכן הוא נמצא בתוכן סרגל הניווט.

בתור הערה, .navbar-formחולק חלק גדול מהקוד שלו .form-inlineבאמצעות mixin. פקדי טפסים מסוימים, כמו קבוצות קלט, עשויים לדרוש רוחבים קבועים כדי להופיע כהלכה בתוך סרגל ניווט.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

אזהרות במכשירים ניידים

יש כמה אזהרות בנוגע לשימוש בפקדי טופס בתוך אלמנטים קבועים במכשירים ניידים. עיין במסמכי התמיכה בדפדפן שלנו לפרטים.

הוסף תמיד תוויות

קוראי מסך יתקשו עם הטפסים שלך אם לא תכלול תווית לכל קלט. עבור טפסים מוטבעים אלה, תוכל להסתיר את התוויות באמצעות .sr-onlyהמחלקה. ישנן שיטות חלופיות נוספות לספק תווית לטכנולוגיות מסייעות, כגון התכונה aria-label, aria-labelledbyאו . titleאם אף אחד מאלה אינו קיים, קוראי מסך עשויים להשתמש placeholderבתכונה, אם קיימת, אך שים לב שלא placeholderמומלץ להשתמש בה כתחליף לשיטות תיוג אחרות.

הוסף את .navbar-btnהמחלקה <button>לאלמנטים שאינם נמצאים ב-a <form>כדי למרכז אותם אנכית בסרגל הניווט.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

שימוש ספציפי להקשר

כמו מחלקות הכפתורים הסטנדרטיות , .navbar-btnניתן להשתמש ב- <a>ו- <input>elements. עם זאת, אין .navbar-btnלהשתמש גם במחלקות הכפתורים הסטנדרטיות <a>ברכיבים בתוך .navbar-nav.

עטוף מחרוזות של טקסט באלמנט עם .navbar-text, בדרך כלל על <p>תג כדי להוביל וצבע מתאימים.

<p class="navbar-text">Signed in as Mark Otto</p>

עבור אנשים המשתמשים בקישורים סטנדרטיים שאינם ברכיב הניווט הרגיל של סרגל הניווט, השתמש .navbar-linkבכיתה כדי להוסיף את הצבעים המתאימים לאפשרויות ברירת המחדל וההפוכות של סרגל הניווט.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

יישר קישורי ניווט, טפסים, לחצנים או טקסט, באמצעות מחלקות השירות .navbar-leftאו . .navbar-rightשתי המחלקות יוסיפו ציף CSS בכיוון שצוין. לדוגמה, כדי ליישר קישורי ניווט, שים אותם בנפרד <ul>עם מחלקת השירות המתאימה.

מחלקות אלה הן גרסאות משולבות של .pull-leftו- .pull-right, אך הן מותאמות לשאילתות מדיה לטיפול קל יותר ברכיבי ה-navbar על פני גדלי מכשירים.

יישור ימני של מספר רכיבים

ל- Navbars יש כיום מגבלה עם מספר .navbar-rightמחלקות. כדי לרווח נכון את התוכן, אנו משתמשים בשוליים שליליים .navbar-rightבאלמנט האחרון. כאשר ישנם מספר אלמנטים המשתמשים במחלקה זו, השוליים הללו אינם פועלים כמתוכנן.

נחזור על זה כשנוכל לשכתב את הרכיב הזה ב-v4.

הוסף והוסף .navbar-fixed-topאו .containerלמרכז .container-fluidולתוכן של סרגל הניווט.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

נדרש ריפוד גוף

סרגל הניווט הקבוע יכסה את התוכן האחר שלך, אלא אם תוסיף paddingלחלק העליון של ה- <body>. נסה את הערכים שלך או השתמש בקטע שלנו למטה. טיפ: כברירת מחדל, סרגל הניווט גבוה ב-50 פיקסלים.

body { padding-top: 70px; }

הקפד לכלול את זה אחרי הליבה Bootstrap CSS.

הוסף והוסף .navbar-fixed-bottomאו .containerלמרכז .container-fluidולתוכן של סרגל הניווט.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

נדרש ריפוד גוף

סרגל הניווט הקבוע יכסה את התוכן האחר שלך, אלא אם תוסיף paddingלתחתית ה- <body>. נסה את הערכים שלך או השתמש בקטע שלנו למטה. טיפ: כברירת מחדל, סרגל הניווט גבוה ב-50 פיקסלים.

body { padding-bottom: 70px; }

הקפד לכלול את זה אחרי הליבה Bootstrap CSS.

צור סרגל ניווט ברוחב מלא שגולל משם עם הדף על ידי הוספה והוספה .navbar-static-topשל .containerאו .container-fluidלמרכז תוכן סרגל הניווט.

בניגוד .navbar-fixed-*לשיעורים, אין צורך לשנות ריפוד כלשהו ב- body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

שנה את המראה של סרגל הניווט על ידי הוספת .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

פרורי לחם

ציין את מיקום הדף הנוכחי בתוך היררכיית ניווט.

מפרידים מתווספים אוטומטית ב-CSS דרך :beforeו content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

דִפּוּף

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

עימוד ברירת מחדל

עימוד פשוט בהשראת Rdio, נהדר עבור אפליקציות ותוצאות חיפוש. קשה לפספס את הבלוק הגדול, ניתן להרחבה בקלות ומספק אזורי קליקים גדולים.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

תיוג רכיב העימוד

יש לעטוף את רכיב העימוד <nav>באלמנט כדי לזהות אותו כמדור ניווט לקוראי מסך וטכנולוגיות מסייעות אחרות. בנוסף, מכיוון שסביר להניח שלדף יש יותר מקטע ניווט אחד כזה (כגון הניווט הראשי בכותרת, או ניווט בסרגל הצד), מומלץ לספק תיאור aria-labelעבורו <nav>המשקף את מטרתו. לדוגמה, אם נעשה שימוש ברכיב העימוד כדי לנווט בין קבוצה של תוצאות חיפוש, תווית מתאימה יכולה להיות aria-label="Search results pages".

מצבים נכים ופעילים

קישורים ניתנים להתאמה אישית לנסיבות שונות. השתמש .disabledעבור קישורים בלתי ניתנים ללחיצה .activeוכדי לציין את הדף הנוכחי.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

אנו ממליצים להחליף עוגנים פעילים או מושבתים עבור <span>, או להשמיט את העוגן במקרה של החצים הקודמים/הבאים, כדי להסיר את פונקציונליות הלחיצה תוך שמירה על הסגנונות המיועדים.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

גודל

רוצה עימוד גדול או קטן יותר? הוסף .pagination-lgאו .pagination-smלגדלים נוספים.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ביפר

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

דוגמה כברירת מחדל

כברירת מחדל, הביפר מרכז קישורים.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

לחלופין, תוכל ליישר כל קישור לצדדים:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

מצב נכה אופציונלי

קישורי ביפר משתמשים גם .disabledבמחלקת השירות הכללית מהעימוד.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

תוויות

דוגמא

דוגמה לכותרת חדש

דוגמה לכותרת חדש

דוגמה לכותרת חדש

דוגמה לכותרת חדש

דוגמה לכותרת חדש
דוגמה לכותרת חדש
<h3>Example heading <span class="label label-default">New</span></h3>

וריאציות זמינות

הוסף כל אחת ממחלקות השינוי המוזכרות למטה כדי לשנות את המראה של תווית.

ברירת מחדל ראשי הצלחה מידע אזהרה סכנה
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

יש לך טונות של תוויות?

inline-blockבעיות רינדור יכולות להתעורר כאשר יש לך עשרות תוויות מוטבעות בתוך מיכל צר, כל אחת מכילה אלמנט משלה (כמו סמל). הדרך לעקוף את זה היא הגדרה display: inline-block;. להקשר ודוגמה, ראה #13219 .

תגים

הדגש בקלות פריטים חדשים או שלא נקראו על ידי הוספת א <span class="badge">לקישורים, ניווט Bootstrap ועוד.

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

עצמי מתמוטט

כאשר אין פריטים חדשים או שלא נקראו, התגים פשוט יקרסו (דרך :emptyהבורר של CSS) בתנאי שלא קיים תוכן בתוכם.

תאימות בין דפדפנים

תגים לא יתמוטטו מעצמם ב-Internet Explorer 8 מכיוון שאין לו תמיכה :emptyבבורר.

מסתגל למצבי ניווט פעילים

סגנונות מובנים כלולים להצבת תגים במצבים פעילים בניווט בגלולות.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ג'מבוטרון

רכיב קל משקל וגמיש שיכול להרחיב באופן אופציונלי את כל שדה התצוגה כדי להציג תוכן מפתח באתר שלך.

שלום עולם!

זוהי יחידת גיבור פשוטה, רכיב פשוט בסגנון ג'מבוטרון להפניית תשומת לב נוספת לתוכן או מידע מומלצים.

למד עוד

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

כדי להפוך את הג'מבוטרון ברוחב מלא, וללא פינות מעוגלות, הנח אותו מחוץ לכל ה- .containers ובמקום זאת הוסף .containerבתוך.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

ראש הדף

מעטפת פשוטה h1לרווח ולפלח כראוי קטעי תוכן בדף. זה יכול להשתמש ברכיב h1ברירת המחדל של 's small, כמו גם ברוב הרכיבים האחרים (עם סגנונות נוספים).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

תמונות ממוזערות

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

אם אתם מחפשים מצגת דמוית Pinterest של תמונות ממוזערות בגבהים ו/או רוחבים משתנים, תצטרכו להשתמש בתוסף של צד שלישי כגון Masonry , Isotope או Salvattore .

דוגמה כברירת מחדל

כברירת מחדל, התמונות הממוזערות של Bootstrap נועדו להציג תמונות מקושרות עם סימון מינימלי נדרש.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

תוכן מותאם אישית

עם קצת סימון נוסף, אפשר להוסיף כל סוג של תוכן HTML כמו כותרות, פסקאות או כפתורים לתמונות ממוזערות.

100%x200

תווית תמונה ממוזערת

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

לַחְצָן לַחְצָן

100%x200

תווית תמונה ממוזערת

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

לַחְצָן לַחְצָן

100%x200

תווית תמונה ממוזערת

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

לַחְצָן לַחְצָן

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

התראות

ספק הודעות משוב קונטקסטואלי עבור פעולות משתמש טיפוסיות עם קומץ הודעות ההתראה הזמינות והגמישות.

דוגמאות

עטוף כל טקסט ולחצן ביטול אופציונלי .alertבאחד מארבעת המחלקות ההקשריות (למשל, .alert-success) עבור הודעות התראה בסיסיות.

אין שיעור ברירת מחדל

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

התראות הניתנות לביטול

התבסס על כל התראה על ידי הוספת כפתור אופציונלי .alert-dismissibleוסגירה.

דורש תוסף התראת JavaScript

להתראות מתפקדות במלואן, הניתנות לביטול, עליך להשתמש בתוסף JavaScript של התראות .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ודא התנהגות נאותה בכל המכשירים

הקפד להשתמש <button>באלמנט עם data-dismiss="alert"תכונת הנתונים.

השתמש .alert-linkבמחלקת השירות כדי לספק במהירות קישורים צבעוניים תואמים בכל התראה.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

פסי התקדמות

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

תאימות בין דפדפנים

פסי התקדמות משתמשים במעברי CSS3 ובאנימציות כדי להשיג חלק מהאפקטים שלהם. תכונות אלה אינן נתמכות ב-Internet Explorer 9 ומטה או בגרסאות ישנות יותר של Firefox. Opera 12 אינו תומך בהנפשות.

תאימות למדיניות אבטחת תוכן (CSP).

אם לאתר שלך יש מדיניות אבטחת תוכן (CSP) שאינה מאפשרת style-src 'unsafe-inline', לא תוכל להשתמש styleבמאפיינים מוטבעים כדי להגדיר רוחב של סרגל ההתקדמות כפי שמוצג בדוגמאות שלנו למטה. שיטות חלופיות להגדרת הרוחב התואמים עם CSPs קפדניים כוללות שימוש במעט JavaScript מותאם אישית (שמגדיר element.style.width) או שימוש במחלקות CSS מותאמות אישית.

דוגמה בסיסית

סרגל התקדמות ברירת מחדל.

60% הושלם
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

עם תווית

הסר את הכיתה <span>עם .sr-onlyמתוך סרגל ההתקדמות כדי להציג אחוז גלוי.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

כדי להבטיח שטקסט התווית יישאר קריא גם עבור אחוזים נמוכים, שקול להוסיף a min-widthלסרגל ההתקדמות.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

חלופות הקשריות

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

40% הושלם (הצלחה)
20% הושלם
60% הושלמו (אזהרה)
80% הושלם (סכנה)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

מְפוּספָּס

משתמש בשיפוע כדי ליצור אפקט פסים. לא זמין ב-IE9 ומטה.

40% הושלם (הצלחה)
20% הושלם
60% הושלמו (אזהרה)
80% הושלם (סכנה)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

אנימציה

הוסף .activeל .progress-bar-stripedכדי להנפיש את הפסים מימין לשמאל. לא זמין ב-IE9 ומטה.

45% הושלם
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

מְגוּבָּב

הנח מספר ברים באותו .progressכדי לערום אותם.

35% הושלם (הצלחה)
20% הושלמו (אזהרה)
10% הושלם (סכנה)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

אובייקט מדיה

סגנונות אובייקט מופשטים לבניית סוגים שונים של רכיבים (כמו הערות בבלוג, ציוצים וכו') הכוללים תמונה מיושרת לשמאל או לימין לצד תוכן טקסטואלי.

מדיה ברירת מחדל

המדיה המוגדרת כברירת מחדל מציגה אובייקט מדיה (תמונות, וידאו, אודיו) משמאל או ימינה של בלוק תוכן.

כותרת מדיה

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ב-faucibus.

כותרת מדיה

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ב-faucibus.

כותרת מדיה מקוננת

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ב-faucibus.

כותרת מדיה

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

כותרת מדיה

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

המחלקות .pull-leftוגם .pull-rightקיימות ושימשו בעבר כחלק ממרכיב המדיה, אך הוצאו משימוש לשימוש זה החל מגרסה 3.3.0. הם מקבילים בערך ל- .media-leftו .media-right, אלא .media-rightשצריך להציב אותם אחרי .media-bodyה-html.

יישור מדיה

ניתן ליישר את התמונות או מדיה אחרת מלמעלה, באמצע או למטה. ברירת המחדל היא מיושרת למעלה.

מדיה מיושרת למעלה

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ב-faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

מדיה מיושרת באמצע

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ב-faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

מדיה מיושרת למטה

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ב-faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

רשימת מדיה

עם קצת סימון נוסף, אתה יכול להשתמש במדיה בתוך רשימה (שימושי עבור שרשורי הערות או רשימות מאמרים).

  • כותרת מדיה

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    כותרת מדיה מקוננת

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    כותרת מדיה מקוננת

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    כותרת מדיה מקוננת

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

קבוצת רשימה

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

דוגמה בסיסית

קבוצת הרשימה הבסיסית ביותר היא פשוט רשימה לא מסודרת עם פריטי רשימה, והמחלקות המתאימות. בנה על זה עם האפשרויות הבאות, או CSS משלך לפי הצורך.

  • Cras justo odio
  • Dapibus ac facilisis in
  • מורבי ליאו ריסוס
  • Porta ac consectetur ac
  • וסטיבולום בארוס
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

תגים

הוסף את רכיב התגים לכל פריט קבוצתי ברשימה והוא ימוקם באופן אוטומטי בצד ימין.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1מורבי ליאו ריסוס
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

פריטים מקושרים

קישור פריטי קבוצת רשימה באמצעות תגי עוגן במקום פריטי רשימה (זה אומר גם הורה <div>במקום <ul>). אין צורך בהורים בודדים סביב כל אלמנט.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

פריטי כפתור

פריטי קבוצת רשימה עשויים להיות לחצנים במקום פריטי רשימה (זה אומר גם הורה <div>במקום <ul>). אין צורך בהורים בודדים סביב כל אלמנט. אל תשתמש .btnבשיעורים הסטנדרטיים כאן.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

פריטים מושבתים

הוסף .disabledל- .list-group-itemכדי לאפור אותו כדי להיראות מושבת.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

שיעורים קונטקסטואליים

השתמש במחלקות הקשריות לסגנון רשימה של פריטים, ברירת מחדל או מקושרים. כולל גם .activeמדינה.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • וסטיבולום בארוס
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

תוכן מותאם אישית

הוסף כמעט כל HTML בתוכו, אפילו עבור קבוצות רשימות מקושרות כמו זו שלמטה.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

פאנלים

אמנם לא תמיד הכרחי, אבל לפעמים אתה צריך לשים את ה-DOM שלך בקופסה. עבור מצבים אלה, נסה את רכיב הפאנל.

דוגמה בסיסית

כברירת מחדל, כל .panelמה שצריך לעשות הוא להחיל גבול וריפוד בסיסיים כדי להכיל תוכן מסוים.

דוגמה לפאנל בסיסי
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

פאנל עם כותרת

הוסף בקלות מיכל כותרת לפאנל שלך עם .panel-heading. אתה יכול גם לכלול כל <h1>- <h6>עם .panel-titleמחלקה כדי להוסיף כותרת בסגנון מראש. עם זאת, גדלי הגופן של <h1>- <h6>מוחקים על ידי .panel-heading.

לצביעת קישורים נכונה, הקפד למקם קישורים בכותרות בתוך .panel-title.

כותרת לוח ללא כותרת
תוכן הפאנל

כותרת הפאנל

תוכן הפאנל
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

גלישת לחצנים או טקסט משני ב- .panel-footer. שים לב שכותרות תחתונות של פאנל אינן יורשות צבעים וגבולות בעת שימוש בווריאציות הקשריות, מכיוון שהן לא אמורות להיות בחזית.

תוכן הפאנל
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

חלופות הקשריות

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

כותרת הפאנל

תוכן הפאנל

כותרת הפאנל

תוכן הפאנל

כותרת הפאנל

תוכן הפאנל

כותרת הפאנל

תוכן הפאנל

כותרת הפאנל

תוכן הפאנל
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

עם שולחנות

הוסף כל חלק שאינו מוגבל .tableבתוך פאנל לעיצוב חלק. אם יש .panel-body, נוסיף גבול נוסף לראש הטבלה להפרדה.

כותרת לוח

קצת תוכן לוח ברירת מחדל כאן. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

אם אין גוף לוח, הרכיב עובר מכותרת לוח לטבלה ללא הפרעה.

כותרת לוח
# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

עם קבוצות רשימה

כלול בקלות קבוצות רשימה ברוחב מלא בתוך כל פאנל.

כותרת לוח

קצת תוכן לוח ברירת מחדל כאן. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • מורבי ליאו ריסוס
  • Porta ac consectetur ac
  • וסטיבולום בארוס
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

הטמעה רספונסיבית

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

כללים מיושמים ישירות על <iframe>, <embed>, <video>ואלמנטים <object>; .embed-responsive-itemאם ברצונך להתאים את הסגנון עבור מאפיינים אחרים , השתמש באופן אופציונלי במעמד צאצא מפורש .

פרו-טיפ! אינך צריך לכלול frameborder="0"ב- <iframe>s שלך מכיוון שאנו עוקפים זאת עבורך.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

וולס

ברירת מחדל היטב

השתמש בבאר כאפקט פשוט על אלמנט כדי לתת לו אפקט מוכנס.

תראה, אני בבאר!
<div class="well">...</div>

שיעורים אופציונליים

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

תראה, אני בבאר גדולה!
<div class="well well-lg">...</div>
תראה, אני בבאר קטנה!
<div class="well well-sm">...</div>