איבערבליק

יחיד אָדער צונויפגעשטעלט

פּלוגינס קענען זיין אַרייַנגערעכנט ינדיווידזשואַלי (ניצן באָאָטסטראַפּ ס יחיד *.jsטעקעס), אָדער אַלע אין אַמאָל (ניצן bootstrap.jsאָדער די מיניפיעד bootstrap.min.js).

ניצן די קאַמפּיילד דזשאַוואַסקריפּט

ביידע bootstrap.jsאון bootstrap.min.jsאַנטהאַלטן אַלע פּלוגינס אין אַ איין טעקע. אַרייַננעמען בלויז איין.

פּלוגין דיפּענדאַנסיז

עטלעכע פּלוגינס און קסס קאַמפּאָונאַנץ אָפענגען אויף אנדערע פּלוגינס. אויב איר ינקלודז פּלוגינס ינדיווידזשואַלי, מאַכן זיכער צו קאָנטראָלירן פֿאַר די דיפּענדאַנסיז אין די דאָקומענטן. אויך טאָן אַז אַלע פּלוגינס אָפענגען אויף דזשקווערי (דאָס מיטל דזשקווערי מוזן זיין אַרייַנגערעכנט איידער די פּלוגין טעקעס). באַראַטנ אונדזערbower.json צו זען וואָס ווערסיעס פון jQuery זענען געשטיצט.

דאַטן אַטריביוץ

איר קענען נוצן אַלע באָאָטסטראַפּ פּלוגינס ריין דורך די מאַרקאַפּ אַפּי אָן שרייבן אַ איין שורה פון דזשאַוואַסקריפּט. דאָס איז באָאָטסטראַפּ ס ערשטער-קלאַס אַפּי און זאָל זיין דיין ערשטער באַטראַכטונג ווען איר נוצן אַ פּלוגין.

אין עטלעכע סיטואַטיאָנס, עס קען זיין דיזייראַבאַל צו קער אַוועק די פאַנגקשאַנאַליטי. דעריבער, מיר אויך צושטעלן די פיייקייט צו דיסייבאַל די דאַטן אַטריביוט אַפּי דורך אַנבינדינג אַלע געשעענישן אויף דעם דאָקומענט מיט נאָמען data-api. דאָס קוקט ווי דאָס:

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

אַלטערנאַטיוועלי, צו ציל אַ ספּעציפיש פּלוגין, נאָר אַרייַן די נאָמען פון דעם פּלוגין ווי אַ נאַמעספּאַסע צוזאמען מיט די דאַטן-אַפּי נאַמעספּאַסע ווי דאָס:

$(document).off('.alert.data-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 גיט מנהג events פֿאַר די יינציק אַקשאַנז פון רובֿ פּלוגינס. בכלל, די קומען אין אַ ינפיניטיווע און פאַרגאַנגענהייט באַטייליקונג פאָרעם - ווו די ינפיניטיווע (למשל show) איז טריגערד אין די אָנהייב פון אַ געשעעניש, און זיין פאַרגאַנגענהייט פּאַרטיסיפּול פאָרעם (למשל shown) איז טריגערד אויף די קאַמפּלישאַן פון אַ קאַמף.

זינט 3.0.0, אַלע באָאָצטראַפּ געשעענישן זענען נאַמעספּאַסעד.

כל ינפיניטיווע געשעענישן צושטעלן preventDefaultפאַנגקשאַנאַליטי. דאָס גיט די פיייקייט צו האַלטן די דורכפירונג פון אַ קאַמף איידער עס סטאַרץ.

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

ווערסיע נומערן

די ווערסיע פון ​​יעדער פון Bootstrap ס jQuery פּלוגינס קענען זיין אַקסעסט דורך די VERSIONפאַרמאָג פון די פּלאַגין ס קאַנסטראַקטער. פֿאַר בייַשפּיל, פֿאַר די טאָאָלטיפּ פּלוגין:

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

קיין ספּעציעל פאָלבאַקס ווען דזשאַוואַסקריפּט איז פאַרקריפּלט

באָאָטסטראַפּ ס פּלוגינס טאָן ניט פאַלן צוריק ספּעציעל גראַציעז ווען דזשאַוואַסקריפּט איז פאַרקריפּלט. אויב איר זאָרגן וועגן די באַניצער דערפאַרונג אין דעם פאַל, נוצן <noscript>צו דערקלערן די סיטואַציע (און ווי צו געבן דזשאַוואַסקריפּט) צו דיין יוזערז, און / אָדער לייגן דיין אייגענע מנהג פאָלבאַקס.

דריט-פּאַרטיי לייברעריז

באָאָטסטראַפּ שטיצט נישט אַפישאַלי דריט-פּאַרטיי דזשאַוואַסקריפּט לייברעריז ווי פּראָטאָטיפּע אָדער דזשקווערי וי. טראָץ .noConflictאון נאַמעספּאַסעד געשעענישן, עס קען זיין קאַמפּאַטאַבילאַטי פראבלעמען וואָס איר דאַרפֿן צו פאַרריכטן אויף דיין אייגענע.

טראַנזישאַנז transition.js

וועגן טראַנזישאַנז

פֿאַר פּשוט יבערגאַנג יפעקץ, אַרייַננעמען transition.jsאַמאָל צוזאמען די אנדערע JS טעקעס. אויב איר נוצן די קאָמפּילעד (אָדער מינאַפייד) bootstrap.js, עס איז ניט דאַרפֿן צו אַרייַננעמען דעם - עס איז שוין דאָרט.

וואָס ס ין

Transition.js איז אַ יקערדיק העלפּער פֿאַר transitionEndגעשעענישן און אַ CSS יבערגאַנג עמולאַטאָר. עס איז געניצט דורך די אנדערע פּלוגינס צו קאָנטראָלירן פֿאַר CSS יבערגאַנג שטיצן און צו כאַפּן כאַנגגינג טראַנזישאַנז.

דיסייבלינג טראַנזישאַנז

טראַנזישאַנז קענען זיין גלאָובאַלי פאַרקריפּלט ניצן די פאלגענדע דזשאַוואַסקריפּט סניפּאַט, וואָס מוזן קומען נאָך transition.js(אָדער bootstrap.jsאָדער bootstrap.min.js, ווי די פאַל קען זיין) איז לאָודיד:

$.support.transition = false

מאָדעס modal.js

מאָדאַלס זענען סטרימליינד, אָבער פלעקסאַבאַל, דיאַלאָג פּראַמפּס מיט די מינימום פארלאנגט פאַנגקשאַנאַליטי און קלוג דיפאָלץ.

קייפל עפֿענען מאָדאַלז ניט געשטיצט

זייט זיכער נישט צו עפֿענען אַ מאָדאַל בשעת אן אנדער איז נאָך קענטיק. ווייזן מער ווי איין מאָדאַל אין אַ צייַט ריקווייערז מנהג קאָד.

מאָדאַל מאַרקאַפּ פּלייסמאַנט

שטענדיק פּרובירן צו שטעלן אַ מאָדאַל ס HTML קאָד אין אַ שפּיץ-מדרגה שטעלע אין דיין דאָקומענט צו ויסמיידן אנדערע קאַמפּאָונאַנץ וואָס ווירקן די מאָדאַל ס אויסזען און / אָדער פאַנגקשאַנאַליטי.

קייוויאַץ פֿאַר רירעוודיק מיטל

עס זענען עטלעכע קייוויאַץ וועגן די נוצן פון מאָדאַלז אויף רירעוודיק דעוויסעס. זען אונדזער בלעטערער שטיצן דאָקומענטן פֿאַר דעטאַילס.

רעכט צו ווי HTML5 דיפיינז זייַן סעמאַנטיקס, די autofocusHTML אַטריביוט האט קיין ווירקונג אין באָאָטסטראַפּ מאָדאַלז. צו דערגרייכן די זעלבע ווירקונג, נוצן עטלעכע מנהג דזשאַוואַסקריפּט:

$('#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 -->

לעבן דעמאָ

טאַגאַל אַ מאָדאַל דורך דזשאַוואַסקריפּט דורך געבן אַ קליק דעם קנעפּל אונטן. עס וועט רוק אַראָפּ און וועלקן אין די שפּיץ פון די בלאַט.

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

עמבעדדינג יאָוטובע ווידיאס

עמבעדדינג יאָוטובע ווידיאס אין מאָדאַלס ריקווייערז נאָך דזשאַוואַסקריפּט ניט אין באָאָטסטראַפּ צו אויטאָמאַטיש האַלטן פּלייבאַק און מער. זען דעם נוציק 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 גריד סיסטעם אין אַ מאָדאַל, נאָר נעסט עס .rowאין די .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און HTML data-*אַטריביוץ (עפשער דורך jQuery ) צו בייַטן די אינהאַלט פון די מאָדאַל דיפּענדינג אויף וואָס קנעפּל איז קליקט. זען די מאָדאַל עווענט דאָקומענטן פֿאַר דעטאַילס אויף 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)
})

באַניץ

די מאָדאַל פּלוגין טאַגאַלז דיין פאַרבאָרגן אינהאַלט אויף פאָדערונג, דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. עס אויך מוסיף .modal-openצו די <body>אָווועררייד פעליקייַט סקראָללינג נאַטור און דזשענערייץ אַ .modal-backdropצו צושטעלן אַ גיט געגנט פֿאַר דימיסינג געוויזן מאָדאַלז ווען קליקינג אַרויס די מאָדאַל.

דורך דאַטן אַטריביוץ

אַקטאַווייט אַ מאָדאַל אָן שרייבן דזשאַוואַסקריפּט. שטעלן data-toggle="modal"אויף אַ קאָנטראָללער עלעמענט, ווי אַ קנעפּל, צוזאמען מיט אַ data-target="#foo"אָדער href="#foo"צו ציל אַ ספּעציפיש מאָדאַל צו טאַגאַל.

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

דורך דזשאַוואַסקריפּט

רופן אַ מאָדאַל מיט שייַן myModalמיט אַ איין שורה פון דזשאַוואַסקריפּט:

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-backdrop="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
באַקדראַפּ באָאָלעאַן אָדער די שטריקל'static' אמת כולל אַ מאָדאַל-באַקדראַפּ עלעמענט. אַלטערנאַטיוועלי, ספּעציפיצירן staticפֿאַר אַ באַקדראַפּ וואָס טוט נישט פאַרמאַכן די מאָדאַל אויף גיט.
קיבארד בוליאַן אמת קלאָוזיז די מאָדאַל ווען אַנטלויפן שליסל איז געדריקט
ווייַזן בוליאַן אמת ווייזט די מאָדאַל ווען ינישאַלייזד.
ווייַט דרך פאַלש

דער אָפּציע איז דיפּרישיייטיד זינט וו3.3.0 און איז אַוועקגענומען אין וו4. מיר רעקאָמענדירן אַנשטאָט ניצן קליענט-זייַט טעמפּלאַטינג אָדער אַ דאַטן ביינדינג פריימווערק, אָדער רופן jQuery.load זיך.

אויב אַ ווייַט URL איז צוגעשטעלט, אינהאַלט וועט זיין לאָודיד איין מאָל דורך jQuery ס loadאופֿן און ינדזשעקטיד אין די .modal-contentדייוו. אויב איר נוצן די דאַטן-אַפּי, איר קענט אַלטערנאַטיוועלי נוצן דעם 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פאַרמאָג פון דער געשעעניש.
געוויזן.בס.מאָדאַל דער געשעעניש איז פייערד ווען די מאָדאַל איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). אויב געפֿירט דורך אַ קליק, די קליקט עלעמענט איז בנימצא ווי די relatedTargetפאַרמאָג פון דער געשעעניש.
hide.bs.modal דעם געשעעניש איז פייערד מיד ווען די hideבייַשפּיל אופֿן איז גערופן.
hidden.bs.modal דער געשעעניש איז פייערד ווען די מאָדאַל איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
loaded.bs.modal דעם געשעעניש איז פייערד ווען די מאָדאַל האט לאָודיד אינהאַלט ניצן די remoteאָפּציע.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

דראָפּדאָוונס dropdown.js

לייג דראָפּדאָוון מעניוז צו כּמעט אַלץ מיט דעם פּשוט פּלוגין, אַרייַנגערעכנט די נאַוובאַר, טאַבס און פּילז.

ין אַ נאַוובאַר

ין פּילז

דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, די דראָפּדאָוון פּלוגין טאַגאַלז פאַרבאָרגן אינהאַלט (דראָפּדאָוון מעניוז) דורך טאַגאַלינג די .openקלאַס אויף דער פאָטער רשימה נומער.

אויף רירעוודיק דעוויסעס, עפן אַ דראָפּדאָוון מוסיף אַ .dropdown-backdropווי אַ צאַפּן געגנט פֿאַר קלאָוזינג דראָפּדאָוון מעניוז ווען טאַפּינג אַרויס די מעניו, אַ פאָדערונג פֿאַר געהעריק יאָס שטיצן.דעם מיטל אַז באַשטימען פון אַן אָפֿן דראָפּדאָוון מעניו צו אַ אַנדערש דראָפּדאָוון מעניו ריקווייערז אַן עקסטרע צאַפּן אויף רירעוודיק.

באַמערקונג: די 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>

צו האַלטן URL ס בעשאָלעם מיט לינק קנעפּלעך, נוצן די 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>

דורך דזשאַוואַסקריפּט

רופן די דראָפּדאָוונס דורך דזשאַוואַסקריפּט:

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

data-toggle="dropdown"נאָך פארלאנגט

צי איר רופן דיין דראָפּדאָוון דורך דזשאַוואַסקריפּט אָדער אַנשטאָט ניצן די דאַטן-אַפּי, עס data-toggle="dropdown"איז שטענדיק פארלאנגט צו זיין פאָרשטעלן אויף די צינגל עלעמענט פון די דראָפּדאָוון.

קיינער

טאַגאַלס די דראָפּדאָוון מעניו פון אַ געגעבן נאַוובאַר אָדער טאַבבעד נאַוויגאַציע.

אַלע דראָפּדאָוון געשעענישן זענען פייערד אין די .dropdown-menuפאָטער עלעמענט.

אַלע דראָפּדאָוון געשעענישן האָבן אַ relatedTargetפאַרמאָג, וועמענס ווערט איז די טאַגאַלינג אַנקער עלעמענט.

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

סקראָלספּי סקראָלספּי.דזשס

בייַשפּיל אין נאַוובאַר

די ScrollSpy פּלוגין איז פֿאַר אויטאָמאַטיש אַפּדייטינג נאַוו טאַרגאַץ באזירט אויף מעגילע שטעלע. מעגילע די געגנט אונטער די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן. די דראָפּדאָוון סאַב-ייטאַמז וועט אויך זיין כיילייטיד.

@פעט

אַד לעגינגז קייטאַר, בראַנטש שייַן קונסט פּאַרטיי דאָלאָר אַרבעט. פּיטשפאָרק יר ענים לא-פי איידער זיי סאָלד אויס קווי. טומבלר פאַרם-צו-טיש וועלאָסיפּעד רעכט וועלכער. אַני קעפיה קאַרדיגאַן. וועליט סעיטאַן מקססוועעעני ס פאָטאָ בוט 3 וואָלף לבנה ירורע. קאָסבי סוועטער לאָמאָ דזשין קורצע הייזלעך, וויליאַמסבורג האָאָדיע מינים וואָס איר מיסטאָמע האָבן נישט געהערט פון זיי און קאַרדיגאַן טראַסט פאָנד culpa biodiesel Wes anderson esthetic. ניהיל טאַטוד אַקסאַמוס, קרעד איראָניע ביאָדיעסעל קעפייעה האַרטמאַן וללאַמקאָ קאָנסעקוואַט.

@מדאָ

וועניאַם מאַרפאַ וואָנצעס סקייטבאָרד, אַדאַפּיסיסינג פוגיאַט וועליט פּיטשפאָרק באָרד. פרעעגאַן באָרד אַליקוואַפּידאַטאַט מאַקסוועיני ס וועראָ. קופּידאַט פיר לאָקאָ ניסי, ea helvetica nulla carles. טאַטאָאָעד קאָסבי סוועטער עסנוואַרג טראָק, Mcsweeney's איז ניט פריגאַן וויינאַל. לאָ-פי וואס אַנדערסאָן +1 סאַרטאָריאַל. קאַרלעס ניט עסטעטיש עקסערסיטיישאַן quis gentrify. ברוקלין אַדאַפּיסיסינג מעלאָכע ביר וויצע קיטאַר דעזעראַנט.

איינער

Occaecat commodo aliqua delectus. Fap קראַפט ביר דעסערט סקייטבאָרד עאַ. לאָמאָ וועלאָסיפּעד רעכט אַדאַפּיסיסינג באַה מי, און איר וועט זיין ווייַטער מדרגה לאָקאַוואָרע איין-אָריגינעל קאַווע אין מאַגנאַ וועניאַם. הויך-לעבן שייַן וויינאַל, עקאָו פּאַרק קאַנסעקוואַט מיט אַלעליקוויפּ באַן מי פּיטשפאָרק. וועראָ VHS איז אַדאַפּייזינג. קאָנסעקטעטור איז DIY מינים שליח זעקל. קרעד עקס אין, סאַסטיינאַבאַל דעלעקטוס קאַנסעקטור פאַני פּאַק יפאָנע.

צוויי

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.

קיטאַר צוויי בלאָג, אַ שליח טאַש מיט וועלכער דילעקטוס עסנוואַרג טראָק. סאַפּיענט סינטה שייַן אַססומענדאַ. לאָקאַוואָרע סעד העלוועטיקאַ קליינטשיק איראָניע, טאַנדערקאַץ איר מיסטאָמע האָבן נישט געהערט פון זיי קאָנסעקוואַט האָאָדיע גלוטען-פֿרייַ לאָ-פי פאַפּ אַליקוויפּ. לאַבאָר עליט אָרט איידער זיי סאָלד אויס, טערי ריטשאַרדסאָן פּראָידענט בראַנטש נעססיונט quis cosby sweater pariatur keffiyeh ut helvetica artisan. קאַרדיגאַן מעלאָכע ביר סעיטאַן פאַרטיק וועליט. VHS chambray laboris tempor veniam. אַנימע מאָלליט מינימאַל קאָממאָדאָ וללאַמקאָ טאַנדערקאַץ.

באַניץ

ריקווייערז Bootstrap נאַוויגאַציע

סקראָלספּי דערווייַל ריקווייערז די נוצן פון אַ Bootstrap נאַוו קאָמפּאָנענט פֿאַר געהעריק כיילייטינג פון אַקטיוו פֿאַרבינדונגען.

ריזאַלווד שייַן טאַרגאַץ פארלאנגט

נאַוובאַר פֿאַרבינדונגען מוזן האָבן ריזאַלווד שייַן טאַרגאַץ. פֿאַר בייַשפּיל, אַ <a href="#home">home</a>מוזן שטימען צו עפּעס אין די DOM ווי <div id="home"></div>.

ניט- :visibleציל עלעמענטן איגנאָרירט

ציל עלעמענטן וואָס זענען נישט :visibleלויט jQuery וועט זיין איגנאָרירט און זייער קאָראַספּאַנדינג נאַוו ייטאַמז וועט קיינמאָל זיין כיילייטיד.

ריקוויירז קאָרעוו פּאַזישאַנינג

ניט קיין ענין די ימפּלאַמענטיישאַן אופֿן, סקראָלספּי ריקווייערז די נוצן פון position: relative;דעם עלעמענט איר ספּייינג. אין רובֿ פאלן, דאָס איז די יו <body>. ווען סקראָלספּיינג אויף אנדערע עלעמענטן ווי די <body>, זיין זיכער צו האָבן אַ heightגאַנג און overflow-y: scroll;געווענדט.

דורך דאַטן אַטריביוץ

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

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>

דורך דזשאַוואַסקריפּט

נאָך אַדינג position: relative;דיין CSS, רופן די סקראָלספּי דורך דזשאַוואַסקריפּט:

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

מעטהאָדס

.scrollspy('refresh')

ווען איר נוצן סקראָלספּי אין קאַנדזשאַנגקשאַן מיט אַדינג אָדער רימוווינג עלעמענטן פון די DOM, איר דאַרפֿן צו רופן דעם דערפרישן אופֿן ווי אַזוי:

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-offset="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
אָפסעט נומער 10 פּיקסעלס צו פאָטאָ פון שפּיץ ווען קאַלקיאַלייטינג די שטעלע פון ​​די מעגילע.

געשעענישן

געשעעניש טיפּ באַשרייַבונג
אַקטאַווייט.בס.סקראָלספּי דער געשעעניש פירט ווען אַ נייַ נומער ווערט אַקטיווייטיד דורך די סקראָלספּי.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

טאַגלאַבלע טאַבס טאַב.דזשס

בייַשפּיל טאַבס

לייג שנעל, דינאַמיש קוויטל פאַנגקשאַנאַליטי צו יבערגאַנג דורך פּאַנעס פון היגע אינהאַלט, אפילו דורך דראָפּדאָוון מעניוז. נעסטעד טאַבס זענען נישט געשטיצט.

רוי דענים איר מיסטאָמע האָבן נישט געהערט פון זיי דזשין קורצע הייזלעך אַוסטין. Nesciunt Tofu Stumptown Aliqua, רעטראָ סינטה בעל רייניקן. וואָנצעס קליינטשיק טעמפּער, וויליאַמסבורג קאַרלעס וועגאַן העלוועטיקאַ. רעפּרעהענדעריט בוטשער רעטראָ קעפיה דרעאַמקאַטשער סינטה. קאָסבי סוועטער אי.יו. באַנה מי, וואָס איז געווען טערי ריטשאַרדסאָן עקס טינטפיש. ייַנטיילן דעם פּלאַץ פון יפאָנע. סעיטאַן אַליקוויפּ מיט קאַרדיגאַן אמעריקאנער קליידונג, קאַצעוו וואָלופּטאַטע איז ניט גענוגיק.

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.

עקסטענדז טאַבבעד נאַוויגאַציע

דעם פּלוגין יקסטענדז די טאַבבעד נאַוויגאַציע קאָמפּאָנענט צו לייגן טאַבבאַבלע געביטן.

באַניץ

געבן טאַבבאַבלע טאַבס דורך דזשאַוואַסקריפּט (יעדער קוויטל דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):

$('#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)

מאַרקאַפּ

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן data-toggle="tab"אָדער data-toggle="pill"אויף אַן עלעמענט. אַדינג די navאון nav-tabsקלאסן צו די קוויטל ulוועט צולייגן די באָאָטסטראַפּ קוויטל סטילינג , בשעת אַדינג די 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

אַקטאַווייץ אַ קוויטל עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ 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צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
געוויזן.בס.טאַב דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן 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
})

Tooltips tooltip.js

ינספּייערד דורך די ויסגעצייכנט jQuery.tipsy פּלוגין געשריבן דורך Jason Frame; Tooltips זענען אַ דערהייַנטיקט ווערסיע וואָס טאָן ניט פאַרלאָזנ זיך בילדער, נוצן CSS3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש.

מכשירים מיט נול-לענג טיטלען זענען קיינמאָל געוויזן.

ביישפילן

האָווער אויף די לינקס אונטן צו זען מכשירים:

ענג הויזן ווייַטער מדרגה קעפיה איר מיסטאָמע נישט געהערט פון זיי. פאָטאָ בוט באָרד רוי דענים לעטטערפּרעסס וועגאַן מעסינדזשער זעקל סטאַמפּטאָוון. פאַרם-צו-טיש סעיטאַן, מאַקסוועעניי ס פיקסי סאַסטיינאַבאַל קווינאָאַ 8-ביסל אמעריקאנער קליידונג האָבן אַ טערי ריטשאַרדסאָן וויינאַל טשאַמברייַ. באָרד סטאַמפּטאָוון, קאַרדיגאַנז באַן מי לאָמאָ טאַנדערקאַץ. טאָפו ביאָדיעסעל וויליאַמסבורג מאַרפאַ, פיר לאָקאָ מאַקסוועיני ס רייניקן וועגאַן טשאַמברייַ. א טאַקע ייראַניק באַל - מעלאָכע, וועלכער קייטאַר , סצענעסטער פאַרם-צו-טיש באַנקסי אַוסטין טוויטטער שעפּן פרעעגאַן קרעד רוי דענים איין-אָריגינעל קאַווע וויראַל.

סטאַטיק מכשירים

פיר אָפּציעס זענען בנימצא: שפּיץ, רעכט, דנאָ און לינקס אַליינד.

פיר אינסטרוקציעס

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

אָפּט-אין פאַנגקשאַנאַליטי

פֿאַר פאָרשטעלונג סיבות, די טאָאָלטיפּ און פּאָפּאָווער דאַטן-אַפּיס זענען אַפּט-אין, טייַטש איר מוזן ינישאַלייז זיי זיך .

איין וועג צו ינישאַלייז אַלע מכשירים אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggleאַטריביוט:

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

באַניץ

די טאָאָלטיפּ פּלוגין דזשענערייץ אינהאַלט און מאַרקאַפּ אויף מאָנען, און דורך פעליקייַט לייגט מכשירים נאָך זייער צינגל עלעמענט.

צינגל די טאָאָלטיפּ דורך דזשאַוואַסקריפּט:

$('#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"אַטריביוט.

טאָאָלטיפּס אויף פאַרקריפּלט עלעמענטן דאַרפן ראַפּער עלעמענטן

צו לייגן אַ טאָאָלטיפּ צו אַ disabledאָדער .disabledעלעמענט, שטעלן דעם עלעמענט ין אַ <div>און אָנווענדן די טאָאָלטיפּ צו אַז <div>אַנשטאָט.

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-animation="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
אַנאַמיישאַן בוליאַן אמת צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָאָלטיפּ
קאנטעינער שטריקל | פאַלש פאַלש

אַפּפּענדז די מכשירים צו אַ ספּעציפיש עלעמענט. בייַשפּיל: container: 'body'. דער אָפּציע איז דער הויפּט נוציק ווייַל עס אַלאַוז איר צו שטעלן די טאָאָלטיפּ אין די לויפן פון דעם דאָקומענט לעבן די טריגערינג עלעמענט - וואָס וועט פאַרמיידן די טאָאָלטיפּ פון פלאָוטינג אַוועק פון די טריגערינג עלעמענט בעשאַס אַ פֿענצטער גרייס.

פאַרהאַלטן נומער | כייפעץ 0

פאַרהאַלטן ווייַזונג און כיידינג די טאָאָלטיפּ (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ

אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן

כייפעץ סטרוקטור איז:delay: { "show": 500, "hide": 100 }

HTML בוליאַן פאַלש אַרייַנלייגן HTML אין די טאָאָלטיפּ. אויב פאַלש, די 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קענען ניט זיין קאַמביינד מיט קיין אנדערע צינגל.
viewport שטריקל | כייפעץ | פֿונקציע {סעלעקטאָר: 'גוף', וואַטן: 0}

האלט די טאָאָלטיפּ ין די גווול פון דעם עלעמענט. בייַשפּיל: viewport: '#viewport'אָדער{ "selector": "#viewport", "padding": 0 }

אויב אַ פֿונקציע איז געגעבן, עס איז גערופן מיט די טריגערינג עלעמענט DOM נאָדע ווי זיין בלויז אַרגומענט. דער 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בייַשפּיל אופֿן איז גערופן.
געוויזן.בס.מכשיר עצה דער געשעעניש איז פייערד ווען די טאָאָלטיפּ איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
hide.bs.tooltip דעם געשעעניש איז פייערד מיד ווען די hideבייַשפּיל אופֿן איז גערופן.
hidden.bs.tooltip דער געשעעניש איז פייערד ווען די טאָאָלטיפּ איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
inserted.bs.tooltip דער געשעעניש איז פייערד נאָך די show.bs.tooltipגעשעעניש ווען די טאָאָלטיפּ מוסטער איז צוגעגעבן צו די DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

פּאָפּאָווערס popover.js

לייג קליין אָוווערלייז פון אינהאַלט, ווי די אויף די iPad, צו קיין עלעמענט פֿאַר האָוסינג צווייטיק אינפֿאָרמאַציע.

פּאָפּאָווערס וועמענס טיטל און אינהאַלט זענען נול-לענג זענען קיינמאָל געוויזן.

פּלוגין אָפענגיקייַט

פּאָפּאָווערס דאַרפן די טאָאָלטיפּ פּלוגין צו זיין אַרייַנגערעכנט אין דיין ווערסיע פון ​​באָאָטסטראַפּ.

אָפּט-אין פאַנגקשאַנאַליטי

פֿאַר פאָרשטעלונג סיבות, די טאָאָלטיפּ און פּאָפּאָווער דאַטן-אַפּיס זענען אַפּט-אין, טייַטש איר מוזן ינישאַלייז זיי זיך .

איין וועג צו ינישאַלייז אַלע פּאָפּאָווערס אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggleאַטריביוט:

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

פּאָפּאָווערס אין קנעפּל גרופּעס, אַרייַנשרייַב גרופּעס און טישן דאַרפן ספּעציעל באַשטעטיקן

ווען איר נוצן פּאָפּאָווערס אויף עלעמענטן אין אַ .btn-groupאָדער אַן .input-group, אָדער אויף טיש-פֿאַרבונדענע עלעמענטן ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), איר וועט האָבן צו ספּעציפיצירן די אָפּציע container: 'body'(דאַקיאַמענטאַד אונטן) צו ויסמיידן אַנוואָנטיד זייַט יפעקץ (אַזאַ ווי דער עלעמענט גראָוינג ברייט און / אָדער פאַרלירן זיין ראַונדיד עקן ווען די פּאָפּאָווער איז טריגערד).

דו זאלסט נישט פּרובירן צו ווייַזן פּאָפּאָווערס אויף פאַרבאָרגן עלעמענטן

אָנרופן $(...).popover('show')ווען דער ציל עלעמענט איז display: none;וועט פאַרשאַפן די פּאָפּאָווער צו זיין פאַלש פּאַזישאַנד.

פּאָפּאָווערס אויף פאַרקריפּלט עלעמענטן דאַרפן ראַפּער עלעמענטן

צו לייגן אַ פּאָפּאָווער צו אַ disabledאָדער .disabledעלעמענט, שטעלן דעם עלעמענט ין אַ <div>און צולייגן די פּאָפּאָווער צו אַז <div>אַנשטאָט.

קייפל-שורה לינקס

מאל איר ווילן צו לייגן אַ פּאָפּאָווער צו אַ כייפּערלינגק וואָס ראַפּס קייפל שורות. די פעליקייַט נאַטור פון די פּאָפּאָווער פּלוגין איז צו צענטער עס כאָריזאַנטאַלי און ווערטיקלי. לייג white-space: nowrap;צו דיין אַנגקערז צו ויסמיידן דעם.

ביישפילן

סטאַטיק פּאָווער

פיר אָפּציעס זענען בנימצא: שפּיץ, רעכט, דנאָ און לינקס אַליינד.

פּאָווער שפּיץ

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

פּאָפּאָווער רעכט

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

פּאָווער דנאָ

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

פּאָפּאָווער לינקס

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם 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>

באַניץ

געבן פּאָפּאָווערס דורך דזשאַוואַסקריפּט:

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-animation="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
אַנאַמיישאַן בוליאַן אמת צולייגן אַ CSS וועלקן יבערגאַנג צו די פּאָפּאָווער
קאנטעינער שטריקל | פאַלש פאַלש

אַפּענדז די פּאָפּאָווער צו אַ ספּעציפיש עלעמענט. בייַשפּיל: container: 'body'. דער אָפּציע איז דער הויפּט נוציק ווייַל עס אַלאַוז איר צו שטעלן די פּאָפּאָווער אין די לויפן פון דעם דאָקומענט לעבן די טריגערינג עלעמענט - וואָס וועט פאַרמייַדן די פּאָפּאָווער פון פלאָוטינג אַוועק פון די טריגערינג עלעמענט בעשאַס אַ פֿענצטער גרייס.

אינהאַלט שטריקל | פֿונקציע ''

פעליקייַט אינהאַלט ווערט אויב data-contentאַטריביוט איז נישט פאָרשטעלן.

אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין thisרעפֿערענץ שטעלן צו די עלעמענט וואָס די פּאָפּאָווער איז אַטאַטשט צו.

פאַרהאַלטן נומער | כייפעץ 0

פאַרהאַלטן ווייזן און כיידינג די פּאָפּאָווער (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ

אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן

כייפעץ סטרוקטור איז:delay: { "show": 500, "hide": 100 }

HTML בוליאַן פאַלש אַרייַנלייגן HTML אין די פּאָפּאָווער. אויב פאַלש, די 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קענען ניט זיין קאַמביינד מיט קיין אנדערע צינגל.
viewport שטריקל | כייפעץ | פֿונקציע {סעלעקטאָר: 'גוף', וואַטן: 0}

האלט די פּאָפּאָווער ין די גווול פון דעם עלעמענט. בייַשפּיל: viewport: '#viewport'אָדער{ "selector": "#viewport", "padding": 0 }

אויב אַ פֿונקציע איז געגעבן, עס איז גערופן מיט די טריגערינג עלעמענט DOM נאָדע ווי זיין בלויז אַרגומענט. דער 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בייַשפּיל אופֿן איז גערופן.
געוויזן.בס.פּאָפּאָווער דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
hide.bs.popover דעם געשעעניש איז פייערד מיד ווען די hideבייַשפּיל אופֿן איז גערופן.
hidden.bs.popover דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
ינסערטאַד.בס.פּאָפּאָווער דער געשעעניש איז פייערד נאָך די 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>

צו האָבן דיין אַלערץ ניצן אַנאַמיישאַן ווען קלאָוזינג, מאַכן זיכער אַז זיי האָבן די .fadeאון .inקלאסן שוין געווענדט צו זיי.

מעטהאָדס

$().alert()

מאכט אַ פלינק צו הערן פֿאַר קליק געשעענישן אויף אָפּשטאַמלינג עלעמענטן וואָס האָבן די data-dismiss="alert"אַטריביוט. (ניט נייטיק ווען ניצן די דאַטן-אַפּי ס אַוטאָ-ינטאַליאַזיישאַן.)

$().alert('close')

קלאָוזיז אַ פלינק דורך רימוווינג עס פון די DOM. אויב די .fadeאון .inקלאסן זענען פאָרשטעלן אויף דעם עלעמענט, די פלינק וועט וועלקן אויס איידער עס איז אַוועקגענומען.

געשעענישן

Bootstrap ס פלינק פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין פלינק פאַנגקשאַנאַליטי.

געשעעניש טיפּ באַשרייַבונג
נאָענט.בס.אַלערט דער געשעעניש פירט גלייך ווען דער closeבייַשפּיל אופֿן איז גערופן.
פֿאַרמאַכט.בס.אַלערט דער געשעעניש איז פייערד ווען די פלינק איז פארמאכט (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

קנעפּלעך קנעפּל.דזשס

טאָן מער מיט קנעפּלעך. קאָנטראָל קנעפּלעך אָדער שאַפֿן גרופּעס פון קנעפּלעך פֿאַר מער קאַמפּאָונאַנץ ווי טאָאָלבאַרס.

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

פירעפאָקס בלייַבט פאָרעם קאָנטראָל שטאַטן (פאַרקריפּלט און אָפּגעשטעלט) איבער בלאַט לאָודז . א וואָרקאַראָונד פֿאַר דעם איז צו נוצן autocomplete="off". זען מאָזיללאַ זשוק #654072 .

שטאַטפול

לייג data-loading-text="Loading..."צו נוצן אַ לאָודינג שטאַט אויף אַ קנעפּל.

דער שטריך איז דיפּרישיייטיד זינט וו3.3.5 און איז אַוועקגענומען אין וו4.

ניצן וועלכער שטאַט איר ווי!

פֿאַר דעם דעמאַנסטריישאַן, מיר נוצן 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

פלעקסאַבאַל פּלוגין וואָס ניצט אַ האַנדפול פון קלאסן פֿאַר גרינג טאַגאַל נאַטור.

פּלוגין אָפענגיקייַט

ייַנבראָך ריקווייערז די טראַנזישאַנז פּלוגין צו זיין אַרייַנגערעכנט אין דיין ווערסיע פון ​​באָאָטסטראַפּ.

בייַשפּיל

דריקט אויף די קנעפּלעך אונטן צו ווייַזן און באַהאַלטן אן אנדער עלעמענט דורך קלאַס ענדערונגען:

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

אַקאָרדיאַן בייַשפּיל

פאַרברייטערן די פעליקייַט ייַנבראָך נאַטור צו שאַפֿן אַ אַקאָרדיאַן מיט די טאַפליע קאָמפּאָנענט.

אַנימע פּאַריאַטור קלישע רעפּרעהענדערי, ענים עוסמאָד הויך לעבן אַקסאַמוס טערי ריטשאַרדסאָן אַד טינטפיש. 3 וואָלף לבנה אָטע, ניט קופּידאַטאַט סקייטבאָרד דאָלאָר בראַנטש. פוד טראָק קווינאָאַ פּריפּערינג אַרבעט עייוסמאָד. בראַנטש 3 וואָלף לעוואָנע טעמפּער, סונט אַליקוואַ שטעלן אַ פויגל אויף עס טינטפיש איין-אָריגינעל קאַווע נוללאַ אַססומענדאַ שאָרעדיטש עט. ניהיל אנים קעפיה העלוועטיקא, מלאכה ביר לאבארע וועס אנדערסאָן קרעד נעססיונט סאַפּיענטע עאַ פּראָידענט. אַד וועגאַן עקסעפּטער קאַצעוו וויצע לאָמאָ. לעגגינגס אָקאַעקאַט מעלאָכע ביר פאַרם-צו-טיש, רוי דענים עסטעטיש סינטה נעססיונט איר מיסטאָמע האָבן ניט געהערט פון זיי אַקיסאַמוס אַרבעט סאַסטיינאַבאַל VHS.
אַנימע פּאַריאַטור קלישע רעפּרעהענדערי, ענים עוסמאָד הויך לעבן אַקסאַמוס טערי ריטשאַרדסאָן אַד טינטפיש. 3 וואָלף לבנה אָטע, ניט קופּידאַטאַט סקייטבאָרד דאָלאָר בראַנטש. פוד טראָק קווינאָאַ פּריפּערינג אַרבעט עייוסמאָד. בראַנטש 3 וואָלף לעוואָנע טעמפּער, סונט אַליקוואַ שטעלן אַ פויגל אויף עס טינטפיש איין-אָריגינעל קאַווע נוללאַ אַססומענדאַ שאָרעדיטש עט. ניהיל אנים קעפיה העלוועטיקא, מלאכה ביר לאבארע וועס אנדערסאָן קרעד נעססיונט סאַפּיענטע עאַ פּראָידענט. אַד וועגאַן עקסעפּטער קאַצעוו וויצע לאָמאָ. לעגגינגס אָקאַעקאַט מעלאָכע ביר פאַרם-צו-טיש, רוי דענים עסטעטיש סינטה נעססיונט איר מיסטאָמע האָבן ניט געהערט פון זיי אַקיסאַמוס אַרבעט סאַסטיינאַבאַל VHS.
אַנימע פּאַריאַטור קלישע רעפּרעהענדערי, ענים עוסמאָד הויך לעבן אַקסאַמוס טערי ריטשאַרדסאָן אַד טינטפיש. 3 וואָלף לבנה אָטע, ניט קופּידאַטאַט סקייטבאָרד דאָלאָר בראַנטש. פוד טראָק קווינאָאַ פּריפּערינג אַרבעט עייוסמאָד. בראַנטש 3 וואָלף לעוואָנע טעמפּער, סונט אַליקוואַ שטעלן אַ פויגל אויף עס טינטפיש איין-אָריגינעל קאַווע נוללאַ אַססומענדאַ שאָרעדיטש עט. ניהיל אנים קעפיה העלוועטיקא, מלאכה ביר לאבארע וועס אנדערסאָן קרעד נעססיונט סאַפּיענטע עאַ פּראָידענט. אַד וועגאַן עקסעפּטער קאַצעוו וויצע לאָמאָ. לעגגינגס אָקאַעקאַט מעלאָכע ביר פאַרם-צו-טיש, רוי דענים עסטעטיש סינטה נעססיונט איר מיסטאָמע האָבן ניט געהערט פון זיי אַקיסאַמוס אַרבעט סאַסטיינאַבאַל 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.

  • באָאָטפּלי
  • איין זאַך צו טאָן
  • צווייטע עראָס

מאַכן יקספּאַנד / ייַנבראָך קאָנטראָלס צוטריטלעך

זייט זיכער צו לייגן 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"און אַ data-targetצו דעם עלעמענט צו אויטאָמאַטיש באַשטימען קאָנטראָל פון אַ קאַלאַפּסאַבאַל עלעמענט. דער data-targetאַטריביוט אַקסעפּץ אַ CSS סעלעקטאָר צו צולייגן די ייַנבראָך. זייט זיכער צו לייגן די קלאַס collapseצו די קאַלאַפּסאַבאַל עלעמענט. אויב איר ווילט אַז עס זאָל זיין פעליקייַט עפענען, לייגן די נאָך קלאַס in.

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

דורך דזשאַוואַסקריפּט

געבן מאַניואַלי מיט:

$('.collapse').collapse()

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו 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בייַשפּיל אופֿן איז גערופן.
געוויזן.בס.ייַנבראָך דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
hide.bs.collapse דעם געשעעניש איז פייערד מיד ווען דער hideאופֿן איז גערופן.
פאַרבאָרגן.בס.ייַנבראָך דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

קעראַסעל 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"אַטריביוט איז געניצט צו צייכן אַ קעראַסעל ווי אַנאַמייטינג סטאַרטינג בייַ בלאַט מאַסע. עס קענען ניט זיין געוויינט אין קאָמבינאַציע מיט (יבעריק און ומנייטיק) יקספּליסאַט דזשאַוואַסקריפּט יניטיאַליזאַטיאָן פון דער זעלביקער קעראַסעל.

דורך דזשאַוואַסקריפּט

רופן קעראַסעל מאַניואַלי מיט:

$('.carousel').carousel()

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-interval="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
מעהאַלעך נומער 5000 די סומע פון ​​צייט צו פאַרהאַלטן צווישן אויטאָמאַטיש סייקלינג אַ נומער. אויב פאַלש, קעראַסעל וועט נישט אויטאָמאַטיש ציקל.
פּויזע שטריקל | null "שוועבן" אויב שטעלן צו "hover", פּאָזאַז די סייקלינג פון די קעראַסעל אויף mouseenterאון ריסומז די סייקלינג פון די קעראַסעל אויף mouseleave. אויב שטעלן צו null, כאַווערינג איבער די קעראַסעל וועט נישט פּויזע עס.
ייַנוויקלען בוליאַן אמת צי די קעראַסעל זאָל קאַנטיניואַסלי ציקל אָדער האָבן שווער סטאַפּס.
קיבארד בוליאַן אמת צי די קעראַסעל זאָל רעאַגירן צו קלאַוויאַטור געשעענישן.

יניטיאַליזעס די קעראַסעל מיט אַפּשאַנאַל אָפּציעס objectאון סטאַרץ סייקלינג דורך זאכן.

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

סיקאַלז דורך די קעראַסעל זאכן פון לינקס צו רעכט.

סטאַפּס די קעראַסעל פון סייקלינג דורך זאכן.

סיקלעס די קעראַסעל צו אַ באַזונדער ראַם (0 באזירט, ענלעך צו אַ מענגע).

סיקלעס צו די פריערדיקע נומער.

סיקלעס צו דער ווייַטער נומער.

Bootstrap ס קעראַסעל קלאַס יקספּאָוזיז צוויי געשעענישן פֿאַר כוקינג אין קעראַסעל פאַנגקשאַנאַליטי.

ביידע געשעענישן האָבן די פאלגענדע נאָך פּראָפּערטיעס:

  • direction: די ריכטונג אין וואָס די קעראַסעל איז סליידינג (אָדער "left"אָדער "right").
  • relatedTarget: דער DOM עלעמענט וואָס איז סליד אין פּלאַץ ווי די אַקטיוו נומער.

אַלע קעראַסעל געשעענישן זענען פייערד בייַ די קעראַסעל זיך (ד"ה בייַ די <div class="carousel">).

געשעעניש טיפּ באַשרייַבונג
slide.bs.carousel דער געשעעניש פירט גלייך ווען דער slideבייַשפּיל אופֿן איז ינוואָוקט.
סליד.בס.קעראַסעל דעם געשעעניש איז פייערד ווען די קעראַסעל האט געענדיקט זיין רוק יבערגאַנג.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

צוגעבן affix.js

בייַשפּיל

די אַפיקס פּלוגין טאַגאַלז position: fixed;אויף און אַוועק, עמיאַלייטינג די ווירקונג געפֿונען מיט position: sticky;. די סובנאַוויגיישאַן אויף די רעכט איז אַ לעבן דעמאָ פון די אַפיקס פּלוגין.


באַניץ

ניצן די אַפיקס פּלוגין דורך דאַטן אַטריביוץ אָדער מאַניואַלי מיט דיין אייגענע דזשאַוואַסקריפּט. אין ביידע סיטואַטיאָנס, איר מוזן צושטעלן CSS פֿאַר די פּאַזישאַנינג און ברייט פון דיין אַפיקסט אינהאַלט.

באַמערקונג: דו זאלסט נישט נוצן די אַפיקס פּלוגין אויף אַן עלעמענט קאַנטיינד אין אַ לעפיערעך פּאַזישאַנד עלעמענט, אַזאַ ווי אַ פּולד אָדער פּושט זייַל, רעכט צו אַ סאַפאַרי רענדערינג זשוק .

פּאַזישאַנינג דורך CSS

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

דאָ ס ווי די אַפיקס פּלוגין אַרבעט:

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

גיי די אויבן סטעפּס צו שטעלן דיין CSS פֿאַר איינער פון די באַניץ אָפּציעס אונטן.

דורך דאַטן אַטריביוץ

צו לייכט לייגן אַפיקס נאַטור צו קיין עלעמענט, נאָר לייגן data-spy="affix"צו די עלעמענט איר ווילן צו שפּיאָן אויף. ניצן אָפסעץ צו דעפינירן ווען צו טאַגאַל די פּינינג פון אַן עלעמענט.

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

דורך דזשאַוואַסקריפּט

רופן די אַפיקס פּלוגין דורך דזשאַוואַסקריפּט:

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו 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')

געשעענישן

באָאָטסטראַפּ ס אַפיקס פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין אַפיקס פאַנגקשאַנאַליטי.

געשעעניש טיפּ באַשרייַבונג
affix.bs.affix דעם געשעעניש פירז מיד איידער די עלעמענט איז אַפיקסט.
אַפיקסט.בס.אַפפיקס דעם געשעעניש איז פייערד נאָך די עלעמענט איז אַפיקסט.
affix-top.bs.affix דעם געשעעניש פירז מיד איידער די עלעמענט איז געווען אַפיקסט-שפּיץ.
אַפיקסט-שפּיץ.בס.אַפפיקס דעם געשעעניש איז פייערד נאָך די עלעמענט איז געווען אַפיקסט-שפּיץ.
affix-bottom.bs.affix דעם געשעעניש פירז מיד איידער די עלעמענט איז געווען אַפיקסט-דנאָ.
אַפיקסעד-bottom.bs.affix דעם געשעעניש איז פייערד נאָך די עלעמענט איז געווען אַפיקסט-דנאָ.