איבערבליק

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

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

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

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

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

סאַניטיזער

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

די פעליקייַט whiteListווערט איז די פאלגענדע:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

אויב איר ווילן צו לייגן נייַ וואַלועס צו דעם פעליקייַט, whiteListאיר קענען טאָן די פאלגענדע:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

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

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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

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

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

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

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

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

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

וואָס ס ין

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

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

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

$.support.transition = false

מאָדעס modal.js

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

רעכט צו ווי 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>

אָפּטיאָנאַל סיזעס

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

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

מעטהאָדס

.modal(options)

אַקטאַווייץ דיין אינהאַלט ווי אַ מאָדאַל. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object.

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

.modal('toggle')

מאַניואַלי טאַגאַלז אַ מאָדאַל. קערט צו די קאַללער איידער די מאָדאַל איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.modalאָדער hidden.bs.modalגעשעעניש אַקערז).

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

.modal('show')

מאַניואַלי אָפּענס אַ מאָדאַל. קערט צו די קאַללער איידער די מאָדאַל איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.modalגעשעעניש אַקערז).

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

.modal('hide')

מאַניואַלי כיידז אַ מאָדאַל. קערט צו די קאַללער איידער די מאָדאַל איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.modalגעשעעניש אַקערז).

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

.modal('handleUpdate')

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

נאָר דארף ווען די הייך פון די מאָדאַל ענדערונגען בשעת עס איז אָפן.

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

געשעענישן

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

אַלע מאָדאַל געשעענישן זענען פייערד אין די מאָדאַל זיך (ד"ה אין די <div class="modal">).

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

אָפּציעס

קיינער

מעטהאָדס

$().dropdown('toggle')

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

געשעענישן

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

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

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

באַניץ

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

ניט קיין ענין די ימפּלאַמענטיישאַן אופֿן, סקראָלספּי ריקווייערז די נוצן פון 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="".

געשעענישן

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

באַניץ

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

$('#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געשעענישן וועט נישט זיין פייערד.

$('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 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש.

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

ביישפילן

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

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

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

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

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

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

אָפּציעס

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

מעטהאָדס

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

געשעענישן

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

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

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

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

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

ביישפילן

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

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

לעבן דעמאָ

<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 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="".

מעטהאָדס

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

געשעענישן

$('#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 ס פלינק פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין פלינק פאַנגקשאַנאַליטי.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

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

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

סטעיטפול

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

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

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

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

איין קנעפּל

לייג data-toggle="button"צו אַקטאַווייט טאַגאַלינג אויף אַ איין קנעפּל.

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

טשעקקבאָקס / ראַדיאָ

לייג data-toggle="buttons"צו אַ .btn-groupמיט טשעקקבאָקס אָדער ראַדיאָ ינפּוץ צו געבן טאַגאַלינג אין זייער ריספּעקטיוו סטיילז.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

מעטהאָדס

$().button('toggle')

טאַגאַלז שטופּן שטאַט. גיט דעם קנעפּל די אויסזען אַז עס איז אַקטיווייטיד.

$().button('reset')

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

$().button(string)

סוואַפּס טעקסט צו קיין דאַטן דיפיינד טעקסט שטאַט.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</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"איז פארלאנגט.

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

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

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

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

באַניץ

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

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

מעטהאָדס

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

$('#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 אין עס און עס וועט זיין אויטאָמאַטיש אַליינד און פאָרמאַטטעד.

ערשטער רוק פירמע

Nulla vitae elit libero, a pharetra augue mollis interdum.

צווייטע רוק פירמע

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

דריט רוק פירמע

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

פֿריִערדיקע ווייַטער

<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="".

מעטהאָדס

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

געשעענישן

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

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

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

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

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

מעטהאָדס

.affix(options)

אַקטאַווייץ דיין אינהאַלט ווי אַפיקסט אינהאַלט. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object.

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

.affix('checkPosition')

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

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

געשעענישן

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