סקירה כללית

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

ניתן לכלול תוספים בנפרד (באמצעות *.jsקבצים בודדים של Bootstrap), או בבת אחת (באמצעות bootstrap.jsאו ב-Minified bootstrap.min.js).

שימוש ב-JavaScript המהודר

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

תלות בתוסף

תוספים מסוימים ורכיבי CSS תלויים בתוספים אחרים. אם אתה כולל תוספים בנפרד, הקפד לבדוק את התלות הללו במסמכים. שימו לב גם שכל התוספים תלויים ב-jQuery (משמעות הדבר היא ש-jQuery חייב להיכלל לפני קבצי הפלאגין). עיין שלנוbower.json כדי לראות אילו גרסאות של jQuery נתמכות.

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

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

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

$(document).off('.data-api')

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

$(document).off('.alert.data-api')

רק תוסף אחד לכל אלמנט באמצעות תכונות נתונים

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

API פרוגרמטי

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

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

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

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

אין סכסוך

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

אירועים

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

החל מ-3.0.0, כל אירועי Bootstrap הם ברווחי שמות.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

מספרי גרסה

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

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

אין נפילות מיוחדות כאשר JavaScript מושבת

התוספים של Bootstrap אינם נופלים אחורה בחן במיוחד כאשר JavaScript מושבת. אם אכפת לך מחוויית המשתמש במקרה זה, השתמש <noscript>כדי להסביר את המצב (וכיצד להפעיל מחדש את JavaScript) למשתמשים שלך, ו/או הוסף החזרות מותאמות אישית משלך.

ספריות של צד שלישי

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

מעברים transition.js

לגבי מעברים

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

מה יש בפנים

Transition.js הוא עוזר בסיסי transitionEndלאירועים וכן אמולטור מעבר CSS. הוא משמש את התוספים האחרים כדי לבדוק אם יש תמיכה במעבר CSS ולתפוס מעברים תלויים.

השבתת מעברים

ניתן להשבית מעברים באופן גלובלי באמצעות קטע הקוד הבא של JavaScript, שחייב להגיע לאחר טעינת transition.js(או bootstrap.jsאו bootstrap.min.js, לפי המקרה):

$.support.transition = false

Modals modal.js

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

מספר מודלים פתוחים אינם נתמכים

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

מיקום סימון מודאלי

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

אזהרות במכשירים ניידים

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

בשל האופן שבו HTML5 מגדיר את הסמנטיקה שלו, autofocusלתכונת HTML אין השפעה במודלי Bootstrap. כדי להשיג את אותו האפקט, השתמש ב-JavaScript מותאם אישית:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

דוגמאות

דוגמה סטטית

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

דמו ישיר

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

הפוך את המודלים לנגישים

הקפד להוסיף role="dialog"ו aria-labelledby="...", בהתייחסות לכותרת המודאלית, אל ואל .modalעצמו .role="document".modal-dialog

בנוסף, תוכל לתת תיאור של הדו-שיח המודאלי שלך עם aria-describedbyב- .modal.

הטמעת סרטוני יוטיוב

הטבעת סרטוני YouTube במודלים דורשת JavaScript נוסף שלא ב-Bootstrap כדי להפסיק את ההשמעה באופן אוטומטי ועוד. עיין בפוסט מועיל זה של Stack Overflow למידע נוסף.

גדלים אופציונליים

למודלים יש שני גדלים אופציונליים, הזמינים באמצעות מחלקות שינוי למיקום על .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

הסר אנימציה

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

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

שימוש במערכת הרשת

כדי לנצל את מערכת הרשת Bootstrap בתוך מודאל, פשוט קן .rows בתוך .modal-bodyולאחר מכן השתמש במחלקות מערכת הרשת הרגילות.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

יש לך חבורה של כפתורים שכולם מפעילים את אותו מוד, רק עם תוכן קצת שונה? השתמש event.relatedTargetותכונות HTMLdata-* ( אפשר דרך jQuery ) כדי לשנות את התוכן של המודאל בהתאם לאיזה כפתור לחצו. עיין במסמכים של Modal Events לפרטים על relatedTarget,

...כפתורים נוספים...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

נוֹהָג

התוסף המודאלי מחליף את התוכן המוסתר שלך לפי דרישה, באמצעות תכונות נתונים או JavaScript. זה גם מוסיף לעקוף .modal-openאת <body>התנהגות הגלילה המוגדרת כברירת מחדל ומייצר .modal-backdropאזור לחיצה לביטול מודלים המוצגים בעת לחיצה מחוץ למודאל.

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

דרך JavaScript

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

$('#myModal').modal(options)

אפשרויות

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

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
רקע בוליאן או המחרוזת'static' נָכוֹן כולל אלמנט רקע מודאלי. לחלופין, ציין staticעבור רקע שאינו סוגר את המודאל בלחיצה.
מקלדת בוליאני נָכוֹן סוגר את המודאל בעת לחיצה על מקש Escape
הופעה בוליאני נָכוֹן מציג את המודאל בעת אתחול.
מְרוּחָק נָתִיב שֶׁקֶר

אפשרות זו הוצאה משימוש מאז v3.3.0 והוסרה ב-v4. אנו ממליצים במקום זאת להשתמש בתבניות בצד הלקוח או במסגרת מחייבת נתונים, או להתקשר ל-jQuery.load בעצמך.

אם מסופקת כתובת URL מרוחקת, התוכן ייטען פעם אחת באמצעות השיטה של ​​jQuery loadויוזרק ל- .modal-contentdiv. אם אתה משתמש ב-data-api, אתה יכול לחלופין להשתמש hrefבתכונה כדי לציין את המקור המרוחק. דוגמה לכך מוצגת להלן:

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

שיטות

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

$('#myModal').modal({
  keyboard: false
})

מחליף מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג או הוסתר בפועל (כלומר לפני התרחשות האירוע shown.bs.modalאו ).hidden.bs.modal

$('#myModal').modal('toggle')

פותח מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג בפועל (כלומר לפני shown.bs.modalהתרחשות האירוע).

$('#myModal').modal('show')

מסתיר מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוסתר בפועל (כלומר לפני hidden.bs.modalהתרחשות האירוע).

$('#myModal').modal('hide')

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

נחוץ רק כאשר גובה המודאל משתנה בזמן שהוא פתוח.

$('#myModal').modal('handleUpdate')

אירועים

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

כל האירועים המודאליים נורים לעבר המודאל עצמו (כלומר לעבר ה- <div class="modal">).

סוג אירוע תיאור
show.bs.modal אירוע זה מופעל מיד כאשר showשיטת המופע נקראת. אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTargetשל האירוע.
מוצג.bs.modal אירוע זה מופעל כאשר המודאל נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTargetשל האירוע.
hide.bs.modal אירוע זה מופעל מיד כאשר hideשיטת המופע נקראה.
hidden.bs.modal אירוע זה מופעל כאשר המודאל סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS).
loaded.bs.modal אירוע זה מופעל כאשר המודאל טען תוכן באמצעות remoteהאפשרות.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

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

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

בתוך גלולות

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

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

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

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

דרך JavaScript

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

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"עדיין נדרש

לא משנה אם אתה קורא לתפריט הנפתח שלך באמצעות JavaScript או במקום זאת משתמש ב-data-api, data-toggle="dropdown"תמיד נדרש להיות נוכח ברכיב ההדק של התפריט הנפתח.

אף אחד

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

כל אירועי התפריט הנפתח מופעלים .dropdown-menuברכיב האב של ה-'s.

לכל אירועי התפריט הנפתח יש relatedTargetמאפיין שהערך שלו הוא אלמנט העוגן המתחלף.

סוג אירוע תיאור
show.bs.down אירוע זה מופעל מיד כאשר קוראים לשיטת המופע של המופע.
מוצג.bs.down אירוע זה מופעל כאשר התפריט הנפתח הפך לגלוי למשתמש (יחכה למעברי CSS, כדי להשלים).
hide.bs.down אירוע זה מופעל מיד כאשר שיטת הסתר המופע נקראה.
התפריט הנפתח hidden.bs אירוע זה מופעל כאשר הסתיימה התפריט הנפתח להסתרת מהמשתמש (יחכה למעברי CSS, כדי להשלים).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

דוגמה ב-navbar

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

@שמן

חותלות מודעה keytar, מזהה בראנץ' מסיבת אמנות dolor labore. Pitchfork yr enim lo-fi לפני שהם אזלו qui. זכויות אופניים מחווה לשולחן בטאמבלר לא משנה מה. קרדיגן אנים כפייה קרלס. תא הצילום של Velit seitan mcsweeney 3 wolf moon irure. קוסבי סוודר lomo jean shorts, Williamsburg hoodie minim qui בטח לא שמעתם עליהם et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil מקועקע accusamus, cred אירוניה ביודיזל keffiyeh אומן ullamco consequat.

@mdo

סקייטבורד שפם של Veniam marfa, זקן קלשון שופע פוגיאט וליט. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. משאית אוכל מקועקעת סוודר קוסבי, ויניל של Mcsweeney's quis non freegan. לו-פי ווס אנדרסון +1 סרטון. קרלס לא אסתטי תרגיל quis gentrify. ברוקלין שומנית בירה מלאכה סגן keytar עזוב.

אחד

Occaecat commodo aliqua delectus. סקייטבורד עזוב בירה מלאכת יד ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore קפה ממקור יחיד במגנה ווניאם. High life id ויניל, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. תיק שליח מינימלי Consectetur nisi DIY. Cred לשעבר, בר קיימא delectus consectetur פאני חבילת אייפון.

שתיים

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica קלישאה אירוניה, חתולים רעמים שבטח לא שמעתם עליהם consequat hoodie ללא גלוטן lo-fi fap aliquip. Labore elit placeat לפני שהם סולד אאוט, טרי ריצ'רדסון פרוידנט בראנץ 'נסciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. קרדיגן craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

נוֹהָג

דורש ניווט Bootstrap

Scrollspy דורש כרגע שימוש ברכיב Bootstrap nav להדגשה נכונה של קישורים פעילים.

נדרשים יעדי זיהוי ניתנים לפתרון

קישורי Navbar חייבים להיות בעלי יעדי מזהה ניתנים לפתרון. לדוגמה, <a href="#home">home</a>חובה להתאים למשהו ב-DOM כמו <div id="home"></div>.

התעלמו ממרכיבים שאינם :visibleיעד

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

דורש מיקום יחסי

לא משנה שיטת היישום, scrollspy דורש שימוש position: relative;ברכיב שאתה מרגל אחריו. ברוב המקרים זהו ה <body>. בעת ריגול על אלמנטים אחרים מלבד ה- <body>, הקפד heightלהגדיר overflow-y: scroll;ולהחיל.

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

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

דרך JavaScript

לאחר הוספת position: relative;ה-CSS שלך, התקשר ל- scrollspy באמצעות JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

שיטות

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

אפשרויות

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

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
לְקַזֵז מספר 10 פיקסלים לקיזוז מלמעלה בעת חישוב מיקום הגלילה.

אירועים

סוג אירוע תיאור
active.bs.scrollspy אירוע זה מופעל בכל פעם שפריט חדש מופעל על ידי סרגל הגלילה.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

כרטיסיות הניתנות להחלפה tab.js

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

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

ג'ינס גולמי בטח לא שמעתם עליהם מכנסי ג'ינס אוסטין. Nesciunt tofu stumptown aliqua, רטרו סינת' מאסטר ניקוי. שפם קלישאה טמפור, וויליאמסבורג קרלס helvetica טבעונית. Reprehenderit בוצ'ר רטרו keffiyeh לוכד חלומות סינת'. סוודר קוסבי eu banh mi, qui irure טרי ריצ'רדסון לשעבר דיונון. Aliquip placeat salvia cillum אייפון. סייטן אליקוויפ quis קרדיגן ביגוד אמריקאי, בוצ'ר voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

מרחיב את הניווט בכרטיסיות

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

נוֹהָג

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

סימון

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

אפקט דהייה

כדי לגרום לכרטיסיות לדעוך, הוסף .fadeלכל .tab-pane. חלונית הכרטיסייה הראשונה חייבת גם .inלהפוך את התוכן הראשוני לגלוי.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

שיטות

$().tab

מפעיל רכיב טאב ומכל תוכן. ל-Tab צריך להיות צומת מיקוד data-targetאו hrefמיקוד לצומת מכיל ב-DOM. בדוגמאות לעיל, הכרטיסיות הן ה- <a>s עם data-toggle="tab"תכונות.

.tab('show')

בוחר את הכרטיסייה הנתונה ומציג את התוכן המשויך לה. כל כרטיסייה אחרת שנבחרה בעבר תבוטל והתוכן המשויך לה מוסתר. חוזר אל המתקשר לפני שחלונית הכרטיסיות הוצגה בפועל (כלומר לפני shown.bs.tabהתרחשות האירוע).

$('#someTab').tab('show')

אירועים

בעת הצגת כרטיסייה חדשה, האירועים יופעלו בסדר הבא:

  1. hide.bs.tab(בלשונית הפעילה הנוכחית)
  2. show.bs.tab(בלשונית להצגה)
  3. hidden.bs.tab(בלשונית הפעילה הקודמת, זהה לזה של hide.bs.tabהאירוע)
  4. shown.bs.tab(בלשונית הפעילה שזה עתה הוצגה, זהה לזו של show.bs.tabהאירוע)

אם אף כרטיסייה לא הייתה פעילה, אז האירועים hide.bs.tabו- hidden.bs.tabלא יופעלו.

סוג אירוע תיאור
show.bs.tab אירוע זה מופעל בהצגת כרטיסיות, אך לפני שהכרטיסייה החדשה הוצגה. השתמש event.targetובכדי event.relatedTargetלמקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה.
הכרטיסייה.bs.showed אירוע זה מופעל בהצגת כרטיסיות לאחר הצגת כרטיסייה. השתמש event.targetובכדי event.relatedTargetלמקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה.
hide.bs.tab אירוע זה מופעל כאשר יש להציג כרטיסייה חדשה (ולכן יש להסתיר את הכרטיסייה הפעילה הקודמת). השתמש event.targetובכדי event.relatedTargetלמקד לכרטיסייה הפעילה הנוכחית ולכרטיסייה החדשה שתהיה פעילה בקרוב, בהתאמה.
hidden.bs.tab אירוע זה מופעל לאחר הצגת כרטיסייה חדשה (ולכן הכרטיסייה הפעילה הקודמת מוסתרת). השתמש event.targetובכדי event.relatedTargetלמקד ללשונית הפעילה הקודמת ולכרטיסייה הפעילה החדשה, בהתאמה.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

עצות כלים _

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

עצות כלים עם כותרות באורך אפס לעולם אינן מוצגות.

דוגמאות

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

מכנסיים צמודים כאפיה סביר להניח שלא שמעתם עליהם. תא צילום זקן גולמי דנים בדפוס טבעוני תיק שליח stumptown. סייטן מחווה לשולחן, לביגוד אמריקאי קינואה 8 סיביות מבית Mcsweeney's fixie, יש טרי ריצ'רדסון ויניל צ'מברי. Beard stumptown, קרדיגנים banh mi lomo thundercats. טופו ביודיזל ויליאמבורג מרפה, ארבעת לוקו מק'סוויני'ס מנקה שמבריי טבעוני. אומן ממש אירוני , לא משנה מה keytar, scenster farm-to-table banksy Austin Twitter handle freegan cred raw dim קפה ויראלי.

הסבר סטטי

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

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

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

פונקציונליות הצטרפות

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

דרך אחת לאתחל את כל טיפים הכלים בדף תהיה לבחור אותם לפי data-toggleהתכונה שלהם:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

נוֹהָג

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

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

$('#example').tooltip(options)

סימון

הסימון הנדרש עבור תיאור כלים הוא רק dataתכונה titleוברכיב ה-HTML ברצונך לקבל תיאור כלי. הסימון שנוצר של הסבר כלים הוא די פשוט, אם כי הוא דורש מיקום (כברירת מחדל, מוגדר על topידי הפלאגין).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

קישורים מרובים שורות

לפעמים אתה רוצה להוסיף הסבר כלים להיפר-קישור שעוטף שורות מרובות. התנהגות ברירת המחדל של תוסף תיאור הכלים היא למרכז אותו אופקית ואנכית. הוסף white-space: nowrap;לעוגנים שלך כדי להימנע מכך.

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

בעת שימוש בטיפים של כלים על אלמנטים בתוך .btn-groupאו .input-group, או על אלמנטים הקשורים לטבלה ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), יהיה עליך לציין את האפשרות container: 'body'(מתועדת להלן) כדי למנוע תופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/ או איבוד הפינות המעוגלות שלו כאשר הסבר הכלי מופעל).

אל תנסה להציג עצות כלים על אלמנטים מוסתרים

הפעלת $(...).tooltip('show')כאשר אלמנט היעד נמצא display: none;תגרום לתיאור הכלי להיות ממוקם בצורה שגויה.

עצות כלים נגישות למשתמשי מקלדת וטכנולוגיה מסייעת

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

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

כדי להוסיף תיאור כלי ל- a disabledאו .disabledאלמנט, הכנס את האלמנט בתוך a <div>והחל את הסבר הכלי על זה <div>במקום זאת.

אפשרויות

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

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
אנימציה בוליאני נָכוֹן החל מעבר דהייה של CSS על הסבר הכלי
מְכוֹלָה מחרוזת | שֶׁקֶר שֶׁקֶר

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

לְעַכֵּב מספר | לְהִתְנַגֵד 0

עיכוב הצגת והסתרה של הסבר הכלי (ms) - אינו חל על סוג טריגר ידני

אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה

מבנה האובייקט הוא:delay: { "show": 500, "hide": 100 }

html בוליאני שֶׁקֶר הכנס HTML להסבר הכלי. אם False, textהשיטה של ​​jQuery תשמש להכנסת תוכן ל-DOM. השתמש בטקסט אם אתה מודאג מהתקפות XSS.
מיקום מחרוזת | פוּנקצִיָה 'חלק עליון'

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

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

בוחר חוּט שֶׁקֶר אם מסופק בורר, אובייקטי תיאור כלים יואצלו ליעדים שצוינו. בפועל, זה משמש כדי לאפשר לתוכן HTML דינמי להוסיף עצות כלים. ראה זאת ודוגמה אינפורמטיבית .
תבנית חוּט '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

בסיס HTML לשימוש בעת יצירת הסבר הכלי.

הסבר הכלי titleיוזרק לתוך ה- .tooltip-inner.

.tooltip-arrowיהפוך לחץ של תיאור הכלים.

רכיב העטיפה החיצוני ביותר צריך לכלול את .tooltipהמחלקה.

כותרת מחרוזת | פוּנקצִיָה ''

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

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

הדק חוּט 'פוקוס לרחף' כיצד מופעלת הסבר כלים - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. manualלא ניתן לשלב עם כל טריגר אחר.
נקודת מבט מחרוזת | חפץ | פוּנקצִיָה { selector: 'body', padding: 0 }

שומר את הסבר הכלי בגבולות האלמנט הזה. דוגמה: viewport: '#viewport'או{ "selector": "#viewport", "padding": 0 }

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

תכונות נתונים עבור עצות כלים בודדות

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

שיטות

$().tooltip(options)

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

.tooltip('show')

חושף תיאור כלי של אלמנט. חוזר אל המתקשר לפני שהסבר הכלי הוצג בפועל (כלומר לפני shown.bs.tooltipהתרחשות האירוע). זה נחשב להפעלה "ידנית" של הסבר הכלי. עצות כלים עם כותרות באורך אפס לעולם אינן מוצגות.

$('#element').tooltip('show')

.tooltip('hide')

מסתיר תיאור כלי של רכיב. חוזר אל המתקשר לפני שהסבר הכלי הוסתר בפועל (כלומר לפני hidden.bs.tooltipשהאירוע מתרחש). זה נחשב להפעלה "ידנית" של הסבר הכלי.

$('#element').tooltip('hide')

.tooltip('toggle')

מחליף תיאור כלי של רכיב. חוזר אל המתקשר לפני שהסבר הכלי הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.tooltipאו מתרחש). hidden.bs.tooltipזה נחשב להפעלה "ידנית" של הסבר הכלי.

$('#element').tooltip('toggle')

.tooltip('destroy')

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

$('#element').tooltip('destroy')

אירועים

סוג אירוע תיאור
show.bs.tooltip אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
מוצג.bs.tooltool אירוע זה מופעל כאשר הסבר הכלי נעשה גלוי למשתמש (יחכה לסיום מעברי CSS).
hide.bs.tooltip אירוע זה מופעל מיד כאשר hideשיטת המופע נקראה.
hidden.bs.tooltool אירוע זה מופעל כאשר הסבר הכלים סיים להסתיר מהמשתמש (יחכה לסיום מעברי CSS).
inserted.bs.tooltip אירוע זה מופעל לאחר show.bs.tooltipהאירוע כאשר תבנית הסבר הכלי נוספה ל-DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

תלות בפלאגין

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

פונקציונליות הצטרפות

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

דרך אחת לאתחל את כל הפופ-אוברים בדף תהיה לבחור אותם לפי data-toggleהתכונה שלהם:

$(function () {
  $('[data-toggle="popover"]').popover()
})

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

בעת שימוש בפופ-אובר על אלמנטים בתוך .btn-groupאו .input-group, או על אלמנטים הקשורים לטבלה ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), תצטרך לציין את האפשרות container: 'body'(מתועדת להלן) כדי למנוע תופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/ או איבוד הפינות המעוגלות שלו כאשר הפופ-אובר מופעל).

אל תנסה להציג פופ-אובר על אלמנטים נסתרים

הפעלת $(...).popover('show')כאשר אלמנט היעד נמצא display: none;תגרום למיקום המוקפץ לא נכון.

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

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

קישורים מרובים שורות

לפעמים אתה רוצה להוסיף פופ-אובר להיפר-קישור שעוטף שורות מרובות. התנהגות ברירת המחדל של תוסף הפופ-אובר היא למרכז אותו אופקית ואנכית. הוסף white-space: nowrap;לעוגנים שלך כדי להימנע מכך.

דוגמאות

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

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

טופ אובר

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

פופאובר נכון

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

תחתית קופץ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

פופ-אובר שמאלה

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

דמו ישיר

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

סגור בלחיצה הבאה

השתמש focusבטריגר כדי לבטל פופ-אובר בקליק הבא שהמשתמש מבצע.

נדרש סימון ספציפי לביטול בלחיצה הבאה

להתנהגות נכונה בין דפדפנים ופלטפורמות, עליך להשתמש <a>בתג, לא בתג<button> , וכן עליך לכלול את המאפיינים role="button"ו .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

נוֹהָג

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

$('#example').popover(options)

אפשרויות

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

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
אנימציה בוליאני נָכוֹן החל מעבר דהייה של CSS על הפופ-אובר
מְכוֹלָה מחרוזת | שֶׁקֶר שֶׁקֶר

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

תוֹכֶן מחרוזת | פוּנקצִיָה ''

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

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

לְעַכֵּב מספר | לְהִתְנַגֵד 0

השהיה בהצגה והסתרה של הפופ-אובר (ms) - אינו חל על סוג טריגר ידני

אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה

מבנה האובייקט הוא:delay: { "show": 500, "hide": 100 }

html בוליאני שֶׁקֶר הכנס HTML לתוך הפופ-אובר. אם False, textהשיטה של ​​jQuery תשמש להכנסת תוכן ל-DOM. השתמש בטקסט אם אתה מודאג מהתקפות XSS.
מיקום מחרוזת | פוּנקצִיָה 'ימין'

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

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

בוחר חוּט שֶׁקֶר אם מסופק בורר, אובייקטים קופצים יואצלו ליעדים שצוינו. בפועל, זה משמש כדי לאפשר לתוכן HTML דינמי להוסיף חלונות קופצים. ראה זאת ודוגמה אינפורמטיבית .
תבנית חוּט '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

בסיס HTML לשימוש בעת יצירת הפופ-אובר.

הפופ-אובר titleיוזרק לתוך ה- .popover-title.

הפופ-אובר contentיוזרק לתוך ה- .popover-content.

.arrowיהפוך לחץ של הפופ-אובר.

רכיב העטיפה החיצוני ביותר צריך לכלול את .popoverהמחלקה.

כותרת מחרוזת | פוּנקצִיָה ''

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

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

הדק חוּט 'נְקִישָׁה' כיצד מופעל פופ-אובר - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. manualלא ניתן לשלב עם כל טריגר אחר.
נקודת מבט מחרוזת | חפץ | פוּנקצִיָה { selector: 'body', padding: 0 }

שומר את הפופ-אובר בגבולות האלמנט הזה. דוגמה: viewport: '#viewport'או{ "selector": "#viewport", "padding": 0 }

אם ניתנת פונקציה, היא נקראת עם הרכיב המפעיל DOM node כארגומנט היחיד שלה. ההקשר thisמוגדר למופע המוקפץ.

תכונות נתונים עבור פופ-אובר בודדים

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

שיטות

$().popover(options)

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

.popover('show')

חושף פופ-אובר של אלמנט. חוזר אל המתקשר לפני שהפופ-אובר הוצג בפועל (כלומר לפני shown.bs.popoverהתרחשות האירוע). זה נחשב להפעלה "ידנית" של הפופ-אובר. חלונות קופצים שהכותרת והתוכן שלהם הם באורך אפס לעולם אינם מוצגים.

$('#element').popover('show')

.popover('hide')

מסתיר פופ-אובר של אלמנט. חוזר אל המתקשר לפני שהפופ-אובר הוסתר בפועל (כלומר לפני hidden.bs.popoverהתרחשות האירוע). זה נחשב להפעלה "ידנית" של הפופ-אובר.

$('#element').popover('hide')

.popover('toggle')

מחליף את הפופ-אובר של רכיב. חוזר אל המתקשר לפני שהפופ-אובר הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.popoverאו hidden.bs.popoverמתרחש). זה נחשב להפעלה "ידנית" של הפופ-אובר.

$('#element').popover('toggle')

.popover('destroy')

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

$('#element').popover('destroy')

אירועים

סוג אירוע תיאור
show.bs.popover אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
מוצג.bs.popover אירוע זה מופעל כאשר הפופ-אובר נעשה גלוי למשתמש (יחכה לסיום מעברי CSS).
hide.bs.popover אירוע זה מופעל מיד כאשר hideשיטת המופע נקראה.
hidden.bs.popover אירוע זה מופעל כאשר הפופ-אובר סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS).
inserted.bs.popover אירוע זה מופעל לאחר show.bs.popoverהאירוע כאשר תבנית הפופ-אובר נוספה ל-DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

הודעות התראה alert.js

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

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

בעת שימוש .closeבלחצן, הוא חייב להיות הבן הראשון של הלחצן, .alert-dismissibleושום תוכן טקסט לא יכול לבוא לפניו בסימון.

נוֹהָג

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

כדי שההתראות שלך ישתמשו באנימציה בעת הסגירה, ודא שיש להן את ה- .fadeand.in כבר חלו עליהן.

שיטות

$().alert()

גורם להתראה להאזין לאירועי קליק על רכיבים צאצאים שיש להם את data-dismiss="alert"התכונה. (לא הכרחי בעת שימוש באתחול האוטומטי של הנתונים-API.)

$().alert('close')

סוגר התראה על ידי הסרתה מה-DOM. אם המחלקות .fadeוהן .inקיימות באלמנט, ההתראה תדעך לפני שהיא תוסר.

אירועים

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

סוג אירוע תיאור
התראה.סגור.bs אירוע זה מופעל מיד כאשר closeשיטת המופע נקראת.
התראה סגורה.bs אירוע זה מופעל כאשר ההתראה נסגרה (יחכה לסיום מעברי CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

כפתורים button.js

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

תאימות בין דפדפנים

פיירפוקס מחזיק מעמד במצבי שליטה (השבתה וסימון) על פני טעינות דפים . דרך לעקיפת הבעיה היא להשתמש ב- autocomplete="off". ראה באג #654072 של Mozilla .

ממלכתי

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

תכונה זו הוצאה משימוש מאז v3.3.5 והוסרה ב-v4.

השתמש באיזו מדינה שתרצה!

למען ההדגמה הזו, אנחנו משתמשים ב data-loading-text$().button('loading'), אבל זה לא המצב היחיד שאתה יכול להשתמש בו. ראה עוד על כך להלן $().button(string)בתיעוד .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

מתג יחיד

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

צריך לחצנים שהוחלפו מראש.active וaria-pressed="true"

עבור כפתורים מוחלפים מראש, עליך להוסיף את .activeהמחלקה ואת aria-pressed="true"התכונה buttonלעצמך.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

תיבת סימון / רדיו

הוסף data-toggle="buttons"לתיבת .btn-groupסימון המכילה או כניסות רדיו כדי לאפשר החלפה בסגנונות המתאימים שלהם.

צריך אפשרויות שנבחרו מראש.active

עבור אפשרויות שנבחרו מראש, עליך להוסיף את .activeהמחלקה לקלט labelבעצמך.

מצב מסומן חזותי מתעדכן רק בלחיצה

אם המצב המסומן של כפתור תיבת סימון מתעדכן מבלי להפעיל clickאירוע על הכפתור (למשל באמצעות <input type="reset">או באמצעות הגדרת checkedהמאפיין של הקלט), תצטרך לשנות את .activeהמחלקה על הקלט labelבעצמך.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

שיטות

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

כווץ collapse.js

תוסף גמיש שמשתמש בקומץ של שיעורים להתנהגות קלה להחלפה.

תלות בפלאגין

כיווץ מחייב את תוסף המעברים להיכלל בגרסה שלך של Bootstrap.

דוגמא

לחץ על הלחצנים למטה כדי להציג ולהסתיר אלמנט נוסף באמצעות שינויים בכיתה:

  • .collapseמסתיר תוכן
  • .collapsingמוחל במהלך מעברים
  • .collapse.inמציג תוכן

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

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

Anim pariatur קלישאה reprehenderit, enim eiusmod high life accusamus טרי ריצ'רדסון עד דיונון. 3 wolf moon officia aute, non cupidatat סקייטבורד דולו בראנץ'. משאית אוכל קינואה nesciunt laborum eiusmod. בראנץ' 3 זאב ירח טמפור, sunt aliqua לשים עליו ציפור דיונון קפה ממקור יחיד nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. מודעה טבעונית חוץ קצב סגן לומו. חותלות occaecat בירה מלאכה מחווה לשולחן, ג'ינס גולמי סינתטי אסתטי, כנראה שלא שמעתם עליהם accusamus labore VHS בר קיימא.
Anim pariatur קלישאה reprehenderit, enim eiusmod high life accusamus טרי ריצ'רדסון עד דיונון. 3 wolf moon officia aute, non cupidatat סקייטבורד דולו בראנץ'. משאית אוכל קינואה nesciunt laborum eiusmod. בראנץ' 3 זאב ירח טמפור, sunt aliqua לשים עליו ציפור דיונון קפה ממקור יחיד nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. מודעה טבעונית חוץ קצב סגן לומו. חותלות occaecat בירה מלאכה מחווה לשולחן, ג'ינס גולמי סינתטי אסתטי, כנראה שלא שמעתם עליהם accusamus labore VHS בר קיימא.
Anim pariatur קלישאה reprehenderit, enim eiusmod high life accusamus טרי ריצ'רדסון עד דיונון. 3 wolf moon officia aute, non cupidatat סקייטבורד דולו בראנץ'. משאית אוכל קינואה nesciunt laborum eiusmod. בראנץ' 3 זאב ירח טמפור, sunt aliqua לשים עליו ציפור דיונון קפה ממקור יחיד nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. מודעה טבעונית חוץ קצב סגן לומו. חותלות occaecat בירה מלאכה מחווה לשולחן, ג'ינס גולמי סינתטי אסתטי, כנראה שלא שמעתם עליהם accusamus labore VHS בר קיימא.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

אפשר גם להחליף .panel-bodys עם .list-groups.

  • Bootply
  • One itmus ac facilin
  • ארוס שני

הפוך את הפקדים להרחבה/כיווץ נגישים

הקפד להוסיף aria-expandedלאלמנט הבקרה. תכונה זו מגדירה במפורש את המצב הנוכחי של האלמנט הניתן לקיפול לקוראי מסך ולטכנולוגיות מסייעות דומות. אם האלמנט המתקפל נסגר כברירת מחדל, צריך להיות לו ערך של aria-expanded="false". אם הגדרת את הרכיב הניתן לכיווץ להיות פתוח כברירת מחדל באמצעות inהמחלקה, הגדר aria-expanded="true"על הפקד במקום זאת. התוסף יחליף את התכונה הזו באופן אוטומטי בהתבסס על פתיחת או סגירת הרכיב הניתן לקריסה.

בנוסף, אם רכיב הבקרה שלך מכוון לרכיב אחד שניתן להתכווץ - כלומר data-targetהתכונה מצביעה על idבורר - אתה יכול להוסיף aria-controlsתכונה נוספת לרכיב הבקרה, המכילה את idהרכיב המתכווץ. קוראי מסך מודרניים וטכנולוגיות מסייעות דומות עושים שימוש בתכונה זו כדי לספק למשתמשים קיצורי דרך נוספים כדי לנווט ישירות אל האלמנט הניתן לקריסה עצמו.

נוֹהָג

תוסף הקריסה משתמש בכמה מחלקות כדי להתמודד עם ההרמה הכבדה:

  • .collapseמסתיר את התוכן
  • .collapse.inמציג את התוכן
  • .collapsingמתווסף כאשר המעבר מתחיל, ומוסר כאשר הוא מסתיים

ניתן למצוא שיעורים אלה ב component-animations.less.

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

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

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

דרך JavaScript

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

$('.collapse').collapse()

אפשרויות

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

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
הוֹרֶה בוחר שֶׁקֶר אם מסופק בורר, כל הרכיבים הניתנים לכיווץ תחת האב שצוין ייסגרו כאשר הפריט הניתן לכיווץ יוצג. (בדומה להתנהגות האקורדיון המסורתית - זה תלוי panelבכיתה)
לְמַתֵג בוליאני נָכוֹן מחליפה את הרכיב הניתן לקריסה בעת הפניה

שיטות

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

מחליף רכיב שניתן להתכווץ לתצוגה או להסתרה. חוזר אל המתקשר לפני שהרכיב המתכווץ הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.collapseאו מתרחש).hidden.bs.collapse

.collapse('show')

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

.collapse('hide')

מסתיר אלמנט מתקפל. חוזר אל המתקשר לפני שהרכיב הניתן לקריסה הוסתר בפועל (כלומר לפני hidden.bs.collapseהתרחשות האירוע).

אירועים

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

סוג אירוע תיאור
show.bs.collapse אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
הצג.bs.התמוטטות אירוע זה מופעל כאשר רכיב כיווץ נעשה גלוי למשתמש (יחכה לסיום מעברי CSS).
hide.bs.collapse אירוע זה מופעל מיד כאשר hideהשיטה נקראה.
hidden.bs.collapse אירוע זה מופעל כאשר אלמנט כיווץ הוסתר מהמשתמש (יחכה לסיום מעברי CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

כתוביות אופציונליות

הוסף כיתובים לשקופיות שלך בקלות עם .carousel-captionהאלמנט בתוך כל .item. הצב שם כמעט כל HTML אופציונלי והוא יתיישר ויעוצב באופן אוטומטי.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

קרוסלות מרובות

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

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

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

התכונה data-ride="carousel"משמשת לסימון קרוסלה כהנפשה החל מטעינת העמוד. לא ניתן להשתמש בו בשילוב עם אתחול JavaScript מפורש (מיותר ומיותר) של אותה קרוסלה.

דרך JavaScript

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

$('.carousel').carousel()

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

שֵׁם סוּג בְּרִירַת מֶחדָ�� תיאור
הַפסָקָה מספר 5000 משך הזמן שיש לעכב בין רכיבה אוטומטית של פריט. אם לא נכון, הקרוסלה לא תעבור אוטומטית.
הַפסָקָה מחרוזת | ריק "לְרַחֵף" אם מוגדר ל- "hover", משהה את רכיבת הקרוסלה פועלת mouseenterומחדש את הרכיבה על הקרוסלה mouseleave. אם מוגדר ל- null, ריחוף מעל הקרוסלה לא ישהה ​​אותה.
לַעֲטוֹף בוליאני נָכוֹן האם הקרוסלה צריכה להסתובב ברציפות או שתהיה לה עצירות קשות.
מקלדת בוליאני נָכוֹן האם הקרוסלה צריכה להגיב לאירועי מקלדת.

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

$('.carousel').carousel({
  interval: 2000
})

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

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

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

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

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

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

לשני האירועים יש את המאפיינים הנוספים הבאים:

  • direction: הכיוון שבו הקרוסלה מחליקה (או "left"או "right").
  • relatedTarget: רכיב ה-DOM המוחלף למקומו כפריט הפעיל.

כל אירועי הקרוסלה נורים לעבר הקרוסלה עצמה (כלומר לעבר ה- <div class="carousel">).

סוג אירוע תיאור
מגלשת.bs.קרוסלה אירוע זה מופעל מיד כאשר slideשיטת המופע מופעלת.
slid.bs.carousel אירוע זה מופעל כאשר הקרוסלה השלימה את מעבר השקופיות שלה.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

הצמד את affix.js

דוגמא

תוסף האפיק מופעל position: fixed;ומכבה, מחקה את האפקט שנמצא עם position: sticky;. הניווט המשנה מימין הוא הדגמה חיה של התוסף affix.


נוֹהָג

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

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

מיקום באמצעות CSS

הפלאגין affix עובר בין שלוש מחלקות, שכל אחת מהן מייצגת מצב מסוים: .affix, .affix-top, ו .affix-bottom. עליך לספק את הסגנונות, למעט position: fixed;על.affix , עבור השיעורים הללו בעצמך (ללא תלות בתוסף זה) כדי לטפל בעמדות בפועל.

כך פועל הפלאגין אפיקס:

  1. כדי להתחיל, התוסף מוסיף.affix-top כדי לציין שהאלמנט נמצא במיקום העליון שלו. בשלב זה לא נדרש מיקום CSS.
  2. גלילה מעבר לרכיב שברצונך להדביק אמורה להפעיל את ההדבקה בפועל. זה המקום שבו .affixמחליפים .affix-topומגדירים position: fixed;(מסופק על ידי ה-CSS של Bootstrap).
  3. אם מוגדר היסט תחתון, גלילה מעבר לו אמורה להחליף .affixב- .affix-bottom. מכיוון שקיזוזים הם אופציונליים, הגדרה אחת מחייבת אותך להגדיר את ה-CSS המתאים. במקרה זה, הוסף position: absolute;במידת הצורך. התוסף משתמש בתכונת הנתונים או באפשרות JavaScript כדי לקבוע היכן למקם את האלמנט משם.

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

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

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

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

דרך JavaScript

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

אפשרויות

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

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
לְקַזֵז מספר | פונקציה | לְהִתְנַגֵד 10 פיקסלים לקיזוז מהמסך בעת חישוב מיקום הגלילה. אם מסופק מספר בודד, ההיסט יוחל בכיוונים העליון והתחתון כאחד. כדי לספק קיזוז ייחודי, תחתון ועליון פשוט ספק אובייקט offset: { top: 10 }או offset: { top: 10, bottom: 5 }. השתמש בפונקציה כאשר אתה צריך לחשב היסט באופן דינמי.
יַעַד בורר | צומת | אלמנט jQuery windowהאובייקט _ מציין את רכיב היעד של התיק.

שיטות

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

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

$('#myAffix').affix('checkPosition')

אירועים

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

סוג אירוע תיאור
affix.bs.affix אירוע זה מופעל מיד לפני שהרכיב הוצמד.
affixed.bs.affix אירוע זה מופעל לאחר שהרכיב הוצמד.
affix-top.bs.affix אירוע זה מופעל מיד לפני שהאלמנט הוצמד למעלה.
affixed-top.bs.affix אירוע זה מופעל לאחר שהרכיב הוצמד למעלה.
affix-bottom.bs.affix אירוע זה מופעל מיד לפני שהאלמנט הוצמד-למטה.
affixed-bottom.bs.affix אירוע זה מופעל לאחר שהרכיב הוצמד-למטה.