למעלה מתריסר רכיבים לשימוש חוזר שנבנו כדי לספק איקונוגרפיה, תפריטים נפתחים, קבוצות קלט, ניווט, התראות ועוד הרבה יותר.
גליפיקונים
גליפים זמינים
כולל למעלה מ-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 באחת משלוש דרכים:
שנה את המשתנים @icon-font-pathו/או @icon-font-nameבקבצי המקור פחות.
השתמש בכל אפשרות המתאימה ביותר למערך הפיתוח הספציפי שלך.
סמלים נגישים
גרסאות מודרניות של טכנולוגיות מסייעות יכריזו על תוכן שנוצר ב-CSS, כמו גם על תווים ספציפיים של Unicode. כדי למנוע פלט לא מכוון ומבלבל בקוראי מסך (במיוחד כאשר סמלים משמשים אך ורק לקישוט), אנו מסתירים אותם באמצעות aria-hidden="true"התכונה.
אם אתה משתמש בסמל כדי להעביר משמעות (ולא רק כאלמנט דקורטיבי), ודא שמשמעות זו תועבר גם לטכנולוגיות מסייעות - למשל, כלול תוכן נוסף, מוסתר ויזואלית עם .sr-onlyהכיתה.
אם אתה יוצר פקדים ללא טקסט אחר (כגון <button>שמכיל רק סמל), עליך תמיד לספק תוכן חלופי כדי לזהות את מטרת הפקד, כך שיהיה הגיוני למשתמשים בטכנולוגיות מסייעות. במקרה זה, תוכל להוסיף aria-labelתכונה על הפקד עצמו.
דוגמאות
השתמש בהם בלחצנים, קבוצות לחצנים עבור סרגל כלים, ניווט, או קלט טפסים מוכנים.
סמל המשמש בהתראה כדי להעביר שזו הודעת שגיאה, עם .sr-onlyטקסט נוסף כדי להעביר את הרמז הזה למשתמשים בטכנולוגיות מסייעות.
כברירת מחדל, תפריט נפתח ממוקם באופן אוטומטי 100% מלמעלה ולאורך הצד השמאלי של ההורה שלו. הוסף לימין יישר .dropdown-menu-rightאת .dropdown-menuהתפריט הנפתח.
עשוי לדרוש מיקום נוסף
תפריטים נפתחים ממוקמים אוטומטית באמצעות CSS בתוך הזרימה הרגילה של המסמך. המשמעות היא שתפריטים נפתחים עשויים להיחתך על ידי הורים עם overflowמאפיינים מסוימים או להופיע מחוץ לתחום נקודת התצוגה. טפל בבעיות אלה בעצמך כשהן מתעוררות.
.pull-rightיישור הוצא משימוש
החל מגרסה 3.1.0, הוצאנו משימוש .pull-rightתפריטים נפתחים. כדי ליישר תפריט ימינה, השתמש ב- .dropdown-menu-right. רכיבי ניווט מיושרים לימין בסרגל הניווט משתמשים בגרסת mixin של מחלקה זו כדי ליישר אוטומטית את התפריט. כדי לעקוף אותו, השתמש ב- .dropdown-menu-left.
קבץ סדרה של לחצנים יחד בשורה אחת עם קבוצת הכפתורים. הוסף התנהגות אופציונלית של JavaScript רדיו וסגנון תיבת סימון עם תוסף הלחצנים שלנו .
טיפים וכלים קופצים בקבוצות לחצנים דורשים הגדרה מיוחדת
בעת שימוש בטיפים של כלים או קופצים על אלמנטים בתוך .btn-group, יהיה עליך לציין את האפשרות container: 'body'להימנע מתופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/או מאבד את הפינות המעוגלות שלו כאשר תיאור הכלים או המוקפץ מופעל).
ודא נכון וספק roleתווית
על מנת שטכנולוגיות מסייעות - כגון קוראי מסך - יבינו שסדרת כפתורים מקובצת, יש לספק roleתכונה מתאימה. עבור קבוצות לחצנים, זה יהיה role="group", בעוד שבסרגלי כלים צריך להיות role="toolbar".
חריג אחד הן קבוצות המכילות רק פקד בודד (למשל קבוצות הכפתורים המוצדקות עם <button>אלמנטים) או תפריט נפתח.
בנוסף, יש לתת לקבוצות ולסרגלי כלים תווית מפורשת, שכן מרבית הטכנולוגיות המסייעות לא יכריזו עליהם, למרות נוכחות roleהתכונה הנכונה. בדוגמאות שסופקו כאן, אנו משתמשים ב- , אך ניתן להשתמש גם aria-labelבחלופות כגון .aria-labelledby
דוגמה בסיסית
עטוף סדרה של כפתורים עם .btn..btn-group
סרגל כלים לחצנים
שלב סטים של <div class="btn-group">לרכיבים <div class="btn-toolbar">מורכבים יותר.
גודל
במקום להחיל שיעורי גודל לחצנים על כל כפתור בקבוצה, פשוט הוסף .btn-group-*לכל אחד מהם .btn-group, כולל בעת קינון של קבוצות מרובות.
קינון
הצב .btn-groupבתוך אחר .btn-groupכאשר אתה רוצה תפריטים נפתחים מעורבבים עם סדרה של לחצנים.
הפוך קבוצת כפתורים למתוח בגדלים שווים כדי להשתרע על כל רוחב האב שלה. עובד גם עם כפתורים נפתחים בתוך קבוצת הכפתורים.
טיפול בגבולות
בשל ה-HTML וה-CSS הספציפיים המשמשים להצדקת כפתורים (כלומר display: table-cell), הגבולות ביניהם מוכפלים. בקבוצות כפתורים רגילות, margin-left: -1pxמשמש לערום את הגבולות במקום להסיר אותם. עם זאת, marginלא עובד עם display: table-cell. כתוצאה מכך, בהתאם להתאמות האישיות שלך ל-Bootstrap, ייתכן שתרצה להסיר או לצבוע מחדש את הגבולות.
IE8 וגבולות
Internet Explorer 8 אינו מציג גבולות של לחצנים בקבוצת לחצנים מוצדקת, בין אם זה מופעל <a>או <button>אלמנטים. כדי לעקוף את זה, עטפו כל כפתור באחר .btn-group.
אם <a>האלמנטים משמשים כלחצנים - מפעילים פונקציונליות בתוך הדף, במקום ניווט למסמך או קטע אחר בעמוד הנוכחי - יש לתת להם גם התאמה מתאימה role="button".
עם <button>אלמנטים
כדי להשתמש בקבוצות לחצנים מוצדקות עם <button>אלמנטים, עליך לעטוף כל כפתור בקבוצת לחצנים . רוב הדפדפנים לא מיישמים כראוי את ה-CSS שלנו להצדקה על <button>אלמנטים, אבל מכיוון שאנו תומכים בתפריטי כפתורים נפתחים, אנו יכולים לעקוף זאת.
כפתורים נפתחים
השתמש בכל כפתור כדי להפעיל תפריט נפתח על ידי הצבתו בתוך a .btn-groupומתן סימון התפריט המתאים.
תלות בפלאגין
תפריטים נפתחים של לחצנים מחייבים את התוסף הנפתח להיכלל בגרסה שלך של Bootstrap.
תפריטים נפתחים של כפתור בודד
הפוך כפתור לתפריט נפתח עם כמה שינויים בסיסיים בסימון.
הרחב את פקדי הטפסים על ידי הוספת טקסט או לחצנים לפני, אחרי או משני הצדדים של כל טקסט מבוסס טקסט <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) בצד אחד.
איננו תומכים במספר פקדי טופס בקבוצת קלט אחת.
גודל
הוסף את מחלקות גודל הטופס היחסיות .input-groupלעצמה והתוכן בפנים ישנה אוטומטית את הגודל - אין צורך לחזור על מחלקות הגודל של בקרת הטופס בכל רכיב.
תיבות סימון ותוספות רדיו
הצב כל תיבת סימון או אפשרות רדיו בתוך תוסף של קבוצת קלט במקום טקסט.
תוספות לחצנים
הלחצנים בקבוצות קלט הם קצת שונים ודורשים רמה אחת נוספת של קינון. במקום .input-group-addon, תצטרך להשתמש .input-group-btnכדי לעטוף את הכפתורים. זה נדרש עקב סגנונות ברירת מחדל של דפדפן שלא ניתן לעקוף.
כפתורים עם תפריטים נפתחים
כפתורים מפולחים
מספר כפתורים
אמנם אתה יכול לקבל רק תוסף אחד בכל צד, אבל אתה יכול להחזיק מספר כפתורים בתוך .input-group-btn.
Navs
לנתונים הזמינים ב-Bootstrap יש סימון משותף, החל ממחלקת הבסיס .nav, כמו גם מצבים משותפים. החלף מחלקות שינוי כדי לעבור בין כל סגנון.
שימוש ב-navs עבור לוחות כרטיסיות דורש תוסף JavaScript לשוניות
עבור כרטיסיות עם אזורים הניתנים לכרטיסיות, עליך להשתמש בתוסף JavaScript של tabs . הסימון ידרוש גם תכונות נוספות ו-ARIA - ראה את הסימון לדוגמהrole של התוסף לפרטים נוספים.
הפוך את הניווטים המשמשים כניווט לנגישים
אם אתה משתמש ב-navs כדי לספק סרגל ניווט, הקפד להוסיף א role="navigation"למכיל האב ההגיוני ביותר של ה- <ul>, או לעטוף <nav>אלמנט סביב כל הניווט. אל תוסיף את התפקיד <ul>לעצמו, מכיוון שזה ימנע את הכרזתו כרשימה ממשית על ידי טכנולוגיות מסייעות.
כרטיסיות
שימו לב .nav-tabsשהמחלקה דורשת את .navהמחלקה הבסיסית.
הפוך בקלות כרטיסיות או גלולות לרוחבים שווים של ההורים במסכים רחבים מ-768 פיקסלים עם .nav-justified. במסכים קטנים יותר, קישורי הניווט מוערמים.
קישורי ניווט מוצדקים של סרגל ניווט אינם נתמכים כרגע.
ספארי וניווט מוצדק רספונסיבי
החל מגרסה 9.1.2, Safari מציג באג שבו שינוי גודל הדפדפן שלך אופקית גורם לשגיאות רינדור בניווט המוצדק שמתנקות בעת רענון. באג זה מוצג גם בדוגמה הניווט המוצדקת .
סרגלי Navbar הם רכיבי מטא רספונסיביים המשמשים ככותרות ניווט עבור האפליקציה או האתר שלך. הם מתחילים להתמוטט (וניתנים להחלפה) בתצוגות ניידות והופכים לאופקיים ככל שרוחב יציאת התצוגה הזמין גדל.
קישורי ניווט מוצדקים של סרגל ניווט אינם נתמכים כרגע.
תוכן עולה על גדותיו
מכיוון ש-Bootstrap לא יודע כמה מקום צריך התוכן בסרגל הניווט שלך, אתה עלול להיתקל בבעיות עם גלישת תוכן לשורה שנייה. כדי לפתור את זה, אתה יכול:
שנה את הנקודה שבה סרגל הניווט שלך עובר בין מצב מכווץ למצב אופקי. התאם אישית את @grid-float-breakpointהמשתנה או הוסף שאילתת מדיה משלך.
דורש תוסף JavaScript
אם JavaScript מושבת ושדה התצוגה צר מספיק כדי שסרגל הניווט יתמוטט, אי אפשר יהיה להרחיב את סרגל הניווט ולהציג את התוכן בתוך ה- .navbar-collapse.
סרגל הניווט הרספונסיבי מחייב את התוסף לכיווץ להיכלל בגרסה שלך של Bootstrap.
שינוי נקודת השבירה של סרגל הניווט הנייד המכווץ
סרגל הניווט מתמוטט לתצוגה הניידת האנכית שלו כאשר שדה התצוגה צר יותר מ- @grid-float-breakpoint, ומתרחב לתצוגה האופקית הלא-נייד שלו כאשר נקודת התצוגה היא לפחות @grid-float-breakpointברוחב. התאם את המשתנה הזה במקור Less כדי לשלוט מתי סרגל הניווט מתכווץ/מתרחב. ערך ברירת המחדל הוא 768px(מסך ה"קטן" או ה"טאבלט" הקטן ביותר).
הפוך את סרגלי הניווט לנגישים
הקפד להשתמש <nav>באלמנט או, אם אתה משתמש ברכיב גנרי יותר כגון <div>, הוסף a role="navigation"לכל סרגל ניווט כדי לזהות אותו באופן מפורש כאזור ציון דרך עבור משתמשים בטכנולוגיות מסייעות.
תמונת מותג
החלף את המותג navbar בתמונה משלך על ידי החלפת הטקסט ב- <img>. מכיוון .navbar-brandשיש לו ריפוד וגובה משלו, ייתכן שתצטרך לעקוף חלק מה-CSS בהתאם לתמונה שלך.
טפסים
הצב בתוכו תוכן של טופס .navbar-formליישור אנכי נכון והתנהגות מכווצת באזורי תצוגה צרים. השתמש באפשרויות היישור כדי להחליט היכן הוא נמצא בתוכן סרגל הניווט.
בתור הערה, .navbar-formחולק חלק גדול מהקוד שלו .form-inlineבאמצעות mixin. פקדי טפסים מסוימים, כמו קבוצות קלט, עשויים לדרוש רוחבים קבועים כדי להופיע כהלכה בתוך סרגל ניווט.
קוראי מסך יתקשו עם הטפסים שלך אם לא תכלול תווית לכל קלט. עבור טפסים מוטבעים אלה, תוכל להסתיר את התוויות באמצעות .sr-onlyהמחלקה. ישנן שיטות חלופיות נוספות לספק תווית לטכנולוגיות מסייעות, כגון התכונה aria-label, aria-labelledbyאו . titleאם אף אחד מאלה אינו קיים, קוראי מסך עשויים להשתמש placeholderבתכונה, אם קיימת, אך שים לב שלא placeholderמומלץ להשתמש בה כתחליף לשיטות תיוג אחרות.
כפתורים
הוסף את .navbar-btnהמחלקה <button>לאלמנטים שאינם נמצאים ב-a <form>כדי למרכז אותם אנכית בסרגל הניווט.
שימוש ספציפי להקשר
כמו מחלקות הכפתורים הסטנדרטיות , .navbar-btnניתן להשתמש ב- <a>ו- <input>elements. עם זאת, אין .navbar-btnלהשתמש גם במחלקות הכפתורים הסטנדרטיות <a>ברכיבים בתוך .navbar-nav.
טֶקסט
עטוף מחרוזות של טקסט באלמנט עם .navbar-text, בדרך כלל על <p>תג כדי להוביל וצבע מתאימים.
קישורים שאינם ניווט
עבור אנשים המשתמשים בקישורים סטנדרטיים שאינם ברכיב הניווט הרגיל של סרגל הניווט, השתמש .navbar-linkבכיתה כדי להוסיף את הצבעים המתאימים לאפשרויות ברירת המחדל וההפוכות של סרגל הניווט.
יישור רכיבים
יישר קישורי ניווט, טפסים, לחצנים או טקסט, באמצעות מחלקות השירות .navbar-leftאו . .navbar-rightשתי המחלקות יוסיפו ציף CSS בכיוון שצוין. לדוגמה, כדי ליישר קישורי ניווט, שים אותם בנפרד <ul>עם מחלקת השירות המתאימה.
מחלקות אלה הן גרסאות משולבות של .pull-leftו- .pull-right, אך הן מותאמות לשאילתות מדיה לטיפול קל יותר ברכיבי ה-navbar על פני גדלי מכשירים.
יישור ימני של מספר רכיבים
ל- Navbars יש כיום מגבלה עם מספר .navbar-rightמחלקות. כדי לרווח נכון את התוכן, אנו משתמשים בשוליים שליליים .navbar-rightבאלמנט האחרון. כאשר ישנם מספר אלמנטים המשתמשים במחלקה זו, השוליים הללו אינם פועלים כמתוכנן.
נחזור על זה כשנוכל לשכתב את הרכיב הזה ב-v4.
קבוע למעלה
הוסף והוסף .navbar-fixed-topאו .containerלמרכז .container-fluidולתוכן של סרגל הניווט.
נדרש ריפוד גוף
סרגל הניווט הקבוע יכסה את התוכן האחר שלך, אלא אם תוסיף paddingלחלק העליון של ה- <body>. נסה את הערכים שלך או השתמש בקטע שלנו למטה. טיפ: כברירת מחדל, סרגל הניווט גבוה ב-50 פיקסלים.
הקפד לכלול את זה אחרי הליבה Bootstrap CSS.
קבוע לתחתית
הוסף והוסף .navbar-fixed-bottomאו .containerלמרכז .container-fluidולתוכן של סרגל הניווט.
נדרש ריפוד גוף
סרגל הניווט הקבוע יכסה את התוכן האחר שלך, אלא אם תוסיף paddingלתחתית ה- <body>. נסה את הערכים שלך או השתמש בקטע שלנו למטה. טיפ: כברירת מחדל, סרגל הניווט גבוה ב-50 פיקסלים.
הקפד לכלול את זה אחרי הליבה Bootstrap CSS.
חלק עליון סטטי
צור סרגל ניווט ברוחב מלא שגולל משם עם הדף על ידי הוספה והוספה .navbar-static-topשל .containerאו .container-fluidלמרכז תוכן סרגל הניווט.
בניגוד .navbar-fixed-*לשיעורים, אין צורך לשנות ריפוד כלשהו ב- body.
סרגל ניווט הפוך
שנה את המראה של סרגל הניווט על ידי הוספת .navbar-inverse.
פרורי לחם
ציין את מיקום הדף הנוכחי בתוך היררכיית ניווט.
מפרידים מתווספים אוטומטית ב-CSS דרך :beforeו content.
ספק קישורי עימוד לאתר או לאפליקציה שלך עם רכיב העימוד מרובה עמודים, או חלופת הביפר הפשוטה יותר .
עימוד ברירת מחדל
עימוד פשוט בהשראת Rdio, נהדר עבור אפליקציות ותוצאות חיפוש. קשה לפספס את הבלוק הגדול, ניתן להרחבה בקלות ומספק אזורי קליקים גדולים.
תיוג רכיב העימוד
יש לעטוף את רכיב העימוד <nav>באלמנט כדי לזהות אותו כמדור ניווט לקוראי מסך וטכנולוגיות מסייעות אחרות. בנוסף, מכיוון שסביר להניח שלדף יש יותר מקטע ניווט אחד כזה (כגון הניווט הראשי בכותרת, או ניווט בסרגל הצד), מומלץ לספק תיאור aria-labelעבורו <nav>המשקף את מטרתו. לדוגמה, אם נעשה שימוש ברכיב העימוד כדי לנווט בין קבוצה של תוצאות חיפוש, תווית מתאימה יכולה להיות aria-label="Search results pages".
מצבים נכים ופעילים
קישורים ניתנים להתאמה אישית לנסיבות שונות. השתמש .disabledעבור קישורים בלתי ניתנים ללחיצה .activeוכדי לציין את הדף הנוכחי.
אנו ממליצים להחליף עוגנים פעילים או מושבתים עבור <span>, או להשמיט את העוגן במקרה של החצים הקודמים/הבאים, כדי להסיר את פונקציונליות הלחיצה תוך שמירה על הסגנונות המיועדים.
גודל
רוצה עימוד גדול או קטן יותר? הוסף .pagination-lgאו .pagination-smלגדלים נוספים.
ביפר
קישורים מהירים לקודמים ולבאים להטמעות פשוטות של עימוד עם סימון וסגנונות קלים. זה נהדר עבור אתרים פשוטים כמו בלוגים או מגזינים.
דוגמה כברירת מחדל
כברירת מחדל, הביפר מרכז קישורים.
קישורים מיושרים
לחלופין, תוכל ליישר כל קישור לצדדים:
מצב נכה אופציונלי
קישורי ביפר משתמשים גם .disabledבמחלקת השירות הכללית מהעימוד.
תוויות
דוגמא
דוגמה לכותרת חדש
דוגמה לכותרת חדש
דוגמה לכותרת חדש
דוגמה לכותרת חדש
דוגמה לכותרת חדש
דוגמה לכותרת חדש
וריאציות זמינות
הוסף כל אחת ממחלקות השינוי המוזכרות למטה כדי לשנות את המראה של תווית.
ברירת מחדל ראשי הצלחה מידע אזהרה סכנה
יש לך טונות של תוויות?
inline-blockבעיות רינדור יכולות להתעורר כאשר יש לך עשרות תוויות מוטבעות בתוך מיכל צר, כל אחת מכילה אלמנט משלה (כמו סמל). הדרך לעקוף את זה היא הגדרה display: inline-block;. להקשר ודוגמה, ראה #13219 .
תגים
הדגש בקלות פריטים חדשים או שלא נקראו על ידי הוספת א <span class="badge">לקישורים, ניווט Bootstrap ועוד.
כדי להפוך את הג'מבוטרון ברוחב מלא, וללא פינות מעוגלות, הנח אותו מחוץ לכל ה- .containers ובמקום זאת הוסף .containerבתוך.
ראש הדף
מעטפת פשוטה h1לרווח ולפלח כראוי קטעי תוכן בדף. זה יכול להשתמש ברכיב h1ברירת המחדל של 's small, כמו גם ברוב הרכיבים האחרים (עם סגנונות נוספים).
דוגמה לכותרת עמוד משנה לכותרת
תמונות ממוזערות
הרחב את מערכת הרשת של Bootstrap עם רכיב התמונות הממוזערות כדי להציג בקלות רשתות של תמונות, סרטונים, טקסט ועוד.
אם אתם מחפשים מצגת דמוית Pinterest של תמונות ממוזערות בגבהים ו/או רוחבים משתנים, תצטרכו להשתמש בתוסף של צד שלישי כגון Masonry , Isotope או Salvattore .
דוגמה כברירת מחדל
כברירת מחדל, התמונות הממוזערות של Bootstrap נועדו להציג תמונות מקושרות עם סימון מינימלי נדרש.
תוכן מותאם אישית
עם קצת סימון נוסף, אפשר להוסיף כל סוג של תוכן HTML כמו כותרות, פסקאות או כפתורים לתמונות ממוזערות.
תווית תמונה ממוזערת
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.
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.
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.
ספק הודעות משוב קונטקסטואלי עבור פעולות משתמש טיפוסיות עם קומץ הודעות ההתראה הזמינות והגמישות.
דוגמאות
עטוף כל טקסט ולחצן ביטול אופציונלי .alertבאחד מארבעת המחלקות ההקשריות (למשל, .alert-success) עבור הודעות התראה בסיסיות.
אין שיעור ברירת מחדל
להתראות אין מחלקות ברירת מחדל, רק מחלקות בסיס ושינויים. התראה אפורה כברירת מחדל אינה הגיונית מדי, אז אתה נדרש לציין סוג באמצעות מחלקה הקשרית. בחר בין הצלחה, מידע, אזהרה או סכנה.
כל הכבוד! קראת בהצלחה את הודעת ההתראה החשובה הזו.
שימו לב! ההתראה הזו דורשת את תשומת הלב שלך, אבל היא לא סופר חשובה.
אַזהָרָה! עדיף לבדוק את עצמך, אתה לא נראה טוב מדי.
אוי! שנה כמה דברים ונסה לשלוח שוב.
התראות הניתנות לביטול
התבסס על כל התראה על ידי הוספת כפתור אופציונלי .alert-dismissibleוסגירה.
ספק משוב עדכני על התקדמות זרימת עבודה או פעולה עם פסי התקדמות פשוטים אך גמישים.
תאימות בין דפדפנים
פסי התקדמות משתמשים במעברי CSS3 ובאנימציות כדי להשיג חלק מהאפקטים שלהם. תכונות אלה אינן נתמכות ב-Internet Explorer 9 ומטה או בגרסאות ישנות יותר של Firefox. Opera 12 אינו תומך בהנפשות.
תאימות למדיניות אבטחת תוכן (CSP).
אם לאתר שלך יש מדיניות אבטחת תוכן (CSP) שאינה מאפשרת style-src 'unsafe-inline', לא תוכל להשתמש styleבמאפיינים מוטבעים כדי להגדיר רוחב של סרגל ההתקדמות כפי שמוצג בדוגמאות שלנו למטה. שיטות חלופיות להגדרת הרוחב התואמים עם CSPs קפדניים כוללות שימוש במעט JavaScript מותאם אישית (שמגדיר element.style.width) או שימוש במחלקות CSS מותאמות אישית.
דוגמה בסיסית
סרגל התקדמות ברירת מחדל.
60% הושלם
עם תווית
הסר את הכיתה <span>עם .sr-onlyמתוך סרגל ההתקדמות כדי להציג אחוז גלוי.
60%
כדי להבטיח שטקסט התווית יישאר קריא גם עבור אחוזים נמוכים, שקול להוסיף a min-widthלסרגל ההתקדמות.
0%
2%
חלופות הקשריות
סרגלי התקדמות משתמשים בחלק מאותם מחלקות כפתורים והתראה עבור סגנונות עקביים.
40% הושלם (הצלחה)
20% הושלם
60% הושלמו (אזהרה)
80% הושלם (סכנה)
מְפוּספָּס
משתמש בשיפוע כדי ליצור אפקט פסים. לא זמין ב-IE9 ומטה.
40% הושלם (הצלחה)
20% הושלם
60% הושלמו (אזהרה)
80% הושלם (סכנה)
אנימציה
הוסף .activeל .progress-bar-stripedכדי להנפיש את הפסים מימין לשמאל. לא זמין ב-IE9 ומטה.
45% הושלם
מְגוּבָּב
הנח מספר ברים באותו .progressכדי לערום אותם.
35% הושלם (הצלחה)
20% הושלמו (אזהרה)
10% הושלם (סכנה)
אובייקט מדיה
סגנונות אובייקט מופשטים לבניית סוגים שונים של רכיבים (כמו הערות בבלוג, ציוצים וכו') הכוללים תמונה מיושרת לשמאל או לימין לצד תוכן טקסטואלי.
מדיה ברירת מחדל
המדיה המוגדרת כברירת מחדל מציגה אובייקט מדיה (תמונות, וידאו, אודיו) משמאל או ימינה של בלוק תוכן.
כותרת מדיה
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.
המחלקות .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.
רשימת מדיה
עם קצת סימון נוסף, אתה יכול להשתמש במדיה בתוך רשימה (שימושי עבור שרשורי הערות או רשימות מאמרים).
כותרת מדיה
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.
קבוצת רשימה
קבוצות רשימות הן רכיב גמיש וחזק להצגת לא רק רשימות פשוטות של אלמנטים, אלא מורכבים עם תוכן מותאם אישית.
דוגמה בסיסית
קבוצת הרשימה הבסיסית ביותר היא פשוט רשימה לא מסודרת עם פריטי רשימה, והמחלקות המתאימות. בנה על זה עם האפשרויות הבאות, או CSS משלך לפי הצורך.
Cras justo odio
Dapibus ac facilisis in
מורבי ליאו ריסוס
Porta ac consectetur ac
וסטיבולום בארוס
תגים
הוסף את רכיב התגים לכל פריט קבוצתי ברשימה והוא ימוקם באופן אוטומטי בצד ימין.
14Cras justo odio
2Dapibus ac facilisis in
1מורבי ליאו ריסוס
פריטים מקושרים
קישור פריטי קבוצת רשימה באמצעות תגי עוגן במקום פריטי רשימה (זה אומר גם הורה <div>במקום <ul>). אין צורך בהורים בודדים סביב כל אלמנט.
פריטי קבוצת רשימה עשויים להיות לחצנים במקום פריטי רשימה (זה אומר גם הורה <div>במקום <ul>). אין צורך בהורים בודדים סביב כל אלמנט. אל תשתמש .btnבשיעורים הסטנדרטיים כאן.
פריטים מושבתים
הוסף .disabledל- .list-group-itemכדי לאפור אותו כדי להיראות מושבת.
אמנם לא תמיד הכרחי, אבל לפעמים אתה צריך לשים את ה-DOM שלך בקופסה. עבור מצבים אלה, נסה את רכיב הפאנל.
דוגמה בסיסית
כברירת מחדל, כל .panelמה שצריך לעשות הוא להחיל גבול וריפוד בסיסיים כדי להכיל תוכן מסוים.
דוגמה לפאנל בסיסי
פאנל עם כותרת
הוסף בקלות מיכל כותרת לפאנל שלך עם .panel-heading. אתה יכול גם לכלול כל <h1>- <h6>עם .panel-titleמחלקה כדי להוסיף כותרת בסגנון מראש. עם זאת, גדלי הגופן של <h1>- <h6>מוחקים על ידי .panel-heading.
לצביעת קישורים נכונה, הקפד למקם קישורים בכותרות בתוך .panel-title.
כותרת לוח ללא כותרת
תוכן הפאנל
כותרת הפאנל
תוכן הפאנל
פאנל עם כותרת תחתונה
גלישת לחצנים או טקסט משני ב- .panel-footer. שים לב שכותרות תחתונות של פאנל אינן יורשות צבעים וגבולות בעת שימוש בווריאציות הקשריות, מכיוון שהן לא אמורות להיות בחזית.
תוכן הפאנל
חלופות הקשריות
כמו רכיבים אחרים, הפוך בקלות את הפאנל למשמעותי יותר להקשר מסוים על ידי הוספת כל אחת ממעמדות המצב ההקשרי.
כותרת הפאנל
תוכן הפאנל
כותרת הפאנל
תוכן הפאנל
כותרת הפאנל
תוכן הפאנל
כותרת הפאנל
תוכן הפאנל
כותרת הפאנל
תוכן הפאנל
עם שולחנות
הוסף כל חלק שאינו מוגבל .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
לארי
הציפור
@טוויטר
אם אין גוף לוח, הרכיב עובר מכותרת לוח לטבלה ללא הפרעה.
קצת תוכן לוח ברירת מחדל כאן. 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
וסטיבולום בארוס
הטמעה רספונסיבית
אפשר לדפדפנים לקבוע מימדים של וידאו או מצגת על סמך רוחב הבלוק המכילה שלהם על ידי יצירת יחס פנימי שישתלם כראוי בכל מכשיר.
כללים מיושמים ישירות על <iframe>, <embed>, <video>ואלמנטים <object>; .embed-responsive-itemאם ברצונך להתאים את הסגנון עבור מאפיינים אחרים , השתמש באופן אופציונלי במעמד צאצא מפורש .
פרו-טיפ! אינך צריך לכלול frameborder="0"ב- <iframe>s שלך מכיוון שאנו עוקפים זאת עבורך.
וולס
ברירת מחדל היטב
השתמש בבאר כאפקט פשוט על אלמנט כדי לתת לו אפקט מוכנס.
תראה, אני בבאר!
שיעורים אופציונליים
שליטה בריפוד ובפינות מעוגלות עם שתי כיתות שינוי אופציונליות.