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

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

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

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

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

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

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

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

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

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

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

קבל את ה-Javascript »

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

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

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

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

סימון דוגמה

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    פעולה
    <span class = "caret" ></span> 
  </a>
  <ul class = "תפריט נפתח" > 
    <!-- קישורי תפריט נפתח -->
  </ul>
</div>

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

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

דורש javascript

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

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

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

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

מידות

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

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

סימון דוגמה

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

<div class = "btn-group" > 
  <button class = "btn" > פעולה </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "תפריט נפתח" > 
    <!-- קישורי תפריט נפתח -->
  </ul>
</div>

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

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "תפריט נפתח" > 
    <!-- קישורי תפריט נפתח -->
  </ul>
</div>

מעמד בסיס רב עוצמה

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

מתי להשתמש

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

יישור רכיבים

כדי ליישר קישורי ניווט, השתמש במחלקות השירות .pull-leftאו . .pull-rightשתי המחלקות יוסיפו ציף CSS בכיוון שצוין.

כרטיסיות בסיסיות

קח <ul>קישורים קבועים והוסף .nav-tabs:

• בית
• פּרוֹפִיל
• הודעות

<ul class = "nav nav-tabs" > 
  <li class = "פעיל" > 
    <a href = "#" > דף הבית </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

כדורים בסיסיים

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

• בית
• פּרוֹפִיל
• הודעות

<ul class = "nav nav-pills" > 
  <li class = "פעיל" > 
    <a href = "#" > דף הבית </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

איך עורמים אותם

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

כרטיסיות מוערמות

• בית
• פּרוֹפִיל
• הודעות

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

כדורים מוערמים

• בית
• פּרוֹפִיל
• הודעות

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

תפריטים עשירים קלים

תפריטים נפתחים בלשוניות ובגלולות Bootstrap הם קלים במיוחד ודורשים רק מעט HTML נוסף ותוסף jQuery קל משקל.

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

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

• בית
• עֶזרָה
• להפיל
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "תפריט נפתח"
       href = "#" >
        להפיל
        <b class = "caret" ></b> 
      </a>
    <ul class = "תפריט נפתח" > 
      <!-- קישורים -->
    </ul>
  </li>
</ul>

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

• בית
• עֶזרָה
• להפיל
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "תפריט נפתח"
       href = "#" >
        להפיל
        <b class = "caret" ></b> 
      </a>
    <ul class = "תפריט נפתח" > 
      <!-- קישורים -->
    </ul>
  </li>
</ul>

ניווט בסגנון אפליקציה

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

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

עם אייקונים

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

חוצצים אופקיים

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

<ul class = "nav nav-list" > 
  ...
  <li class = "מחלק" ></li> 
  ...
</ul>

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

קח רשימה של קישורים והוסף class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    כותרת רשימה
  </li>
  <li class = "פעיל" > 
    <a href = "#" > דף הבית </a> 
  </li>
  <li>
    <a href = "#" > ספרייה </a> 
  </li>
  ...
</ul>

דוגמה עם אייקונים

אותה דוגמה, אבל עם <i>תגיות לסמלים.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      סִפְרִיָה
    </a>
  </li>
  ...
</ul>

מה נכלל

תחייה את הכרטיסיות שלך עם תוסף פשוט למעבר בין תוכן דרך כרטיסיות. Bootstrap משלב כרטיסיות הניתנות לכרטיסיות בארבעה סגנונות: למעלה (ברירת מחדל), ימין, תחתון ושמאלי.

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

דהייה בכרטיסיות

כדי לגרום לכרטיסיות לדעוך, הוסף .fadeלכל .tab-pane.

דורש תוסף jQuery

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

קבל את ה-Javascript →

דוגמה ל-Tabable

כדי להפוך כרטיסיות לכרטיסיות, צור .tab-paneמזהה ייחודי לכל כרטיסייה ועטוף אותן ב- .tab-content.

עבור כרטיסיות מיושרות לימין או לשמאל, עטוף את ה- .nav-tabsוב .tab-content..tabbable

סימון פשוט

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

<div class = "tabbable" > <-- נדרש רק עבור כרטיסיות שמאל/ימין --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > סעיף 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > סעיף 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> אני בסעיף 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> שלום, אני בסעיף 2. </p>
    </div>
  </div>
</div>

לשוניות בתחתית

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

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

כרטיסיות בצד שמאל

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

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

כרטיסיות בצד ימין

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

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

פיגום Navbar

ה-navbar דורש רק כמה divs כדי לבנות אותו היטב עבור תצוגה סטטית או קבועה.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

סרגל ניווט קבוע

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

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

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

כאשר אתה מצמיד את סרגל הניווט, זכור לקחת בחשבון את האזור המוסתר שמתחתיו. הוסף 40px או יותר של ריפוד ל- <body>. הקפד להוסיף את זה אחרי הליבה Bootstrap CSS ולפני CSS הרספונסיבי האופציונלי.

שם מותג

קישור פשוט להצגת שם המותג או הפרויקט שלך דורש רק תג עוגן.

<a class = "brand" href = "#" >  
  שם הפרוייקט
</a>

טפסים ב-navbar

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

<form class = "navbar-form pull-left" > 
  < type input = "text" class = "span2" >  
</form>

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

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" מציין מיקום = "חיפוש" >   
</form>

וריאציה תגובה אופציונלית

בהתאם לכמות התוכן בסרגל העליון שלך, ייתכן שתרצה ליישם את האפשרויות הרספונסיביות. כדי לעשות זאת, עטוף את תוכן הניווט שלך ב-div המכיל, .nav-collapse.collapseוהוסף את לחצן החלפת סרגל הניווט, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar משמש כבורר עבור תוכן סרגל ניווט מכווץ -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- הקפד להשאיר את המותג בחוץ אם אתה רוצה שהוא יוצג -->
      <a class = "brand" href = "#" > שם הפרויקט </a>  
 
      <!-- כל מה שאתה רוצה מוסתר ב-940px או פחות, מקם בפנים -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form וכו' -->
      </div>
 
    </div>
  </div>
</div>

קישורי ניווט

פריטי Nav קל להוסיף באמצעות רשימות לא מסודרות.

<ul class = "nav" > 
  <li class = "פעיל" > 
    <a href = "#" > דף הבית </a> 
  </li>
  <li><a href = "#" > קישור </a></li> 
  <li><a href = "#" > קישור </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "מחלק-אנכי" ></li> 
  ...
</ul>

יישור רכיבים

כדי ליישר ניווט, טופס חיפוש או טקסט, השתמש במחלקות השירות .pull-leftאו . .pull-rightשתי המחלקות יוסיפו ציפה CSS בכיוון שצוין.

הוספת תפריטים נפתחים

הוספת תפריטים נפתחים ונפתחים לניווט היא סופר פשוטה, אך דורשת שימוש בתוסף ה-Javascript שלנו .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "החלפת תפריט נפתח"
          data-toggle = "תפריט נפתח" >
          חֶשְׁבּוֹן
          <b class = "caret" ></b> 
    </a>
    <ul class = "תפריט נפתח" > 
      ...
    </ul>
  </li>
</ul>

קבל את ה-Javascript →

טקסט בסרגל הניווט

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

למה להשתמש בהם

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

דוגמאות

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

• בית

• דף הבית /
• סִפְרִיָה

• דף הבית /
• ספריה /
• נתונים

סימון

HTML היא הרשימה הרגילה שלך ללא סדר עם קישורים.

<ul class = "פירורי לחם" > 
  <li>
    <a href = "#" > דף הבית </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > ספרייה </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > נתונים </li> 
</ul>

מתי להשתמש

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

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

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

יישור גמיש

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

דוגמאות

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

סימון

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

<div class = "Pagement" > 
  <ul>
    <li><a href = "#" > הקודם </a></li> 
    <li class = "פעיל" > 
      <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 = "#" > הבא </a></li> 
  </ul>
</div>

לגבי ביפר

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

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

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

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

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

• קודם
• הַבָּא

<ul class = "ביפר" > 
  <li>
    <a href = "#" > הקודם </a> 
  </li>
  <li>
    <a href = "#" > הבא </a> 
  </li>
</ul>

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

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

• ← ישן יותר
• חדש יותר →

<ul class = "ביפר" > 
  <li class = "הקודם" > 
    <a href = "#" > ← ישן יותר </a> 
  </li>
  <li class = "הבא" > 
    <a href = "#" > חדש יותר → </a> 
  </li>
</ul>

על אודות

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

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

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

סימון

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

<div class = "hero-unit" > 
  <h1> כותרת </h1>
  <p> קו תג </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      למד עוד
    </a>
  </p>
</div>

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

<div class = "page-header" > 
  <h1> כותרת דף לדוגמה </h1>
</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- לשליטה בממדים של תמונות ממוזערות.

הסימון

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

<ul class = "תמונות ממוזערות" > 
  <li class = "span3" > 
    <a href = "#" class = "תמונה ממוזערת" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "תמונות ממוזערות" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> תווית תמונה ממוזערת </h5>
      <p> כיתוב תמונה ממוזערת ממש כאן... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

קבל את התוסף »

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

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

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

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

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

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

טעות או סכנה

<div class = "alert alert-error" > 
  ...
</div>

הַצלָחָה

<div class = "alert alert-success" > 
  ...
</div>

מֵידָע

<div class = "Alert alert-info" > 
  ...
</div>

בסיסי

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

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

מְפוּספָּס

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

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

אנימציה

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

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

צבעים נוספים

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

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

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

התנהגות

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

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

תמיכה בדפדפן

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

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

וולס

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

<div class = "טוב" > 
  ...
</div>

סמל סגירה

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

×

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

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

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