רכיבים

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

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

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

שיטות עבודה מומלצות

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

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

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

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

כך נראה ה-HTML עבור קבוצת לחצנים סטנדרטית הבנויה עם לחצני תג עוגן:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

דוגמה לסרגל הכלים

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

טעמי צ'קבוק ורדיו

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

קבל את ה-Javascript »

תפריטים נפתחים בקבוצות כפתורים

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

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

סקירה כללית ודוגמאות

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

סימון דוגמה

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. פעולה
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "תפריט נפתח" >
  7. <!-- קישורי תפריט נפתח -->
  8. </ul>
  9. </div>

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

כפתורים נפתחים פועלים בכל גודל. גדלי הכפתורים שלך ל .btn-large, .btn-small, או .btn-mini.

דורש javascript

תפריטי כפתור נפתחים דורשים את התוסף הנפתח Bootstrap כדי לתפקד.

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


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

סקירה כללית ודוגמאות

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

מידות

השתמש במחלקות הלחצנים הנוספות .btn-mini, .btn-small, או .btn-largeלשינוי גודל.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "תפריט נפתח למשוך ימינה" >
  4. <!-- קישורי תפריט נפתח -->
  5. </ul>
  6. </div>

סימון דוגמה

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > פעולה </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "תפריט נפתח" >
  7. <!-- קישורי תפריט נפתח -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "תפריט נפתח" >
  7. <!-- קישורי תפריט נפתח -->
  8. </ul>
  9. </div>

עימוד רב-קון-עמודים

מתי להשתמש

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

קישורי עמוד ממלכתיים

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

יישור גמיש

הוסף אחת משתי מחלקות אופציונליות כדי לשנות את היישור של קישורי עימוד: .pagination-centeredו .pagination-right.

דוגמאות

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

סימון

עטוף ב- <div>, עימוד הוא רק <ul>.

  1. <div class = "Pagement" >
  2. <ul>
  3. <li><a href = "#" > הקודם </a></li>
  4. <li class = "פעיל" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > הבא </a></li>
  11. </ul>
  12. </div>

ביפר לקישורים מהירים של הקודמים והבאים

לגבי ביפר

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

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

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

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

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

  1. <ul class = "ביפר" >
  2. <li>
  3. <a href = "#" > הקודם </a>
  4. </li>
  5. <li>
  6. <a href = "#" > הבא </a>
  7. </li>
  8. </ul>

קישורים מיושרים

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

  1. <ul class = "ביפר" >
  2. <li class = "הקודם" >
  3. <a href = "#" > ישן יותר </a>
  4. </li>
  5. <li class = "הבא" >
  6. <a href = "#" > חדש יותר → </a>
  7. </li>
  8. </ul>
תוויות סימון
בְּרִירַת מֶחדָל <span class="label">Default</span>
הַצלָחָה <span class="label label-success">Success</span>
אַזהָרָה <span class="label label-warning">Warning</span>
חָשׁוּב <span class="label label-important">Important</span>
מידע <span class="label label-info">Info</span>
הפוך <span class="label label-inverse">Inverse</span>

על אודות

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

שיעורים זמינים

שֵׁם דוגמא סימון
בְּרִירַת מֶחדָל 1 <span class="badge">1</span>
הַצלָחָה 2 <span class="badge badge-success">2</span>
אַזהָרָה 4 <span class="badge badge-warning">4</span>
חָשׁוּב 6 <span class="badge badge-important">6</span>
מידע 8 <span class="badge badge-info">8</span>
הפוך 10 <span class="badge badge-inverse">10</span>

יחידת גיבורים

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

סימון

עטפו את התוכן שלכם ב- divlike so:

  1. <div class = "hero-unit" >
  2. <h1> כותרת </h1>
  3. <p> קו תג </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. למד עוד
  7. </a>
  8. </p>
  9. </div>

שלום עולם!

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

למד עוד

ראש הדף

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

  1. <div class = "page-header" >
  2. <h1> כותרת דף לדוגמה </h1>
  3. </div>

ברירת מחדל של תמונות ממוזערות

כברירת מחדל, התמונות הממוזערות של 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.

    פעולה פעולה

למה להשתמש בתמונות ממוזערות

תמונות ממוזערות (בעבר .media-gridעד גרסה 1.4) מעולות עבור רשתות של תמונות או סרטונים, תוצאות חיפוש תמונות, מוצרים קמעונאיים, תיקי עבודות ועוד. הם יכולים להיות קישורים או תוכן סטטי.

סימון פשוט וגמיש

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

משתמש בגדלים של עמודות רשת

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

הסימון

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

  1. <ul class = "תמונות ממוזערות" >
  2. <li class = "span3" >
  3. <a href = "#" class = "תמונה ממוזערת" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

עבור תוכן HTML מותאם אישית בתמונות ממוזערות, הסימון משתנה מעט. כדי לאפשר תוכן ברמת חסימה בכל מקום, אנו מחליפים את ה <a>- לייק <div>כך:

  1. <ul class = "תמונות ממוזערות" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> תווית תמונה ממוזערת </h5>
  6. <p> כיתוב תמונה ממוזערת ממש כאן... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

דוגמאות נוספות

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

ברירות מחדל קלות משקל

כיתה בסיס משוכתבת

עם Bootstrap 2, פישטנו את מחלקת הבסיס: .alertבמקום .alert-message. הקטנו גם את הסימון המינימלי הנדרש - לא <p>נדרש כברירת מחדל, רק החיצוני <div>.

הודעת התראה בודדת

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


הולך מצוין עם javascript

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

קבל את התוסף »

התראות לדוגמה

עטוף את ההודעה שלך וסמל סגירה אופציונלי ב-div עם שיעור פשוט.

אַזהָרָה! הכי טוב תבדוק את עצמך, אתה לא נראה טוב מדי.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> אזהרה! </strong> הכי טוב תבדוק את עצמך, אתה לא נראה טוב מדי.
  4. </div>

שימו לב! מכשירי iOS דורשים href="#"לביטול התראות. הקפד לכלול אותו ואת תכונת הנתונים עבור סמלי סגירת עוגן. לחלופין, אתה יכול להשתמש <button>באלמנט עם תכונת הנתונים, מה שבחרנו לעשות עבור המסמכים שלנו. בעת שימוש <button>, עליך לכלול type="button"או שהטפסים שלך לא יישלחו.

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

אַזהָרָה!

הכי טוב תבדוק את עצמך, אתה לא נראה טוב מדי. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > אזהרה! </h4>
  4. הכי טוב תבדוק את עצמך, אתה לא...
  5. </div>

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

טעות או סכנה

אוי! שנה כמה דברים ונסה לשלוח שוב.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

הַצלָחָה

כל הכבוד! קראת בהצלחה את הודעת ההתראה החשובה הזו.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

מֵידָע

שימו לב! ההתראה הזו דורשת את תשומת הלב שלך, אבל היא לא סופר חשובה.
  1. <div class = "Alert alert-info" >
  2. ...
  3. </div>

דוגמאות וסימון

בסיסי

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

  1. <div class = "התקדמות" >
  2. <div class = "בר"
  3. style = " רוחב : 60 %; " ></div>
  4. </div>

מְפוּספָּס

משתמש בשיפוע כדי ליצור אפקט פסים (ללא IE).

  1. <div class = "התקדמות פסים" >
  2. <div class = "בר"
  3. style = " רוחב : 20 %; " ></div>
  4. </div>

אנימציה

לוקח את הדוגמה המפוספסת ומפעיל אותה (ללא IE).

  1. <div class = "התקדמות פסים
  2. פעיל" >
  3. <div class = "בר"
  4. style = " רוחב : 40 %; " ></div>
  5. </div>

אפשרויות ותמיכה בדפדפן

צבעים נוספים

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

סורגים עם פסים

בדומה לצבעים הסולידיים, יש לנו פסי התקדמות מגוונים.

התנהגות

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

אם אתה משתמש .activeבכיתה, .progress-stripedפסי ההתקדמות שלך יפעילו את הפסים משמאל לימין.

תמיכה בדפדפן

פסי התקדמות משתמשים בהדרגות CSS3, מעברים והנפשות כדי להשיג את כל ההשפעות שלהם. תכונות אלה אינן נתמכות ב-IE7-9 או בגרסאות ישנות יותר של Firefox.

Opera ו-IE אינם תומכים בהנפשות בשלב זה.

וולס

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

תראה, אני בבאר!
  1. <div class = "טוב" >
  2. ...
  3. </div>

סמל סגירה

השתמש בסמל הסגירה הגנרי לביטול תוכן כמו שיטות והתראות.

  1. <button class = "סגור" > × </button>

מכשירי iOS דורשים href="#" עבור אירועי קליק אם אתה מעדיף להשתמש בעוגן.

  1. <a class = "close" href = "#" > × </a>