רכיבים
למעלה מתריסר רכיבים לשימוש חוזר שנבנו כדי לספק איקונוגרפיה, תפריטים נפתחים, קבוצות קלט, ניווט, התראות ועוד הרבה יותר.
למעלה מתריסר רכיבים לשימוש חוזר שנבנו כדי לספק איקונוגרפיה, תפריטים נפתחים, קבוצות קלט, ניווט, התראות ועוד הרבה יותר.
כולל למעלה מ-250 גליפים בפורמט גופן מתוך ערכת ה-Glyphicon Halflings. Glyphicons Halflings בדרך כלל אינם זמינים בחינם, אך היוצר שלהם הפך אותם לזמינים עבור Bootstrap ללא עלות. בתור תודה, אנו רק מבקשים ממך לכלול קישור חזרה ל- Glyphicons במידת האפשר.
מטעמי ביצועים, כל הסמלים דורשים מחלקה בסיסית ומחלקת אייקונים בודדת. כדי להשתמש, מקם את הקוד הבא כמעט בכל מקום. הקפד להשאיר רווח בין הסמל לטקסט לצורך ריפוד מתאים.
לא ניתן לשלב באופן ישיר מחלקות אייקונים עם רכיבים אחרים. אין להשתמש בהם יחד עם מחלקות אחרות על אותו אלמנט. במקום זאת, הוסף מקנן <span>
והחל את מחלקות הסמלים על ה- <span>
.
יש להשתמש בשיעורי סמלים רק ברכיבים שאינם מכילים תוכן טקסט ואין להם אלמנטים צאצאים.
Bootstrap מניח שקובצי גופן אייקונים יהיו ממוקמים ../fonts/
בספרייה, ביחס לקבצי ה-CSS שהורכבו. העברה או שינוי שמות של קובצי גופן אלה פירושה עדכון ה-CSS באחת משלוש דרכים:
@icon-font-path
ו/או @icon-font-name
בקבצי המקור פחות.url()
הנתיבים ב-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, ייתכן שתרצה להסיר או לצבוע מחדש את הגבולות.
Internet Explorer 8 אינו מציג גבולות של לחצנים בקבוצת לחצנים מוצדקת, בין אם זה מופעל <a>
או <button>
אלמנטים. כדי לעקוף את זה, עטפו כל כפתור באחר .btn-group
.
ראה #12476 למידע נוסף.
<a>
אלמנטיםפשוט עטוף סדרה של .btn
s ב .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
להורה.
<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
) בצד אחד.
איננו תומכים במספר פקדי טופס בקבוצת קלט אחת.
<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>
לנתונים הזמינים ב-Bootstrap יש סימון משותף, החל ממחלקת הבסיס .nav
, כמו גם מצבים משותפים. החלף מחלקות שינוי כדי לעבור בין כל סגנון.
שימו לב .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
. במסכים קטנים יותר, קישורי הניווט מוערמים.
קישורי ניווט מוצדקים של סרגל ניווט אינם נתמכים כרגע.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
עבור כל רכיב ניווט (כרטיסיות או כדורים), הוסף .disabled
עבור קישורים אפורים וללא אפקטים של ריחוף .
<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 הם רכיבי מטא רספונסיביים המשמשים ככותרות ניווט עבור האפליקציה או האתר שלך. הם מתחילים להתמוטט (וניתנים להחלפה) בתצוגות ניידות והופכים לאופקיים ככל שרוחב יציאת התצוגה הזמין גדל.
קישורי ניווט מוצדקים של סרגל ניווט אינם נתמכים כרגע.
<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>
הוסף את .navbar-btn
המחלקה <button>
לאלמנטים שאינם נמצאים ב-a <form>
כדי למרכז אותם אנכית בסרגל הניווט.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
עטוף מחרוזות של טקסט באלמנט עם .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 על פני גדלי מכשירים.
הוסף והוסף .navbar-fixed-top
או .container
למרכז .container-fluid
ולתוכן של סרגל הניווט.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
הוסף והוסף .navbar-fixed-bottom
או .container
למרכז .container-fluid
ולתוכן של סרגל הניווט.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
צור סרגל ניווט ברוחב מלא שגולל משם עם הדף על ידי הוספה והוספה .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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
קישורי ביפר משתמשים גם .disabled
במחלקת השירות הכללית מהעימוד.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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>
כדי להפוך את הג'מבוטרון ברוחב מלא, וללא פינות מעוגלות, הנח אותו מחוץ לכל ה- .container
s ובמקום זאת הוסף .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 כמו כותרות, פסקאות או כפתורים לתמונות ממוזערות.
<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 של התראות .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</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) שאינה מאפשרת style-src 'unsafe-inline'
, לא תוכל להשתמש style
במאפיינים מוטבעים כדי להגדיר רוחב של סרגל ההתקדמות כפי שמוצג בדוגמאות שלנו למטה. שיטות חלופיות להגדרת הרוחב התואמים עם CSPs קפדניים כוללות שימוש במעט JavaScript מותאם אישית (שמגדיר element.style.width
) או שימוש במחלקות CSS מותאמות אישית.
סרגל התקדמות ברירת מחדל.
<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
מתוך סרגל ההתקדמות כדי להציג אחוז גלוי.
<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
לסרגל ההתקדמות.
<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>
סרגלי התקדמות משתמשים בחלק מאותם מחלקות כפתורים והתראה עבור סגנונות עקביים.
<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 ומטה.
<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 ומטה.
<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
כדי לערום אותם.
<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>
סגנונות אובייקט מופשטים לבניית סוגים שונים של רכיבים (כמו הערות בבלוג, ציוצים וכו') הכוללים תמונה מיושרת לשמאל או לימין לצד תוכן טקסטואלי.
המדיה המוגדרת כברירת מחדל מציגה אובייקט מדיה (תמונות, וידאו, אודיו) משמאל או ימינה של בלוק תוכן.
<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.
<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 משלך לפי הצורך.
<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>
הוסף את רכיב התגים לכל פריט קבוצתי ברשימה והוא ימוקם באופן אוטומטי בצד ימין.
<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
מדינה.
<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 בתוכו, אפילו עבור קבוצות רשימות מקושרות כמו זו שלמטה.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<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.
<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>