בודדים או מורכבים

ניתן לכלול תוספים בנפרד (אם כי לחלקם יש תלות נדרשת), או בבת אחת. גם bootstrap.js וגם bootstrap.min.js מכילים את כל התוספים בקובץ אחד.

תכונות נתונים

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

עם זאת, במצבים מסוימים ייתכן שיהיה רצוי לכבות את הפונקציונליות הזו. לכן, אנו מספקים גם את היכולת להשבית את ה-API של תכונת הנתונים על ידי ביטול הכריכה של כל האירועים בגוף עם מרחב השמות עם `'data-api'`. זה נראה כך:

$ ( 'גוף' ). כבוי ( '.data-api' )

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

$ ( 'גוף' ). כבוי ( '.alert.data-api' )

API פרוגרמטי

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

$ ( ".btn.danger" ). כפתור ( "להחליף" ). addClass ( "שמן" )

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

$ ( "#myModal" ). modal () // מאותחל עם ברירות מחדל                       
$ ( "#myModal" ). modal ({ keyboard : false }) // אותחל ללא מקלדת     
$ ( "#myModal" ). modal ( 'show' ) // מאתחל ומפעיל את show באופן מיידי                

כל תוסף גם חושף את הבנאי הגולמי שלו על מאפיין 'קונסטרוקטור': $.fn.popover.Constructor. אם תרצה לקבל מופע פלאגין מסוים, אחזר אותו ישירות מאלמנט: $('[rel=popover]').data('popover').

אין סכסוך

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

var bootstrapButton = $ . fn . כפתור . noConflict () // החזר את $.fn.button לערך שהוקצה קודם לכן 
$ . fn . bootstrapBtn = bootstrapButton             // תן $().bootstrapBtn את פונקציונליות האתחול

אירועים

Bootstrap מספק אירועים מותאמים אישית עבור רוב הפעולות הייחודיות של התוסף. בדרך כלל, אלה באים בצורה אינפינטיבית וחלק עבר - כאשר האינפיניטיב (לדוגמה show) מופעל בתחילת אירוע, וצורת חלק העבר שלו (לדוגמה shown) מופעלת עם השלמת פעולה.

כל האירועים האינסופיים מספקים פונקציונליות של preventDefault. זה מספק את היכולת לעצור את ביצוע הפעולה לפני שהיא מתחילה.

$ ( '#myModal' ). on ( 'הצג' , פונקציה ( ה ) {   
    אם (! נתונים ) מחזירים ה . preventDefault () // מפסיק את הצגת המודאל   
})

לגבי מעברים

עבור אפקטי מעבר פשוטים, כלול את bootstrap-transition.js פעם אחת לצד שאר קבצי ה-JS. אם אתה משתמש ב- bootstrap.js המהודר (או ממוזער) , אין צורך לכלול את זה - הוא כבר שם.

מקרי שימוש

כמה דוגמאות לפלאגין המעבר:

• החלקה או דהייה במודלים
• דהיית כרטיסיות
• דעיכת התראות
• חלונות קרוסלה הזזה

דוגמאות

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

דוגמה סטטית

מודל מעובד עם כותרת עליונה, גוף וקבוצת פעולות בכותרת התחתונה.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> כותרת מודאלית </h3>
  </div>
  <div class = "modal-body" > 
    <p> גוף נאה אחד... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > סגור </a>  
    <a href = "#" class = "btn btn-primary" > שמור שינויים </a>  
  </div>
</div>

דמו ישיר

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

<!-- לחצן להפעלת מודאל -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > הפעל הדגמה </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labeledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > כותרת מודאלית </h3> 
  </div>
  <div class = "modal-body" > 
    <p> גוף נאה אחד... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > סגור </button>   
    <button class = "btn btn-primary" > שמור שינויים </button> 
  </div>
</div>

נוֹהָג

באמצעות תכונות נתונים

הפעל מודאל מבלי לכתוב JavaScript. הגדר data-toggle="modal"על רכיב בקר, כמו כפתור, יחד עם data-target="#foo"או href="#foo"כדי למקד מודאל ספציפי למעבר.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > הפעל מודאלי </button>   

דרך JavaScript

התקשר למודאל עם מזהה myModalעם שורה אחת של JavaScript:

$ ( '#myModal' ). מודאלי ( אפשרויות )

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

שיטות

.modal(אפשרויות)

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

$ ( '#myModal' ). מודאלי ({
  מקלדת : שקר 
})

.modal('toggle')

מחליף מודאל באופן ידני.

$ ( '#myModal' ). מודאלי ( 'להחליף' )

.modal('show')

פותח מודאל באופן ידני.

$ ( '#myModal' ). מודאלי ( 'הצג' )

.modal('hide')

מסתיר באופן ידני מודאל.

$ ( '#myModal' ). מודאלי ( 'להסתיר' )

אירועים

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

$ ( '#myModal' ). on ( 'מוסתר' , function () {   
  // עשה משהו…
})

דוגמאות

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

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

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

נוֹהָג

באמצעות תכונות נתונים

הוסף data-toggle="dropdown"לקישור או כפתור כדי להחליף תפריט נפתח.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > מפעיל נפתח </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

כדי לשמור על כתובות אתרים שלמות, השתמש data-targetבתכונה במקום href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    להפיל
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

דרך JavaScript

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

$ ( '.dropdown-toggle' ). תפריט נפתח ()

אפשרויות

אף אחד

שיטות

$().dropdown('toggle')

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

דוגמה ב-navbar

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

נוֹהָג

באמצעות תכונות נתונים

כדי להוסיף בקלות התנהגות גלילה לניווט בסרגל העליון שלך, פשוט הוסף data-spy="scroll"לרכיב שאתה רוצה לרגל אחריו (בדרך כלל זה יהיה הגוף) data-target=".navbar"וכדי לבחור באיזה ניווט להשתמש. תרצה להשתמש ב- scrollspy עם .navרכיב.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

דרך JavaScript

התקשר ל- scrollspy באמצעות JavaScript:

$ ( '#navbar' ). scrollspy ()

שיטות

.scrollspy('refresh')

בעת שימוש ב-scrollspy בשילוב עם הוספה או הסרה של אלמנטים מה-DOM, תצטרך לקרוא לשיטת הרענון כך:

$ ( '[data-spy="scroll"]' ). each ( function () {  
  var $spy = $ ( זה ). scrollspy ( 'רענן' )
});

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-offset="".

אירועים

כרטיסיות לדוגמה

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

נוֹהָג

אפשר כרטיסיות הניתנות לכרטיסיות באמצעות JavaScript (יש להפעיל כל כרטיסייה בנפרד):

$ ( '#myTab a' ). לחץ ( פונקציה ( e ) {  
  ה . preventDefault ();
  $ ( זה ). tab ( 'הצג' );
})

אתה יכול להפעיל כרטיסיות בודדות בכמה דרכים:

$ ( '#myTab a[href="#profile"]' ). tab ( 'הצג' ); // בחר כרטיסייה לפי שם 
$ ( '#myTab a:first' ). tab ( 'הצג' ); // בחר את הכרטיסייה הראשונה 
$ ( '#myTab a:last' ). tab ( 'הצג' ); // בחר את הכרטיסייה האחרונה 
$ ( '#myTab li:eq(2) a' ). tab ( 'הצג' ); // בחר כרטיסייה שלישית (אינדקס 0) 

סימון

אתה יכול להפעיל טאב או ניווט בגלולה מבלי לכתוב שום JavaScript על ידי ציון data-toggle="tab"או data-toggle="pill"על אלמנט. הוספת המחלקות navו nav-tabsלכרטיסייה ulתחיל את סגנון הכרטיסייה Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > דף הבית </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > פרופיל </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > הודעות </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > הגדרות </a></li>  
</ul>

שיטות

$().tab

מפעיל רכיב טאב ומכל תוכן. ל-Tab צריך להיות צומת מיקוד data-targetאו hrefמיקוד לצומת מכיל ב-DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > דף הבית </a></li>  
  <li><a href = "#profile" > פרופיל </a></li> 
  <li><a href = "#messages" > הודעות </a></li> 
  <li><a href = "#settings" > הגדרות </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "הגדרות" > ... </div>  
</div>
 
<script>
  $ ( פונקציה () {  
    $ ( '#myTab a:last' ). tab ( 'הצג' );
  })
</script>

אירועים

$ ( 'a[data-toggle="tab"]' ). on ( 'מוצג' , function ( e ) {   
  ה . target // הכרטיסייה מופעלת
  ה . relatedTarget // הכרטיסייה הקודמת
})

דוגמאות

בהשראת התוסף המצוין jQuery.tipsy שנכתב על ידי Jason Frame; עצות כלים הן גרסה מעודכנת, שאינה מסתמכת על תמונות, משתמשת ב-CSS3 עבור אנימציות ותכונות נתונים לאחסון כותרות מקומיות.

מטעמי ביצועים, תיאור הכלים ו-Popover Data-APis ניתנים להצטרפות, כלומר עליך לאתחל אותם בעצמך .

רחף מעל הקישורים למטה כדי לראות עצות כלים:

ארבעה כיוונים

עצות כלים בקבוצות קלט

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

נוֹהָג

הפעל את הסבר הכלי באמצעות JavaScript:

$ ( '#example' ). טיפים ( אפשרויות )

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-animation="".

סימון

<a href = "#" data-toggle = "tooltip" title = "tooltip ראשון" > העבר את העכבר מעלי </a>   

שיטות

$().tooltip(options)

מצרף מטפל בתיאור כלים לאוסף אלמנטים.

.tooltip('show')

חושף תיאור כלי של אלמנט.

$ ( '#element' ). הסבר כלים ( 'הצג' )

.tooltip('hide')

מסתיר תיאור כלי של אלמנט.

$ ( '#element' ). הסבר כלים ( 'הסתר' )

.tooltip('toggle')

מחליף תיאור כלי של רכיב.

$ ( '#element' ). הסבר כלים ( 'להחליף' )

.tooltip('destroy')

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

$ ( '#element' ). טיפים ( 'להרוס' )

דוגמאות

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

פופ-אובר סטטי

ארבע אפשרויות זמינות: מיושרות למעלה, ימינה, למטה ושמאלה.

שום סימון המוצג כפופ-אובר לא נוצר מ-JavaScript ומתוכן בתוך dataתכונה.

דמו ישיר

ארבעה כיוונים

נוֹהָג

הפעל חלונות קופצים באמצעות JavaScript:

$ ( '#example' ). קופץ ( אפשרויות )

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-animation="".

סימון

מטעמי ביצועים, ה-Tooltip ו-Popover data-apis ניתנים להצטרפות. אם תרצה להשתמש בהם פשוט ציין אפשרות בורר.

שיטות

$().popover(options)

מאתחל פופ-אובר עבור אוסף אלמנטים.

.popover('show')

חושף פריצת אלמנטים.

$ ( '#element' ). popover ( 'הצג' )

.popover('hide')

מסתיר חלון קופץ של אלמנטים.

$ ( '#element' ). popover ( 'להסתיר' )

.popover('toggle')

מחליף חלון קופץ של רכיבים.

$ ( '#element' ). popover ( 'להחליף' )

.popover('destroy')

מסתיר והורס פופ-אובר של אלמנט.

$ ( '#element' ). popover ( 'להרוס' )

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

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

נוֹהָג

אפשר ביטול של התראה באמצעות JavaScript:

$ ( ".alert" ). התראה ()

סימון

פשוט הוסף data-dismiss="alert"ללחצן הסגירה שלך כדי לתת פונקציונליות סגירה אוטומטית של התראה.

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

שיטות

$().alert()

עוטף את כל ההתראות עם פונקציונליות קרובה. כדי שההתראות שלך יופעלו כשהן סגורות, ודא שכבר הוחל עליהן את ה- .fadeand class..in

.alert('close')

סוגר התראה.

$ ( ".alert" ). התראה ( 'סגור' )

אירועים

מחלקת ההתראה של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות ההתראה.

$ ( '#my-alert' ). bind ( 'סגור' , function () {   
  // עשה משהו…
})

שימושים לדוגמה

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

ממלכתי

הוסף data-loading-text="Loading..."כדי להשתמש במצב טעינה על כפתור.

<button type = "button" class = "btn btn-primary" data-loading-text = "טוען..." > מצב טעינה </button>   

מתג יחיד

הוסף data-toggle="button"כדי להפעיל החלפת מצב בלחצן בודד.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > החלפת מצב יחיד </button>   

תיבת סימון

הוסף data-toggle="buttons-checkbox"עבור החלפת סגנון תיבת סימון ב-btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > שמאל </button>  
  <button type = "button" class = "btn btn-primary" > אמצעי </button>  
  <button type = "button" class = "btn btn-primary" > מימין </button>  
</div>

רָדִיוֹ

הוסף data-toggle="buttons-radio"להחלפה בסגנון רדיו ב-btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > שמאל </button>  
  <button type = "button" class = "btn btn-primary" > אמצעי </button>  
  <button type = "button" class = "btn btn-primary" > מימין </button>  
</div>

נוֹהָג

אפשר לחצנים באמצעות JavaScript:

$ ( '.nav-tabs' ). כפתור ()

סימון

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

אפשרויות

אף אחד

שיטות

$().button('toggle')

מחליף מצב דחיפה. נותן לכפתור את המראה שהוא הופעל.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('טעינה')

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

<button type = "button" class = "btn" data-loading-text = "טוען דברים..." > ... </button>    

$().button('reset')

מאפס מצב כפתור - מחליף טקסט לטקסט מקורי.

$().button(string)

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

<button type = "button" class = "btn" data-complete-text = "סיים!" > ... </button>    
<script>
  $ ( '.btn' ). כפתור ( 'השלם' )
</script>

על אודות

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

* מחייב את התוסף Transitions להיכלל.

אקורדיון לדוגמא

באמצעות תוסף ה-Clapse, בנינו ווידג'ט פשוט בסגנון אקורדיון:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        פריט קבוצה מתקפל מס' 1
      </a>
    </div>
    <div id = "collapseOne" class = "התמוטטות הגוף באקורדיון" >  
      <div class = "accordion-inner" > 
        קלישאת אנימציה...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        פריט קבוצה מתקפל מס' 2
      </a>
    </div>
    <div id = "collapseTwo" class = "קריסת גוף אקורדיון" >  
      <div class = "accordion-inner" > 
        קלישאת אנימציה...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  פשוט מתקפל
</button>
 
<div id = "demo" class = "התמוטט" > … </div>  

נוֹהָג

באמצעות תכונות נתונים

פשוט הוסף data-toggle="collapse"ו- data-targetto אלמנט כדי להקצות אוטומטית שליטה על אלמנט מתקפל. התכונה data-targetמקבלת בורר css להחיל את הכיווץ עליו. הקפד להוסיף את המחלקה collapseלרכיב הניתן לקיפול. אם תרצה שהיא תיפתח כברירת מחדל, הוסף את המחלקה הנוספת in.

כדי להוסיף ניהול קבוצתי דמוי אקורדיון לשלט מתקפל, הוסף את תכונת הנתונים data-parent="#selector". עיין בהדגמה כדי לראות את זה בפעולה.

דרך JavaScript

הפעל באופן ידני עם:

$ ( ".collapse" ). להתמוטט ()

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-parent="".

שיטות

.collapse(אפשרויות)

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

$ ( '#myCollapsible' ). לכווץ ({
  למתג : שקר 
})

.collapse('toggle')

מחליף רכיב שניתן להתכווץ לתצוגה או להסתרה.

.collapse('show')

מציג אלמנט מתקפל.

.collapse('hide')

מסתיר אלמנט מתקפל.

אירועים

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

$ ( '#myCollapsible' ). on ( 'מוסתר' , function () {   
  // עשה משהו…
})

קרוסלה לדוגמה

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

תווית תמונה ממוזערת ראשונה

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.

Second Thumbnail label

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.

Third Thumbnail label

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.

‹ ›

<div id = "myCarousel" class = "שקופית קרוסלה" >  
  <ol class = "קרוסלה-אינדיקטורים" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- פריטי קרוסלה -->
  <div class = "carousel-inner" > 
    <div class = "פריט פעיל" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- ניווט קרוסלה -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "הבא" > › </a>   
</div>

נוֹהָג

באמצעות תכונות נתונים

השתמש בתכונות נתונים כדי לשלוט בקלות במיקום הקרוסלה. data-slideמקבל את מילות המפתח prevאו next, אשר משנה את מיקום השקף ביחס למיקום הנוכחי שלו. לחלופין, השתמש data-slide-toכדי להעביר אינדקס שקופיות גולמי לקרוסלה data-slide-to="2", אשר קפיצה היא מיקום השקופית לאינדקס מסוים שמתחיל ב- 0.

דרך JavaScript

התקשר לקרוסלה באופן ידני עם:

$ ( '.carousel' ). קרוסלה ()

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScriptz. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-interval="".

שיטות

.carousel(אפשרויות)

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

$ ( '.carousel' ). קרוסלה ({
  מרווח : 2000 
})

.carousel('cycle')

עובר במחזוריות בין פריטי הקרוסלה משמאל לימין.

.carousel('pause')

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

.carousel(מספר)

מעביר את הקרוסלה למסגרת מסוימת (מבוסס 0, בדומה למערך).

.carousel('prev')

עובר אל הפריט הקודם.

.carousel('next')

עוברים לפריט הבא.

אירועים

כיתת הקרוסלה של Bootstrap חושפת שני אירועים לחיבור לפונקציונליות הקרוסלה.

דוגמא

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

<input type = "text" data-provide = "typeahead" >  

תרצה להגדיר autocomplete="off"למנוע מתפריטי ברירת מחדל של דפדפן להופיע מעל התפריט הנפתח Bootstrap typeahead.

נוֹהָג

באמצעות תכונות נתונים

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

דרך JavaScript

התקשר לראש ההקלדה ידנית עם:

$ ( '.typeahead' ). הקלדה ()

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-source="".

שיטות

.typeahead(Options)

מאתחל קלט עם מקדמה.

דוגמא

הניווט המשנה משמאל הוא הדגמה חיה של תוסף האפיקס.

נוֹהָג

באמצעות תכונות נתונים

כדי להוסיף בקלות התנהגות הדבקה לכל אלמנט, פשוט הוסף data-spy="affix"לרכיב שאתה רוצה לרגל אחריו. לאחר מכן השתמש בהיסטים כדי להגדיר מתי להפעיל ולכבות את ההצמדה של אלמנט.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

דרך JavaScript

התקשר לפלאגין האפיק באמצעות JavaScript:

$ ( '#navbar' ). להדביק ()

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-offset-top="200".