דוגמא

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

<ul class = "dropdown-menu" role = "menu" aria-labeledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > פעולה </a></li>  
  <li><a tabindex = "-1" href = "#" > פעולה נוספת </a></li>  
  <li><a tabindex = "-1" href = "#" > משהו אחר כאן </a></li>  
  <li class = "מחלק" ></li> 
  <li><a tabindex = "-1" href = "#" > קישור מופרד </a></li>  
</ul>

סימון

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

<div class = "dropdown" > 
  <!-- קישור או כפתור כדי להחליף את התפריט הנפתח -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > פעולה </a></li>  
    <li><a tabindex = "-1" href = "#" > פעולה נוספת </a></li>  
    <li><a tabindex = "-1" href = "#" > משהו אחר כאן </a></li>  
    <li class = "מחלק" ></li> 
    <li><a tabindex = "-1" href = "#" > קישור מופרד </a></li>  
  </ul>
</div>

אפשרויות

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

יישור התפריטים

הוסף לימין יישר .pull-rightאת .dropdown-menuהתפריט הנפתח.

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

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

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

<ul class = "dropdown-menu" role = "menu" aria-labeledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > קישור רגיל </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > קישור מושבת </a></li>   
  <li><a tabindex = "-1" href = "#" > קישור נוסף </a></li>  
</ul>

תפריטי משנה בתפריטים נפתחים

הוסף רמה נוספת של תפריטים נפתחים, המופיעים בריחוף כמו אלה של OS X, עם כמה תוספות סימון פשוטות. הוסף .dropdown-submenuלכל liאחד בתפריט נפתח קיים לעיצוב אוטומטי.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "תפריט-משנה נפתח" > 
    <a tabindex = "-1" href = "#" > אפשרויות נוספות </a>  
    <ul class = "תפריט נפתח" > 
      ...
    </ul>
  </li>
</ul>

דוגמאות

שתי אפשרויות בסיסיות, יחד עם שתי וריאציות ספציפיות יותר.

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

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

<div class = "btn-group" > 
  <button class = "btn" > שמאל </button> 
  <button class = "btn" > אמצעי </button> 
  <button class = "btn" > מימין </button> 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

<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 מותאם אישית.

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

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

<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>

מידות

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > פעולה </button> 
  <button class = "btn btn-mini 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הכיתה.

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

קח <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>

מצב נכה

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

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

יישור רכיבים

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

ניתן לערום

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

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

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

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

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

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

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

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

<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>

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

<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>

רשימות Nav

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

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

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

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

הערהלקינון בתוך רשימת ניווט, class="nav nav-list"כלול בכל מקנן <ul>.

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

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

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

ניווט טאב

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

דוגמה לטאבים

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

<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>

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

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

דורש תוסף jQuery

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

טבלים לכל כיוון

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

הפוך את סדר ה-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>

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

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > כותרת </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > דף הבית </a></li>  
      <li><a href = "#" > קישור </a></li> 
      <li><a href = "#" > קישור </a></li> 
    </ul>
  </div>
</div>

רכיבי Navbar

מותג

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

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

קישורי ניווט

פריטי 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>

טפסים

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > שלח </button>  
</form>

טופס חיפוש

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

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

יישור רכיבים

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

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

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

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

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

טֶקסט

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

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

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

קבוע למעלה

הוסף .navbar-fixed-topוזכור לקחת בחשבון את האזור המוסתר שמתחתיו על ידי הוספת לפחות 40 פיקסלים paddingל- <body>. הקפד להוסיף את זה אחרי הליבה Bootstrap CSS ולפני CSS הרספונסיבי האופציונלי.

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

קבוע לתחתית

הוסף .navbar-fixed-bottomבמקום זאת.

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

סרגל ניווט עליון סטטי

צור סרגל ניווט ברוחב מלא שגולל עם הדף על ידי הוספת .navbar-static-top. בניגוד .navbar-fixed-topלכיתה, אינך צריך לשנות ריפוד כלשהו ב- body.

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

סרגל ניווט רספונסיבי

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

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

וריאציה הפוכה

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

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

דוגמאות

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

<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, נהדר עבור אפליקציות ותוצאות חיפוש. קשה לפספס את הבלוק הגדול, ניתן להרחבה בקלות ומספק אזורי קליקים גדולים.

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

אפשרויות

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

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

<div class = "Pagement" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "Pagement" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

מידות

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

<div class = "עמודation pagetion-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "Pagement" > 
  <ul>
    ...
  </ul>
</div>
<div class = "עמודation pagetion-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "Pagement pagetion-mini" > 
  <ul>
    ...
  </ul>
</div>

יישור

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

<div class = "העמדת עימוד במרכז" > 
  ...
</div>

<div class = "Pagement pagetion-right" > 
  ...
</div>

ביפר

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

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

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

<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>

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

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

<ul class = "ביפר" > 
  <li class = "קודם נכים" > 
    <a href = "#" > ← ישן יותר </a> 
  </li>
  ...
</ul>

תוויות

תגים

מתקפל בקלות

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

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

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

<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> כותרת דף לדוגמה <small> טקסט משנה לכותרת </small></h1>
</div>

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

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

ניתן להתאמה אישית גבוהה

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

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

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

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

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

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

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

סימון

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

<ul class = "תמונות ממוזערות" > 
  <li class = "span4" > 
    <a href = "#" class = "תמונה ממוזערת" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "תמונות ממוזערות" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> תווית תמונה ממוזערת </h3>
      <p> כיתוב תמונה ממוזערת... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

עטוף כל טקסט ולחצן ביטול אופציונלי .alertלקבלת הודעת אזהרה בסיסית.

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

בטל כפתורים

דפדפנים Mobile Safari ו-Mobile Opera, בנוסף data-dismiss="alert"לתכונה, דורשים href="#"לביטול התראות בעת שימוש <a>בתג.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

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

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

בטל התראות באמצעות JavaScript

השתמש בתוסף ההתראות jQuery לביטול מהיר וקל של התראות.

אפשרויות

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

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

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

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

טעות או סכנה

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

הַצלָחָה

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

מֵידָע

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

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

בסיסי

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

<div class = "התקדמות" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

מְפוּספָּס

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

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

אנימציה

הוסף .activeל .progress-stripedכדי להנפיש את הפסים מימין לשמאל. לא זמין בכל הגירסאות של IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

מְגוּבָּב

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

<div class = "התקדמות" > 
  <div class = "bar bar-success" style = " רוחב : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

אפשרויות

צבעים נוספים

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

<div class = "התקדמות-מידע" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "התקדמות התקדמות-הצלחה" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "התקדמות-אזהרת התקדמות" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "התקדמות-סכנה" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

<div class = "התקדמות progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "התקדמות התקדמות-הצלחה התקדמות-פסים" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "התקדמות-אזהרת התקדמות-פסים" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "התקדמות התקדמות-סכנה התקדמות-פסים" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

תמיכה בדפדפן

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

גרסאות קודמות מ-Internet Explorer 10 ו-Opera 12 אינן תומכות בהנפשות.

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

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

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

כותרת מדיה

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.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > כותרת מדיה </h4> 
    ...
 
    <!-- אובייקט מדיה מקונן -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

רשימת מדיה

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

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > כותרת מדיה </h4> 
      ...
 
      <!-- אובייקט מדיה מקונן -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

וולס

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

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

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

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

<div class = "well well-large" > 
  ...
</div>

<div class = "well well-small" > 
  ...
</div>

סמל סגירה

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

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

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

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

שיעורי עוזרים

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

.משוך שמאלה

צף אלמנט שמאלה

class = "משוך שמאלה"

. משוך - שמאלה {
  לצוף : שמאל ;
}

.משוך ימינה

צף אלמנט ימינה

class = "משוך ימינה"

. למשוך - ימינה {
  לצוף : ימין ;
}

.מושתק

שנה את הצבע של אלמנט ל#999

class = "מושתק"

. מושתק {
  צבע : #999; 
}

.clearfix

נקה את floatעל כל אלמנט

class = "clearfix"

. clearfix {
  * זום : 1 ; 
  &: לפני ,
  &: אחרי {
    תצוגה : טבלה ;
    תוכן : "" ; 
  }
  &: אחרי {
    ברור : שניהם ;
  }
}