Prezentare generală

Individual sau compilat

Pluginurile pot fi incluse individual (folosind *.jsfișierele individuale ale Bootstrap) sau toate odată (folosind bootstrap.jssau miniat bootstrap.min.js).

Folosind JavaScript compilat

Ambele bootstrap.jsși bootstrap.min.jsconțin toate pluginurile într-un singur fișier. Includeți doar unul.

Dependențe de plugin

Unele plugin-uri și componente CSS depind de alte plugin-uri. Dacă includeți pluginuri individual, asigurați-vă că verificați aceste dependențe în documente. De asemenea, rețineți că toate pluginurile depind de jQuery (aceasta înseamnă că jQuery trebuie inclus înainte de fișierele plugin). Consultați-nebower.json pentru a vedea ce versiuni de jQuery sunt acceptate.

Atributele datelor

Puteți utiliza toate pluginurile Bootstrap doar prin intermediul API-ului de marcare, fără a scrie o singură linie de JavaScript. Acesta este API-ul de primă clasă al lui Bootstrap și ar trebui să fie prima dvs. considerație atunci când utilizați un plugin.

Acestea fiind spuse, în unele situații poate fi de dorit să dezactivați această funcționalitate. Prin urmare, oferim, de asemenea, posibilitatea de a dezactiva API-ul atributului de date prin dezlegarea tuturor evenimentelor din documentul spațial de nume cu data-api. Acesta arată astfel:

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

Alternativ, pentru a viza un anumit plugin, includeți doar numele pluginului ca spațiu de nume împreună cu spațiul de nume data-api, astfel:

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

Un singur plugin per element prin atribute de date

Nu utilizați atribute de date de la mai multe plugin-uri pe același element. De exemplu, un buton nu poate avea atât un balon explicativ, cât și un modal. Pentru a realiza acest lucru, utilizați un element de înfășurare.

API-ul programatic

De asemenea, credem că ar trebui să puteți utiliza toate pluginurile Bootstrap doar prin API-ul JavaScript. Toate API-urile publice sunt metode unice, care pot fi înlănțuite și returnează colecția asupra căreia se acționează.

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

Toate metodele ar trebui să accepte un obiect opțional opțional, un șir care vizează o anumită metodă sau nimic (care inițiază un plugin cu comportament implicit):

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

Fiecare plugin își expune, de asemenea, constructorul brut pe o Constructorproprietate: $.fn.popover.Constructor. Dacă doriți să obțineți o anumită instanță de plugin, preluați-o direct dintr-un element: $('[rel="popover"]').data('popover').

Setări implicite

Puteți modifica setările implicite pentru un plugin modificând obiectul pluginului Constructor.DEFAULTS:

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

Fără conflict

Uneori este necesar să utilizați pluginuri Bootstrap cu alte cadre UI. În aceste circumstanțe, pot apărea ocazional coliziuni ale spațiului de nume. Dacă se întâmplă acest lucru, puteți apela .noConflictla pluginul căruia doriți să reveniți la valoarea.

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

Evenimente

Bootstrap oferă evenimente personalizate pentru acțiunile unice ale majorității pluginurilor. În general, acestea vin sub formă de infinitiv și participiu trecut - unde infinitivul (ex. show) este declanșat la începutul unui eveniment, iar forma sa de participiu trecut (ex. shown) este declanșat la finalizarea unei acțiuni.

Începând cu 3.0.0, toate evenimentele Bootstrap sunt spațiate de nume.

Toate evenimentele infinitive oferă preventDefaultfuncționalitate. Aceasta oferă posibilitatea de a opri execuția unei acțiuni înainte de a începe.

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

Numerele versiunii

Versiunea fiecărui plugin jQuery de la Bootstrap poate fi accesată prin VERSIONproprietatea constructorului pluginului. De exemplu, pentru pluginul tooltip:

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

Nu există soluții speciale când JavaScript este dezactivat

Pluginurile Bootstrap nu revin în mod deosebit de grațios atunci când JavaScript este dezactivat. Dacă vă pasă de experiența utilizatorului în acest caz, folosiți <noscript>pentru a explica situația (și cum să reactivați JavaScript) utilizatorilor dvs. și/sau adăugați propriile alternative personalizate.

Biblioteci de la terți

Bootstrap nu acceptă oficial biblioteci JavaScript terță parte, cum ar fi Prototype sau jQuery UI. În ciuda .noConflictevenimentelor cu spații de nume, pot exista probleme de compatibilitate pe care trebuie să le rezolvați singur.

Tranziții transition.js

Despre tranziții

Pentru efecte simple de tranziție, includeți transition.jso dată alături de celelalte fișiere JS. Dacă utilizați fișierul compilat (sau minimizat) bootstrap.js, nu este nevoie să îl includeți - este deja acolo.

Ce e inauntru

Transition.js este un ajutor de bază pentru transitionEndevenimente, precum și un emulator de tranziție CSS. Este folosit de celelalte plugin-uri pentru a verifica suportul pentru tranziția CSS și pentru a prinde tranzițiile suspendate.

Dezactivarea tranzițiilor

Tranzițiile pot fi dezactivate la nivel global utilizând următorul fragment JavaScript, care trebuie să vină după ce transition.js(sau bootstrap.jssau bootstrap.min.js, după caz), s-a încărcat:

$.support.transition = false

Modale modal.js

Modalurile sunt raționalizate, dar flexibile, solicitări de dialog cu funcționalitatea minimă necesară și valori implicite inteligente.

Mai multe moduri deschise nu sunt acceptate

Asigurați-vă că nu deschideți un modal în timp ce altul este încă vizibil. Afișarea mai multor modal la un moment dat necesită cod personalizat.

Plasarea modal de marcare

Încercați întotdeauna să plasați codul HTML al unui modal într-o poziție de nivel superior în documentul dvs. pentru a evita ca alte componente să afecteze aspectul și/sau funcționalitatea modalului.

Avertismente pentru dispozitivele mobile

Există câteva avertismente cu privire la utilizarea modalelor pe dispozitivele mobile. Consultați documentele noastre de asistență pentru browser pentru detalii.

Datorită modului în care HTML5 își definește semantica, autofocusatributul HTML nu are niciun efect în modalele Bootstrap. Pentru a obține același efect, utilizați JavaScript personalizat:

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

Exemple

Exemplu static

Un mod redat cu antet, corp și un set de acțiuni în subsol.

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

Demo live

Comutați un modal prin JavaScript făcând clic pe butonul de mai jos. Acesta va aluneca în jos și va dispărea din partea de sus a paginii.

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

Faceți modale accesibile

Asigurați-vă că adăugați role="dialog"și aria-labelledby="...", făcând referire la titlul modal, la .modal, și role="document"la .modal-dialogînsuși.

În plus, puteți oferi o descriere a dialogului dvs. modal cu aria-describedbyon .modal.

Încorporarea videoclipurilor YouTube

Încorporarea videoclipurilor YouTube în modal necesită JavaScript suplimentar care nu este în Bootstrap pentru a opri automat redarea și multe altele. Consultați această postare utilă Stack Overflow pentru mai multe informații.

Dimensiuni optionale

Modalurile au două dimensiuni opționale, disponibile prin clase de modificatori pentru a fi plasate pe un .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>

Eliminați animația

Pentru modalele care apar pur și simplu în loc să se estompeze pentru a le vizualiza, eliminați .fadeclasa din marcajul modal.

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

Utilizarea sistemului grilă

Pentru a profita de sistemul de grilă Bootstrap într-un modal, pur și simplu imbricați .rows în cadrul .modal-bodyși apoi utilizați clasele normale ale sistemului de grilă.

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

Aveți o grămadă de butoane care declanșează același mod, doar cu conținut ușor diferit? Utilizați event.relatedTargetși atributele HTMLdata-* (eventual prin jQuery ) pentru a varia conținutul modalului în funcție de ce buton a fost făcut clic. Consultați documentele despre evenimente modale pentru detalii despre relatedTarget,

...mai multe butoane...
<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)
})

Utilizare

Pluginul modal schimbă conținutul ascuns la cerere, prin atribute de date sau JavaScript. De asemenea, se adaugă .modal-openla <body>comportamentul de defilare implicit pentru a suprascrie și generează o .modal-backdropzonă pentru a oferi o zonă de clic pentru respingerea modalelor afișate atunci când faceți clic în afara modalului.

Prin atribute de date

Activați un mod fără a scrie JavaScript. Setați data-toggle="modal"pe un element de controler, cum ar fi un buton, împreună cu data-target="#foo"sau href="#foo"pentru a viza un anumit mod de comutare.

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

Prin JavaScript

Apelați un modal cu id myModalcu o singură linie de JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-backdrop="".

Nume tip Mod implicit Descriere
fundal boolean sau șirul'static' Adevărat Include un element modal de fundal. Alternativ, specificați staticpentru un fundal care nu închide modal la clic.
tastatură boolean Adevărat Închide modulul când este apăsată tasta Escape
spectacol boolean Adevărat Afișează modal atunci când este inițializat.
la distanta cale fals

Această opțiune este depreciată de la v3.3.0 și a fost eliminată în v4. Vă recomandăm, în schimb, să utilizați un șablon la nivel de client sau un cadru de legare a datelor sau să apelați singur jQuery.load .

Dacă este furnizată o adresă URL la distanță, conținutul va fi încărcat o singură dată prin metoda jQuery loadși injectat în .modal-contentdiv. Dacă utilizați data-api, puteți utiliza alternativ hrefatributul pentru a specifica sursa de la distanță. Un exemplu în acest sens este prezentat mai jos:

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

Metode

Activează conținutul dvs. ca modal. Acceptă opțiuni opționale object.

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

Comută manual un mod. Se întoarce la apelant înainte ca modalul să fie afișat sau ascuns (adică înainte ca evenimentul shown.bs.modalsau să hidden.bs.modalapară).

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

Deschide manual un modal. Se întoarce la apelant înainte ca modalul să fie afișat efectiv (adică înainte de apariția shown.bs.modalevenimentului).

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

Ascunde manual un modal. Se întoarce la apelant înainte ca modalul să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.modalevenimentului).

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

Reajustează poziționarea modalului pentru a contracara o bară de defilare în cazul în care ar trebui să apară una, ceea ce ar face modalul să sară la stânga.

Este necesar doar atunci când înălțimea modalului se modifică în timp ce este deschis.

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

Evenimente

Clasa modală a Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea modală.

Toate evenimentele modale sunt declanșate la modal în sine (adică la <div class="modal">).

Tip de eveniment Descriere
show.bs.modal Acest eveniment se declanșează imediat când showeste apelată metoda instanței. Dacă este cauzat de un clic, elementul pe care s-a făcut clic este disponibil ca relatedTargetproprietate a evenimentului.
arătat.bs.modal Acest eveniment este declanșat atunci când modalul a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS). Dacă este cauzat de un clic, elementul pe care s-a făcut clic este disponibil ca relatedTargetproprietate a evenimentului.
ascunde.bs.modal Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
ascuns.bs.modal Acest eveniment este declanșat când modalul a terminat de ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
încărcat.bs.modal Acest eveniment este declanșat atunci când modalul a încărcat conținut folosind remoteopțiunea.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Mențiuni derulante dropdown.js

Adăugați meniuri drop-down la aproape orice cu acest plugin simplu, inclusiv bara de navigare, file și pastile.

Într-o bară de navigare

În cadrul pastilelor

Prin atribute de date sau JavaScript, pluginul drop-down comută conținut ascuns (meniuri drop-down) prin comutarea .openclasei pe elementul din lista părinte.

Pe dispozitivele mobile, deschiderea unui meniu derulant adaugă o .dropdown-backdropzonă de atingere pentru închiderea meniurilor derulante atunci când atingeți în afara meniului, o cerință pentru suport adecvat iOS. Aceasta înseamnă că trecerea de la un meniu derulant deschis la un meniu derulant diferit necesită o atingere suplimentară pe mobil.

Notă: data-toggle="dropdown"se bazează pe atributul pentru închiderea meniurilor drop-down la nivel de aplicație, așa că este o idee bună să-l folosiți întotdeauna.

Prin atribute de date

Adăugați data-toggle="dropdown"la un link sau la un buton pentru a comuta un meniu drop-down.

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

Pentru a păstra adresele URL intacte cu butoanele de link, utilizați data-targetatributul în loc de 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>

Prin JavaScript

Apelați meniurile derulante prin JavaScript:

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

data-toggle="dropdown"încă necesar

Indiferent dacă apelați meniul drop-down prin JavaScript sau utilizați în schimb data-api, data-toggle="dropdown"este întotdeauna necesar să fie prezent pe elementul de declanșare al meniului drop-down.

Nici unul

Comută meniul derulant al unei anumite bare de navigare sau al navigării cu file.

Toate evenimentele drop-down sunt declanșate la .dropdown-menuelementul părinte al lui.

Toate evenimentele dropdown au o relatedTargetproprietate, a cărei valoare este elementul de ancorare de comutare.

Tip de eveniment Descriere
show.bs.menu derulant Acest eveniment se declanșează imediat când este apelată metoda show instance.
afișat.bs.menu derulant Acest eveniment este declanșat atunci când meniul derulant a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde.bs.dropdown Acest eveniment este declanșat imediat când a fost apelată metoda de ascundere a instanței.
hidden.bs.dropdown Acest eveniment este declanșat când meniul derulant s-a terminat de ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Exemplu în bara de navigare

Pluginul ScrollSpy este pentru actualizarea automată a țintelor de navigare pe baza poziției derulării. Derulați zona de sub bara de navigare și urmăriți schimbarea clasei active. Subelementele derulante vor fi de asemenea evidențiate.

@gras

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi înainte de a se epuiza. Drepturi la bicicletă Tumblr de la fermă la masă. Anim keffiyeh carles cardigan. cabina foto Velit seitan mcsweeney 3 lupul luna irure. Cosby pulover lomo jean pantaloni scurți, hanoracul williamsburg minim qui probabil nu ai auzit de ele et cardigan trust fund culpa biodiesel wes anderson estetica. Nihil tatuat accusamus, cred ironia biodiesel keffiyeh artizan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camion de mâncare cu pulover cosby tatuat, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non exercițiu estetic quis gentrify. Brooklyn adipisicing bere artizanală vice keytar deserunt.

unu

Occaecat commodo aliqua delectus. Fap craft bere deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS este adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

Două

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

three

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

Keytar twee blog, culpa messenger bag marfa orice delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica clișeu ironie, thundercats probabil nu ați auzit de ele consequat hanorac fără gluten lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt cares cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan bere craft seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Utilizare

Necesită Bootstrap nav

Scrollspy necesită în prezent utilizarea unei componente de navigare Bootstrap pentru evidențierea corectă a legăturilor active.

Sunt necesare ținte ID rezolvabile

Legăturile din bara de navigare trebuie să aibă ținte de ID rezolvabile. De exemplu, un <a href="#home">home</a>must corespunde cu ceva din DOM precum <div id="home"></div>.

Elemente non :visible-țintă ignorate

Elementele țintă care nu sunt :visibleconform jQuery vor fi ignorate și elementele lor de navigare corespunzătoare nu vor fi niciodată evidențiate.

Necesită poziționare relativă

Indiferent de metoda de implementare, scrollspy necesită utilizarea position: relative;elementului pe care îl spionați. În cele mai multe cazuri, acesta este <body>. Când scrollspying pe alte elemente decât <body>, asigurați-vă că aveți un heightset și overflow-y: scroll;aplicat.

Prin atribute de date

Pentru a adăuga cu ușurință comportamentul scrollspy la navigarea din bara de sus, adăugați data-spy="scroll"la elementul pe care doriți să îl spionați (de obicei, acesta ar fi <body>). Apoi adăugați data-targetatributul cu ID-ul sau clasa elementului părinte al oricărei .navcomponente Bootstrap.

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

Prin JavaScript

După ce ați adăugat position: relative;CSS, apelați scrollspy prin JavaScript:

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

Metode

.scrollspy('refresh')

Când utilizați scrollspy împreună cu adăugarea sau eliminarea elementelor din DOM, va trebui să apelați metoda de reîmprospătare astfel:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-offset="".

Nume tip Mod implicit Descriere
decalaj număr 10 Pixeli de decalat de sus atunci când se calculează poziția derulării.

Evenimente

Tip de eveniment Descriere
activare.bs.scrollspy Acest eveniment se declanșează ori de câte ori un element nou este activat de scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

File care pot fi comutate tab.js

Exemple de file

Adăugați o funcție rapidă și dinamică a filei pentru a trece prin panourile de conținut local, chiar și prin meniurile drop-down. Filele imbricate nu sunt acceptate.

Denim brut probabil că nu ați auzit de ei pantaloni scurți de blugi Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Pulover Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

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

Extinde navigarea cu file

Acest plugin extinde componenta de navigare cu file pentru a adăuga zone cu file.

Utilizare

Activați filele tabulabile prin JavaScript (fiecare filă trebuie activată individual):

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

Puteți activa file individuale în mai multe moduri:

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

Markup

Puteți activa o filă sau o navigare prin pilule fără a scrie JavaScript, prin simpla specificare data-toggle="tab"sau data-toggle="pill"pe un element. Adăugarea claselor navși la filă va aplica stilul filei Bootstrap , în timp ce adăugarea claselor și va aplica stilul de pilule .nav-tabsulnavnav-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>

Efect de estompare

Pentru ca filele să dispară, adăugați .fadela fiecare .tab-pane. De asemenea, primul panou de file trebuie .insă facă vizibil conținutul inițial.

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

Metode

$().tab

Activează un element de filă și un container de conținut. Tab ar trebui să aibă fie un, fie un data-targetnod hrefde container în DOM. În exemplele de mai sus, filele sunt <a>s-urile cu data-toggle="tab"atribute.

.tab('show')

Selectează fila dată și arată conținutul asociat acesteia. Orice altă filă care a fost selectată anterior devine neselectată și conținutul asociat este ascuns. Revine la apelant înainte ca panoul de file să fie afișat efectiv (adică înainte de apariția shown.bs.tabevenimentului).

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

Evenimente

Când se afișează o filă nouă, evenimentele se declanșează în următoarea ordine:

  1. hide.bs.tab(în fila activă curentă)
  2. show.bs.tab(pe fila de afișat)
  3. hidden.bs.tab(pe fila activă anterioară, aceeași ca pentru hide.bs.tabeveniment)
  4. shown.bs.tab(în fila nou-activă tocmai afișată, aceeași ca și pentru show.bs.tabeveniment)

Dacă nicio filă nu era deja activă, atunci evenimentele hide.bs.tabși hidden.bs.tabnu vor fi declanșate.

Tip de eveniment Descriere
arată.bs.tab Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați event.targetși event.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
afișat.bs.tab Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați event.targetși event.relatedTargetpentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
ascunde.bs.tab Acest eveniment se declanșează atunci când trebuie afișată o filă nouă (și astfel fila activă anterioară trebuie să fie ascunsă). Utilizați event.targetși event.relatedTargetpentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând.
ascuns.bs.tab Acest eveniment se declanșează după ce este afișată o nouă filă (și astfel fila activă anterioară este ascunsă). Utilizați event.targetși event.relatedTargetpentru a viza fila activă anterioară și, respectiv, noua filă activă.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Sfaturi instrumente tooltip.js

Inspirat de excelentul plugin jQuery.tipsy scris de Jason Frame; Sfaturile instrumente sunt o versiune actualizată, care nu se bazează pe imagini, utilizează CSS3 pentru animații și atribute de date pentru stocarea locală a titlurilor.

Sfaturile instrumente cu titluri de lungime zero nu sunt niciodată afișate.

Exemple

Treceți cu mouse-ul peste linkurile de mai jos pentru a vedea sfaturi despre instrumente:

Pantaloni strâmți, keffiyeh , probabil că nu ați auzit de ei. Cabina foto barbă din denim brut tipografie geantă vegană stumptown. Seitanul de la fermă la masă, mcsweeney's fixie sustainable quinoa 8-bit american apparel au un terry richardson vinyl chambray. Beard Stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artizan cu adevărat ironic orice keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafea de origine unică virală.

Indicator static

Sunt disponibile patru opțiuni: aliniat sus, dreapta, jos și stânga.

Patru direcții

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

Funcționalitate de înscriere

Din motive de performanță, API-ul de date Tooltip și Popover sunt opt-in, ceea ce înseamnă că trebuie să le inițializați singur .

O modalitate de a inițializa toate sfaturile instrumente dintr-o pagină ar fi să le selectați după data-toggleatributul lor:

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

Utilizare

Pluginul de indicații cu instrumente generează conținut și markup la cerere și, în mod implicit, plasează indicatorii de informații după elementul de declanșare.

Declanșați balonul cu ajutorul JavaScript:

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

Markup

Markupul necesar pentru un balon explicativ este doar un dataatribut și titlepe elementul HTML doriți să aveți un balon explicativ. Markupul generat al unui tooltip este destul de simplu, deși necesită o poziție (în mod implicit, setată topde plugin).

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

Link-uri cu mai multe linii

Uneori doriți să adăugați un sfat explicativ la un hyperlink care include mai multe linii. Comportamentul implicit al plugin-ului tooltip este de a-l centra orizontal și vertical. Adaugă white-space: nowrap;la ancorele tale pentru a evita acest lucru.

Sfaturile cu instrumente din grupurile de butoane, grupurile de intrare și tabele necesită o setare specială

Când utilizați sfaturi cu instrumente pentru elemente dintr-un .btn-groupsau un .input-group, sau pe elemente legate de tabel ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), va trebui să specificați opțiunea container: 'body'(documentată mai jos) pentru a evita efectele secundare nedorite (cum ar fi elementul care crește și/ sau pierderea colțurilor rotunjite atunci când este declanșat tooltip).

Nu încercați să afișați sfaturi despre elementele ascunse

Invocarea $(...).tooltip('show')când este elementul țintă display: none;va duce la poziționarea incorectă a descrierii explicative.

Sfaturi instrumente accesibile pentru utilizatorii de tastatură și tehnologie de asistență

Pentru utilizatorii care navighează cu o tastatură și, în special, utilizatorii de tehnologii de asistență, ar trebui să adăugați doar sfaturi pentru elementele focalizate pe tastatură, cum ar fi linkuri, comenzi de formular sau orice element arbitrar cu un tabindex="0"atribut.

Sfaturile cu instrumente pentru elementele dezactivate necesită elemente de înveliș

Pentru a adăuga un sfat explicativ la un element disabledsau .disabled, puneți elementul în interiorul lui a <div>și aplicați-l <div>în schimb.

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Nume Tip Mod implicit Descriere
animaţie boolean Adevărat Aplicați o tranziție de estompare CSS la balonul explicativ
recipient șir | fals fals

Adaugă indicația la un anumit element. Exemplu: container: 'body'. Această opțiune este deosebit de utilă prin faptul că vă permite să poziționați balonul în fluxul documentului în apropierea elementului de declanșare - ceea ce va împiedica balonul să plutească departe de elementul de declanșare în timpul unei redimensionări a ferestrei.

întârziere număr | obiect 0

Întârziere afișarea și ascunderea descrierii explicative (ms) - nu se aplică tipului de declanșare manuală

Dacă este furnizat un număr, se aplică întârziere atât pentru ascunde/afișare

Structura obiectului este:delay: { "show": 500, "hide": 100 }

html boolean fals Introduceți codul HTML în balonul cu instrumente. Dacă este fals, textmetoda jQuery va fi folosită pentru a insera conținut în DOM. Folosiți text dacă vă îngrijorează atacurile XSS.
plasare șir | funcţie 'top'

Cum se poziționează sfatul instrument - sus | jos | stânga | dreapta | auto.
Când este specificat „auto”, acesta va reorienta în mod dinamic indicația. De exemplu, dacă plasarea este „stânga automată”, balonul se va afișa la stânga atunci când este posibil, în caz contrar se va afișa la dreapta.

Când o funcție este utilizată pentru a determina plasarea, aceasta este apelată cu nodul DOM ca prim argument și elementul de declanșare nodul DOM ca al doilea. Contextul thiseste setat la instanța descrierii.

selector şir fals Dacă este furnizat un selector, obiectele de tip tooltip vor fi delegate țintelor specificate. În practică, aceasta este folosită pentru a permite conținutului HTML dinamic să fie adăugate sfaturi cu instrumente. Vedeți acesta și un exemplu informativ .
șablon şir '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML de bază de utilizat la crearea descrierii explicative.

Indicațiile titleinstrumente vor fi injectate în .tooltip-inner.

.tooltip-arrowva deveni săgeata descrierii.

Elementul de înveliș exterior ar trebui să aibă .tooltipclasa.

titlu șir | funcţie ''

Valoarea implicită a titlului dacă titleatributul nu este prezent.

Dacă este dată o funcție, aceasta va fi apelată cu thisreferința ei setată la elementul la care este atașat tooltip.

declanșatorul şir „focalizare” Cum se declanșează balonul - faceți clic pe | hover | focus | manual. Puteți trece mai multe declanșatoare; separați-le cu un spațiu. manualnu poate fi combinat cu niciun alt declanșator.
fereastra șir | obiect | funcţie { selector: „corp”, umplutură: 0 }

Menține sfatul instrument în limitele acestui element. Exemplu: viewport: '#viewport'sau{ "selector": "#viewport", "padding": 0 }

Dacă o funcție este dată, aceasta este apelată cu elementul de declanșare nodul DOM ca singur argument. Contextul thiseste setat la instanța descrierii.

Atribute de date pentru sfaturi instrumentale individuale

Opțiunile pentru sfaturi instrumente individuale pot fi specificate alternativ prin utilizarea atributelor de date, așa cum s-a explicat mai sus.

Metode

$().tooltip(options)

Atașează un handler tooltip la o colecție de elemente.

.tooltip('show')

Dezvăluie explicația unui element. Se întoarce la apelant înainte ca indicația să fie afișată efectiv (adică înainte de apariția shown.bs.tooltipevenimentului). Aceasta este considerată o declanșare „manuală” a descrierii explicative. Sfaturile instrumente cu titluri de lungime zero nu sunt niciodată afișate.

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

.tooltip('hide')

Ascunde explicația unui element. Se întoarce la apelant înainte ca indicația să fie ascunsă (adică înainte de apariția hidden.bs.tooltipevenimentului). Aceasta este considerată o declanșare „manuală” a descrierii explicative.

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

.tooltip('toggle')

Comută în lista de informații despre un element. Revine la apelant înainte ca balonul să fie afișat sau ascuns (adică înainte ca evenimentul shown.bs.tooltipsau să hidden.bs.tooltipapară). Aceasta este considerată o declanșare „manuală” a descrierii explicative.

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

.tooltip('destroy')

Ascunde și distruge sfatul instrument al unui element. Sfaturile instrumente care folosesc delegarea (care sunt create folosind opțiunea selector) nu pot fi distruse individual pe elementele de declanșare descendente.

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

Evenimente

Tip de eveniment Descriere
arată.bs.tooltip Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
afișat.bs.tooltip Acest eveniment este declanșat când balonul explicativ a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde.bs.tooltip Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
hidden.bs.tooltip Acest eveniment este declanșat când sfarsitul explicativ a terminat de ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
inserat.bs.tooltip Acest eveniment este declanșat după show.bs.tooltipeveniment, când șablonul de indicații explicative a fost adăugat la DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Adăugați mici suprapuneri de conținut, cum ar fi cele de pe iPad, la orice element pentru a găzdui informații secundare.

Popover-urile al căror titlu și conținut sunt de lungime zero nu sunt niciodată afișate.

Dependență de plugin

Popover-urile necesită ca pluginul tooltip să fie inclus în versiunea dvs. de Bootstrap.

Funcționalitate de înscriere

Din motive de performanță, API-ul de date Tooltip și Popover sunt opt-in, ceea ce înseamnă că trebuie să le inițializați singur .

O modalitate de a inițializa toate popover-urile dintr-o pagină ar fi să le selectați după data-toggleatributul lor:

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

Popover-urile din grupurile de butoane, grupurile de intrare și tabele necesită o setare specială

Când utilizați popover-uri pe elemente dintr-un .btn-groupsau un .input-group, sau pe elemente legate de tabel ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), va trebui să specificați opțiunea container: 'body'(documentată mai jos) pentru a evita efectele secundare nedorite (cum ar fi elementul care crește și/ sau pierderea colțurilor rotunjite la declanșarea popover-ului).

Nu încercați să afișați popover-uri pe elemente ascunse

Invocarea $(...).popover('show')când este elementul țintă display: none;va duce la poziționarea incorect a popover-ului.

Popover-urile de pe elementele dezactivate necesită elemente de înveliș

Pentru a adăuga un popover la un element disabledsau .disabled, puneți elementul în interiorul lui a <div>și aplicați popover-ul acestuia <div>.

Link-uri cu mai multe linii

Uneori doriți să adăugați un popover la un hyperlink care include mai multe linii. Comportamentul implicit al plugin-ului popover este de a-l centra orizontal și vertical. Adaugă white-space: nowrap;la ancorele tale pentru a evita acest lucru.

Exemple

Popover static

Sunt disponibile patru opțiuni: aliniat sus, dreapta, jos și stânga.

Popover top

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

Popover dreapta

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

Popover de jos

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

Popover stânga

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

Demo live

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

Patru direcții

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

Închideți la următorul clic

Utilizați focusdeclanșatorul pentru a închide popover-urile la următorul clic pe care îl face utilizatorul.

Este necesar un marcaj specific pentru respingerea la clicul următor

Pentru un comportament adecvat între browsere și platforme, trebuie să utilizați <a>eticheta, nu eticheta <button>și, de asemenea, trebuie să includeți atributele role="button"și .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>

Utilizare

Activați popover-urile prin JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Nume Tip Mod implicit Descriere
animaţie boolean Adevărat Aplicați o tranziție de estompare CSS la popover
recipient șir | fals fals

Adaugă popover-ul la un anumit element. Exemplu: container: 'body'. Această opțiune este deosebit de utilă prin faptul că vă permite să poziționați popover-ul în fluxul documentului lângă elementul de declanșare - ceea ce va împiedica popover-ul să plutească departe de elementul de declanșare în timpul redimensionării ferestrei.

conţinut șir | funcţie ''

Valoarea implicită a conținutului dacă data-contentatributul nu este prezent.

Dacă este dată o funcție, aceasta va fi apelată cu thisreferința setată la elementul la care este atașat popover-ul.

întârziere număr | obiect 0

Întârziere afișarea și ascunderea popover-ului (ms) - nu se aplică tipului de declanșare manuală

Dacă este furnizat un număr, se aplică întârziere atât pentru ascunde/afișare

Structura obiectului este:delay: { "show": 500, "hide": 100 }

html boolean fals Inserați HTML în popover. Dacă este fals, textmetoda jQuery va fi folosită pentru a insera conținut în DOM. Folosiți text dacă vă îngrijorează atacurile XSS.
plasare șir | funcţie 'dreapta'

Cum să poziționați popover-ul - sus | jos | stânga | dreapta | auto.
Când este specificat „auto”, acesta va reorienta în mod dinamic popover-ul. De exemplu, dacă plasarea este „auto stânga”, popover-ul se va afișa la stânga atunci când este posibil, altfel se va afișa în dreapta.

Când o funcție este utilizată pentru a determina plasarea, aceasta este apelată cu nodul popover DOM ca prim argument și elementul de declanșare nodul DOM ca al doilea. Contextul thiseste setat la instanța popover.

selector şir fals Dacă este furnizat un selector, obiectele popover vor fi delegate țintelor specificate. În practică, aceasta este folosită pentru a permite conținutului HTML dinamic să fie adăugate popovers. Vedeți acesta și un exemplu informativ .
șablon şir '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML de bază de utilizat la crearea popover-ului.

Popover-urile titlevor fi injectate în .popover-title.

Popover-urile contentvor fi injectate în .popover-content.

.arrowva deveni săgeata popover-ului.

Elementul de înveliș exterior ar trebui să aibă .popoverclasa.

titlu șir | funcţie ''

Valoarea implicită a titlului dacă titleatributul nu este prezent.

Dacă este dată o funcție, aceasta va fi apelată cu thisreferința setată la elementul la care este atașat popover-ul.

declanșatorul şir 'clic' Cum se declanșează popoverul - faceți clic pe | hover | focus | manual. Puteți trece mai multe declanșatoare; separați-le cu un spațiu. manualnu poate fi combinat cu niciun alt declanșator.
fereastra șir | obiect | funcţie { selector: „corp”, umplutură: 0 }

Menține popover-ul în limitele acestui element. Exemplu: viewport: '#viewport'sau{ "selector": "#viewport", "padding": 0 }

Dacă o funcție este dată, aceasta este apelată cu elementul de declanșare nodul DOM ca singur argument. Contextul thiseste setat la instanța popover.

Atribute de date pentru popovers individuale

Opțiunile pentru popover-uri individuale pot fi specificate alternativ prin utilizarea atributelor de date, așa cum s-a explicat mai sus.

Metode

$().popover(options)

Inițializează popover-urile pentru o colecție de elemente.

.popover('show')

Dezvăluie popover-ul unui element. Revine la apelant înainte ca popover-ul să fie afișat efectiv (adică înainte de apariția shown.bs.popoverevenimentului). Aceasta este considerată o declanșare „manuală” a popover-ului. Popover-urile al căror titlu și conținut sunt de lungime zero nu sunt niciodată afișate.

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

.popover('hide')

Ascunde popover-ul unui element. Se întoarce la apelant înainte ca popover-ul să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.popoverevenimentului). Aceasta este considerată o declanșare „manuală” a popover-ului.

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

.popover('toggle')

Comută popover-ul unui element. Revine la apelant înainte ca popover-ul să fi fost efectiv afișat sau ascuns (adică înainte ca evenimentul shown.bs.popoversau să hidden.bs.popoverapară). Aceasta este considerată o declanșare „manuală” a popover-ului.

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

.popover('destroy')

Ascunde și distruge popover-ul unui element. Popover-urile care folosesc delegarea (care sunt create folosind opțiunea selector) nu pot fi distruse individual pe elementele de declanșare descendente.

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

Evenimente

Tip de eveniment Descriere
show.bs.popover Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
arătat.bs.popover Acest eveniment este declanșat atunci când popover-ul a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde.bs.popover Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
ascuns.bs.popover Acest eveniment este declanșat când popover-ul a terminat de a fi ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
introdus.bs.popover Acest eveniment este declanșat după show.bs.popovereveniment când șablonul popover a fost adăugat la DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mesaje de alertă alert.js

Exemple de alerte

Adăugați funcționalitatea de respingere la toate mesajele de alertă cu acest plugin.

Când utilizați un .closebuton, acesta trebuie să fie primul copil al acestuia .alert-dismissibleși niciun conținut text nu poate apărea înaintea acestuia în marcaj.

Utilizare

Doar adăugați data-dismiss="alert"butonul de închidere pentru a oferi automat o funcție de închidere de alertă. Închiderea unei alerte o elimină din DOM.

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

Pentru ca alertele dvs. să folosească animația la închidere, asigurați-vă că au .fadeși.in aplicate deja clasele

Metode

$().alert()

Face ca o alertă să asculte evenimentele de clic pe elementele descendente care au data-dismiss="alert"atributul. (Nu este necesar atunci când utilizați auto-inițializarea aplicației de date.)

$().alert('close')

Închide o alertă eliminând-o din DOM. Dacă clasele .fadeși .insunt prezente pe element, alerta va dispărea înainte de a fi eliminată.

Evenimente

Pluginul de alertă Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de alertă.

Tip de eveniment Descriere
închide.bs.alert Acest eveniment se declanșează imediat când closeeste apelată metoda instanței.
închis.bs.alert Acest eveniment este declanșat când alerta a fost închisă (va aștepta finalizarea tranzițiilor CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Butoane button.js

Faceți mai mult cu butoanele. Controlați stările butoanelor sau creați grupuri de butoane pentru mai multe componente, cum ar fi barele de instrumente.

Compatibilitate între browsere

Firefox persistă stările de control al formularelor (dezactivare și verificare) în timpul încărcării paginilor . O soluție pentru aceasta este utilizarea autocomplete="off". Vezi eroarea Mozilla #654072 .

Stateful

Adăugați data-loading-text="Loading..."pentru a utiliza o stare de încărcare pe un buton.

Această caracteristică este depreciată de la v3.3.5 și a fost eliminată în v4.

Utilizați orice stare doriți!

De dragul acestei demonstrații, folosim data-loading-textși $().button('loading'), dar aceasta nu este singura stare pe care o puteți folosi. Vedeți mai multe despre asta mai jos în $().button(string)documentație .

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

Comutare unică

Adăugați data-toggle="button"pentru a activa comutarea pe un singur buton.

Este nevoie de butoane pre-activate.active șiaria-pressed="true"

Pentru butoanele pre-commutate, trebuie să adăugați .activeclasa și aria-pressed="true"atributul la buttondvs.

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

Caseta de selectare / Radio

Adăugați data-toggle="buttons"la o .btn-groupcasetă de selectare sau intrări radio pentru a activa comutarea în stilurile respective.

Opțiunile preselectate au nevoie.active

Pentru opțiunile preselectate, trebuie să adăugați singur .activeclasa la intrare .label

Starea de verificare vizuală este actualizată doar la clic

Dacă starea bifată a unui buton casetă de selectare este actualizată fără a declanșa un clickeveniment pe buton (de exemplu, prin <input type="reset">sau prin setarea checkedproprietății intrării), va trebui să comutați singur .activeclasa pe intrare .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>

Metode

$().button('toggle')

Comută starea push. Oferă butonului aspectul că a fost activat.

$().button('reset')

Resetează starea butonului - schimbă textul cu textul original. Această metodă este asincronă și revine înainte ca resetarea să se fi încheiat efectiv.

$().button(string)

Schimbă textul în orice stare de text definită de date.

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

Restrânge collapse.js

Plugin flexibil care utilizează o mână de clase pentru un comportament ușor de comutare.

Dependență de plugin

Restrângerea necesită ca pluginul de tranziții să fie inclus în versiunea dvs. de Bootstrap.

Exemplu

Faceți clic pe butoanele de mai jos pentru a afișa și a ascunde un alt element prin modificări de clasă:

  • .collapseascunde conținutul
  • .collapsingse aplică în timpul tranzițiilor
  • .collapse.inafișează conținut

Puteți folosi un link cu hrefatributul sau un buton cu data-targetatributul. În ambele cazuri, data-toggle="collapse"este necesar.

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>

Exemplu de acordeon

Extindeți comportamentul de restrângere implicit pentru a crea un acordeon cu componenta panoului.

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 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil VHS.
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 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil VHS.
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 lupul lună tempor, sunt aliqua pune o pasăre pe ea calmar cafea de origine nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur macelar vice lomo. Jambiere occaecat bere artizanală de la fermă la masă, denim crud estetic synth nesciunt probabil că n-ai auzit de ei acuzamus labore sustenabil 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>

De asemenea, este posibil să schimbați .panel-bodys cu .list-groups.

  • Bootply
  • One itmus ac facilitan
  • Al doilea eros

Faceți accesibile comenzile de extindere/restrângere

Asigurați-vă că adăugați aria-expandedla elementul de control. Acest atribut definește în mod explicit starea curentă a elementului pliabil pentru cititoarele de ecran și tehnologiile de asistență similare. Dacă elementul pliabil este închis în mod implicit, acesta ar trebui să aibă o valoare de aria-expanded="false". Dacă ați setat elementul pliabil să fie deschis în mod implicit folosind inclasa, setați aria-expanded="true"în schimb controlul. Pluginul va comuta automat acest atribut în funcție de faptul dacă elementul pliabil a fost deschis sau închis sau nu.

În plus, dacă elementul dvs. de control vizează un singur element pliabil - adică data-targetatributul indică către un idselector - puteți adăuga un aria-controlsatribut suplimentar la elementul de control, care conține idelementul pliabil. Cititoarele de ecran moderne și tehnologiile de asistență similare folosesc acest atribut pentru a oferi utilizatorilor comenzi rapide suplimentare pentru a naviga direct la elementul pliabil în sine.

Utilizare

Pluginul de colaps folosește câteva clase pentru a face față sarcinilor grele:

  • .collapseascunde conținutul
  • .collapse.inarata continutul
  • .collapsingeste adăugată când începe tranziția și eliminată când se termină

Aceste clase pot fi găsite în component-animations.less.

Prin atribute de date

Doar adăugați data-toggle="collapse"și data-targeta elementului pentru a atribui automat controlul unui element pliabil. Atributul data-targetacceptă un selector CSS pentru a aplica restrângerea. Asigurați-vă că adăugați clasa collapsela elementul pliabil. Dacă doriți să se deschidă implicit, adăugați clasa suplimentară in.

Pentru a adăuga un control de grup asemănător unui acordeon la un control pliabil, adăugați atributul de date data-parent="#selector". Consultați demonstrația pentru a vedea acest lucru în acțiune.

Prin JavaScript

Activați manual cu:

$('.collapse').collapse()

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-parent="".

Nume tip Mod implicit Descriere
mamă selector fals Dacă este furnizat un selector, atunci toate elementele pliabile de sub părintele specificat vor fi închise atunci când este afișat acest element pliabil. (similar cu comportamentul tradițional la acordeon - acesta depinde de panelclasă)
comutare boolean Adevărat Comută elementul pliabil la invocare

Metode

.collapse(options)

Activează conținutul dvs. ca element pliabil. Acceptă opțiuni opționale object.

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

.collapse('toggle')

Comută un element pliabil la afișat sau ascuns. Se întoarce la apelant înainte ca elementul pliabil să fi fost efectiv afișat sau ascuns (adică înainte ca evenimentul shown.bs.collapsesau să hidden.bs.collapseapară).

.collapse('show')

Afișează un element pliabil. Se întoarce la apelant înainte ca elementul pliabil să fie afișat efectiv (adică înainte de apariția shown.bs.collapseevenimentului).

.collapse('hide')

Ascunde un element pliabil. Se întoarce la apelant înainte ca elementul pliabil să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.collapseevenimentului).

Evenimente

Clasa de colaps a lui Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de colaps.

Tip de eveniment Descriere
arată.bs.colaps Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
arătat.bs.colaps Acest eveniment este declanșat atunci când un element de restrângere a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde.bs.colaps Acest eveniment este declanșat imediat când hidemetoda a fost apelată.
ascuns.bs.colaps Acest eveniment este declanșat atunci când un element de restrângere a fost ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carusel carousel.js

O componentă de prezentare de diapozitive pentru ciclism prin elemente, cum ar fi un carusel. Caruselele imbricate nu sunt acceptate.

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

Subtitrări opționale

Adăugați cu ușurință subtitrări la diapozitive cu .carousel-captionelementul din orice .item. Puneți aproape orice HTML opțional acolo și acesta va fi aliniat și formatat automat.

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

Carusele multiple

Caruselele necesită utilizarea unui idcontainer pe cel mai exterior (de .carousel) pentru ca comenzile caruselului să funcționeze corect. Când adăugați mai multe carusele sau când schimbați un carusel id, asigurați-vă că actualizați controalele relevante.

Prin atribute de date

Utilizați atributele de date pentru a controla cu ușurință poziția caruselului. data-slideacceptă cuvintele cheie prevsau next, care modifică poziția diapozitivului în raport cu poziția curentă. Ca alternativă, utilizați data-slide-topentru a transmite un index de diapozitiv brut la carusel data-slide-to="2", care schimbă poziția de diapozitiv la un anumit index începând cu 0.

Atributul data-ride="carousel"este folosit pentru a marca un carusel ca animat începând cu încărcarea paginii. Nu poate fi utilizat în combinație cu inițializarea JavaScript explicită (redundantă și inutilă) a aceluiași carusel.

Prin JavaScript

Apelați manual caruselul cu:

$('.carousel').carousel()

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-interval="".

Nume tip Mod implicit Descriere
interval număr 5000 Durata de întârziere între trecerea automată pe bicicletă a unui articol. Dacă este fals, caruselul nu va rula automat.
pauză șir | nul "planare" Dacă este setat la "hover", întrerupe ciclul caruselului pornit mouseenterși reia ciclul caruselului pornit mouseleave. Dacă este setat la null, trecerea cursorului peste carusel nu îl va întrerupe.
înfășura boolean Adevărat Dacă caruselul ar trebui să circule continuu sau să aibă opriri grele.
tastatură boolean Adevărat Dacă caruselul ar trebui să reacționeze la evenimentele de la tastatură.

Inițializează caruselul cu opțiuni opționale objectși începe să parcurgă articole.

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

Parcurge articolele din carusel de la stânga la dreapta.

Oprește caruselul să parcurgă articole.

Ciclulează caruselul la un anumit cadru (bazat pe 0, similar cu o matrice).

Se trece la articolul anterior.

Se trece la articolul următor.

Clasa carusel a lui Bootstrap expune două evenimente pentru conectarea la funcționalitatea carusel.

Ambele evenimente au următoarele proprietăți suplimentare:

  • direction: Direcția în care alunecă caruselul (fie "left"sau "right").
  • relatedTarget: elementul DOM care este alunecat în poziție ca element activ.

Toate evenimentele carusel sunt declanșate la carusel în sine (adică la <div class="carousel">).

Tip de eveniment Descriere
slide.bs.carusel Acest eveniment se declanșează imediat când slideeste invocată metoda instanței.
alunecare.bs.carusel Acest eveniment este declanșat când caruselul și-a încheiat tranziția de diapozitiv.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afișați affix.js

Exemplu

Pluginul position: fixed;de afixare activează și dezactivează, emulând efectul găsit cu position: sticky;. Subnavigația din dreapta este o demonstrație live a pluginului afix.


Utilizare

Utilizați pluginul de afixare prin atribute de date sau manual cu propriul JavaScript. În ambele situații, trebuie să furnizați CSS pentru poziționarea și lățimea conținutului atașat.

Notă: nu utilizați pluginul de afixare pe un element conținut într-un element relativ poziționat, cum ar fi o coloană trasă sau împinsă, din cauza unei erori de redare Safari .

Poziționare prin CSS

Pluginul afix comută între trei clase, fiecare reprezentând o anumită stare: .affix, .affix-top, și .affix-bottom. Trebuie să furnizați singur stilurile, cu excepția position: fixed;on .affix, pentru aceste clase (independent de acest plugin) pentru a gestiona pozițiile reale.

Iată cum funcționează pluginul afix:

  1. Pentru a începe, pluginul adaugă.affix-top pentru a indica că elementul este în poziția sa cea mai de sus. În acest moment nu este necesară poziționarea CSS.
  2. Derularea dincolo de elementul pe care doriți să-l atașați ar trebui să declanșeze aplicarea efectivă. Aici se .affixînlocuiește .affix-topși se setează position: fixed;(furnizat de CSS-ul Bootstrap).
  3. Dacă este definită o compensare de jos, derularea după aceasta ar trebui să fie înlocuită .affixcu .affix-bottom. Deoarece offset-urile sunt opționale, setarea unuia necesită să setați CSS-ul corespunzător. În acest caz, adăugați position: absolute;când este necesar. Pluginul folosește atributul de date sau opțiunea JavaScript pentru a determina unde să poziționeze elementul de acolo.

Urmați pașii de mai sus pentru a vă seta CSS pentru oricare dintre opțiunile de utilizare de mai jos.

Prin atribute de date

Pentru a adăuga cu ușurință un comportament de afixare oricărui element, trebuie doar să adăugați data-spy="affix"la elementul pe care doriți să îl spionați. Utilizați decalaje pentru a defini când să comutați fixarea unui element.

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

Prin JavaScript

Apelați pluginul afix prin JavaScript:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-offset-top="200".

Nume tip Mod implicit Descriere
decalaj număr | funcția | obiect 10 Pixeli de compensat față de ecran la calcularea poziției derulării. Dacă este furnizat un singur număr, decalajul va fi aplicat atât în ​​direcția de sus, cât și de jos. Pentru a oferi un offset unic, de jos și de sus, trebuie doar să furnizați un obiect offset: { top: 10 }sau offset: { top: 10, bottom: 5 }. Utilizați o funcție atunci când trebuie să calculați dinamic un offset.
ţintă selector | nod | element jQuery windowobiectul _ Specifică elementul țintă al afixului.

Metode

.affix(options)

Activează conținutul dvs. ca conținut atașat. Acceptă opțiuni opționale object.

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

.affix('checkPosition')

Recalculează starea afixului pe baza dimensiunilor, poziției și poziției de defilare a elementelor relevante. Clasele .affix, .affix-top, și .affix-bottomsunt adăugate sau eliminate din conținutul atașat în funcție de noua stare. Această metodă trebuie apelată ori de câte ori dimensiunile conținutului atașat sau ale elementului țintă sunt modificate, pentru a asigura poziționarea corectă a conținutului atașat.

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

Evenimente

Pluginul de afixare al Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea afixului.

Tip de eveniment Descriere
afix.bs.afix Acest eveniment se declanșează imediat înainte ca elementul să fie fixat.
aplicat.bs.afix Acest eveniment este declanșat după ce elementul a fost fixat.
afix-top.bs.affix Acest eveniment se declanșează imediat înainte ca elementul să fie fixat în partea de sus.
lipit-top.bs.afix Acest eveniment este declanșat după ce elementul a fost fixat în partea de sus.
afix-bottom.bs.afix Acest eveniment se declanșează imediat înainte ca elementul să fie fixat în partea de jos.
aplicat-de jos.bs.afix Acest eveniment este declanșat după ce elementul a fost fixat în partea de jos.