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

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

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.

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.

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>

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

Conținut modal variat în funcție de butonul de declanșare

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,

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

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

Metode

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Mențiuni derulante dropdown.js

Exemple

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

Utilizare

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

Opțiuni

Nici unul

Metode

$().dropdown('toggle')

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

Evenimente

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.

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

Utilizare

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

Evenimente

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

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.

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

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>

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

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

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

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

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

Exemple

Popover static

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

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.

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

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

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

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

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.

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

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

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

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.

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

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

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

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.

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

Exemple

Anterior Următorul

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

Prima etichetă a diapozitivei

Nulla vitae elit libero, a pharetra augue mollis interdum.

A doua etichetă a diapozitivei

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Eticheta a treia diapozitiv

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Anterior Următorul

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

Utilizare

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

Metode

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

Oprește caruselul să parcurgă articole.

.carousel(number)

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

.carousel('prev')

Se trece la articolul anterior.

.carousel('next')

Se trece la articolul următor.

Evenimente

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

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

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.