Visió general

Individual o compilat

Els connectors es poden incloure individualment (utilitzant els *.jsfitxers individuals de Bootstrap) o tots alhora (utilitzant bootstrap.jso minificat bootstrap.min.js).

Atributs de dades

Podeu utilitzar tots els connectors Bootstrap únicament a través de l'API de marcatge sense escriure una sola línia de JavaScript. Aquesta és l'API de primera classe de Bootstrap i hauria de ser la vostra primera consideració quan feu servir un connector.

Dit això, en algunes situacions pot ser desitjable desactivar aquesta funcionalitat. Per tant, també oferim la possibilitat de desactivar l'API d'atribut de dades desvinculant tots els esdeveniments del document amb espai de noms data-api. Això es veu així:

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

Alternativament, per orientar un connector específic, només cal incloure el nom del connector com a espai de noms juntament amb l'espai de noms de l'api de dades com aquest:

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

API programàtica

També creiem que hauríeu de poder utilitzar tots els connectors Bootstrap només mitjançant l'API de JavaScript. Totes les API públiques són mètodes únics que es poden encadenar i retornen la col·lecció sobre la qual s'ha actuat.

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

Tots els mètodes haurien d'acceptar un objecte d'opcions opcionals, una cadena que tingui com a objectiu un mètode concret o res (que iniciï un connector amb un comportament predeterminat):

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

Cada connector també exposa el seu constructor en brut en una Constructorpropietat: $.fn.popover.Constructor. Si voleu obtenir una instància de connector concreta, recupera-la directament d'un element: $('[rel="popover"]').data('popover').

Configuració per defecte

Podeu canviar la configuració predeterminada d'un connector modificant l' Constructor.DEFAULTSobjecte del connector:

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

Cap conflicte

De vegades és necessari utilitzar connectors Bootstrap amb altres marcs d'interfície d'usuari. En aquestes circumstàncies, ocasionalment es poden produir col·lisions d'espais de noms. Si això passa, podeu trucar .noConflictal connector del qual voleu revertir el valor.

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

Esdeveniments

Bootstrap ofereix esdeveniments personalitzats per a les accions úniques de la majoria dels connectors. Generalment, aquests es presenten en una forma d'infinitiu i de participi passat, on l'infinitiu (p. ex. show) s'activa a l'inici d'un esdeveniment i la seva forma de participi passat (p. ex. shown) s'activa en finalitzar una acció.

A partir de la 3.0.0, tots els esdeveniments Bootstrap tenen espai de noms.

Tots els esdeveniments infinitius proporcionen preventDefaultfuncionalitat. Això proporciona la possibilitat d'aturar l'execució d'una acció abans que comenci.

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

Números de versió

Es pot accedir a la versió de cadascun dels connectors jQuery de Bootstrap mitjançant la VERSIONpropietat del constructor del connector. Per exemple, per al connector tooltip:

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

No hi ha alternatives especials quan JavaScript està desactivat

Els connectors d'Bootstrap no cauen especialment amb gràcia quan JavaScript està desactivat. Si t'importa l'experiència de l'usuari en aquest cas, fes servir <noscript>per explicar la situació (i com tornar a activar JavaScript) als teus usuaris i/o afegir les teves pròpies alternatives personalitzades.

Transicions transition.js

Sobre les transicions

Per obtenir efectes de transició senzills, inclou transition.jsuna vegada juntament amb els altres fitxers JS. Si utilitzeu el compilat (o minificat) bootstrap.js, no cal incloure-ho; ja hi és.

Què hi ha dins

Transition.js és un ajudant bàsic per a transitionEndesdeveniments, així com un emulador de transició CSS. Els altres connectors l'utilitzen per comprovar la compatibilitat amb la transició CSS ​​i per capturar les transicions penjades.

Desactivació de transicions

Les transicions es poden desactivar globalment utilitzant el fragment de JavaScript següent, que ha de venir després que s'hagi carregat transition.js(o bootstrap.jso , segons sigui el cas):bootstrap.min.js

$.support.transition = false

Modals modal.js

Els modals són indicacions de diàleg simplificades, però flexibles amb la funcionalitat mínima necessària i els valors predeterminats intel·ligents.

A causa de com HTML5 defineix la seva semàntica, l' autofocusatribut HTML no té cap efecte en els modals d'Bootstrap. Per aconseguir el mateix efecte, utilitzeu JavaScript personalitzat:

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

Exemples

Exemple estàtic

Un modal representat amb la capçalera, el cos i el conjunt d'accions al peu de pàgina.

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

Commuteu un modal mitjançant JavaScript fent clic al botó següent. Es lliscarà cap avall i s'esvaeix des de la part superior de la pàgina.

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

Mides opcionals

Els modals tenen dues mides opcionals, disponibles mitjançant classes modificadores per col·locar-les en un fitxer .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 l'animació

Per als modals que simplement apareixen en lloc de desaparèixer per veure's, elimineu la .fadeclasse del vostre marcatge modal.

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

Ús del sistema de graella

Per aprofitar el sistema de quadrícula Bootstrap dins d'un modal, només cal que niu .rows dins .modal-bodyi després utilitzeu les classes normals del sistema de quadrícula.

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

Contingut modal variable segons el botó d'activació

Tens un munt de botons que activen tots el mateix modal, només amb continguts lleugerament diferents? Utilitzeu event.relatedTargeti atributs HTMLdata-* (possiblement mitjançant jQuery ) per variar el contingut del modal en funció del botó que s'hagi fet clic. Consulteu els documents d'esdeveniments modals per obtenir més informació sobre 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)
})

Ús

El connector modal alterna el contingut ocult a demanda, mitjançant atributs de dades o JavaScript. També s'afegeix .modal-openal <body>comportament de desplaçament predeterminat per anul·lar i genera una .modal-backdropàrea de clic per descartar els modals mostrats quan es fa clic fora del modal.

Mitjançant atributs de dades

Activa un modal sense escriure JavaScript. Estableix data-toggle="modal"en un element del controlador, com un botó, juntament amb un data-target="#foo"o href="#foo"per orientar un modal específic per alternar.

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

Mitjançant JavaScript

Truqueu a un modal amb id myModalamb una sola línia de JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-backdrop="".

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

Mètodes

.modal(options)

Activa el teu contingut com a modal. Accepta opcions opcionals object.

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

.modal('toggle')

Commuta manualment un modal. Torna a la persona que truca abans que el modal s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.modalo ).hidden.bs.modal

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

.modal('show')

Obre manualment un modal. Torna a la persona que truca abans que s'hagi mostrat realment el modal (és a dir, abans shown.bs.modalque es produeixi l'esdeveniment).

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

.modal('hide')

Amaga manualment un modal. Torna a la persona que truca abans que el modal s'hagi amagat (és a dir, abans hidden.bs.modalque es produeixi l'esdeveniment).

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

.modal('handleUpdate')

Reajusta el posicionament del modal per contrarestar una barra de desplaçament en cas que n'hagués d'aparèixer, cosa que faria que el modal salti cap a l'esquerra.

Només cal quan l'alçada del modal canvia mentre està obert.

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

Esdeveniments

La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal.

Tots els esdeveniments modals es desencadenen al propi modal (és a dir, al <div class="modal">).

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

Menú desplegable dropdown.js

Exemples

Afegiu menús desplegables a gairebé qualsevol cosa amb aquest connector senzill, incloses la barra de navegació, les pestanyes i les píndoles.

Dins d'una barra de navegació

Dins de pastilles

Ús

Mitjançant atributs de dades o JavaScript, el connector desplegable alterna el contingut ocult (menús desplegables) canviant la .openclasse a l'element de la llista principal.

Als dispositius mòbils, l'obertura d'un menú desplegable afegeix una .dropdown-backdropàrea de toc per tancar els menús desplegables quan toqueu fora del menú, un requisit per a un suport adequat per a iOS. Això vol dir que canviar d'un menú desplegable obert a un menú desplegable diferent requereix un toc addicional al mòbil.

Nota: l' data-toggle="dropdown"atribut es basa per tancar menús desplegables a nivell d'aplicació, per la qual cosa és una bona idea utilitzar-lo sempre.

Mitjançant atributs de dades

Afegeix data-toggle="dropdown"a un enllaç o un botó per canviar un menú desplegable.

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

Per mantenir intactes els URL amb els botons d'enllaç, utilitzeu l' data-targetatribut en lloc 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>

Mitjançant JavaScript

Truqueu als menús desplegables mitjançant JavaScript:

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

Opcions

Cap

Mètodes

$().dropdown('toggle')

Activa o desactiva el menú desplegable d'una barra de navegació determinada o de la navegació per pestanyes.

Esdeveniments

Tots els esdeveniments desplegables es desencadenen a l' .dropdown-menuelement pare de '.

Tots els esdeveniments desplegables tenen una relatedTargetpropietat, el valor de la qual és l'element d'ancoratge alternatiu.

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

ScrollSpy scrollspy.js

Exemple a la barra de navegació

El connector ScrollSpy serveix per actualitzar automàticament els objectius de navegació en funció de la posició del desplaçament. Desplaceu-vos per l'àrea de sota de la barra de navegació i observeu el canvi de classe activa. També es destacaran els subelements desplegables.

Ús

Requereix un posicionament relatiu

Independentment del mètode d'implementació, scrollspy requereix l'ús de position: relative;l'element que esteu espiant. En la majoria dels casos aquest és el <body>. Quan feu una exploració de desplaçaments en elements diferents de <body>, assegureu-vos de tenir un heightconjunt i overflow-y: scroll;aplicar.

Mitjançant atributs de dades

Per afegir fàcilment un comportament scrollspy a la vostra navegació de la barra superior, afegiu data-spy="scroll"-lo a l'element que voleu espiar (normalment seria el <body>). A continuació, afegiu l' data-targetatribut amb l'ID o la classe de l'element pare de qualsevol .navcomponent 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>

Mitjançant JavaScript

Després d'afegir position: relative;el vostre CSS, truqueu al scrollspy mitjançant JavaScript:

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

Mètodes

.scrollspy('refresh')

Quan utilitzeu scrollspy juntament amb l'addició o eliminació d'elements del DOM, haureu de cridar el mètode d'actualització de la següent manera:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset="".

Esdeveniments

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

Pestanyes alternables tab.js

Pestanyes d'exemple

Afegiu una funcionalitat de pestanyes ràpida i dinàmica per passar pels panells de contingut local, fins i tot mitjançant menús desplegables. Les pestanyes imbricades no s'admeten.

Ús

Activa les pestanyes amb tabulació mitjançant JavaScript (cada pestanya s'ha d'activar individualment):

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

Podeu activar pestanyes individuals de diverses maneres:

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

Marcatge

Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement especificant data-toggle="tab"o data-toggle="pill"en un element. Si afegiu les classes navi a la pestanya s'aplicarà l' estil de la pestanya Bootstrap , mentre que si afegiu les classes i s'aplicarà l' estil de la pastilla .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>

Efecte esvaït

Per fer que les pestanyes s'esvaeixin, afegiu .fade-les a cadascuna .tab-pane. El primer panell de pestanyes també ha .inde fer visible el contingut inicial.

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

Mètodes

$().tab

Activa un element de pestanya i un contenidor. La pestanya hauria de tenir un node de contenidor data-targeto una hreforientació al DOM. En els exemples anteriors, les pestanyes són la <a>s amb data-toggle="tab"atributs.

.tab('show')

Selecciona la pestanya donada i mostra el seu contingut associat. Qualsevol altra pestanya que s'hagi seleccionat anteriorment es desactiva i el seu contingut associat s'amaga. Torna a la persona que truca abans que s'hagi mostrat realment el panell de pestanyes (és a dir, abans shown.bs.tabque es produeixi l'esdeveniment).

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

Esdeveniments

Quan es mostra una pestanya nova, els esdeveniments es desencadenen en l'ordre següent:

1. hide.bs.tab(a la pestanya activa actual)
2. show.bs.tab(a la pestanya per mostrar)
3. hidden.bs.tab(a la pestanya activa anterior, la mateixa que per a l' hide.bs.tabesdeveniment)
4. shown.bs.tab(a la pestanya recentment activa que s'acaba de mostrar, la mateixa que per a l' show.bs.tabesdeveniment)

Si no hi havia cap pestanya activa, els esdeveniments hide.bs.tabi hidden.bs.tabno s'activaran.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Inspirat en l'excel·lent connector jQuery.tipsy escrit per Jason Frame; Els consells sobre eines són una versió actualitzada, que no es basen en imatges, utilitza CSS3 per a animacions i atributs de dades per a l'emmagatzematge de títols locals.

Els consells sobre eines amb títols de longitud zero no es mostren mai.

Exemples

Passeu el cursor per sobre dels enllaços següents per veure els consells sobre eines:

Informació sobre eines estàtica

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra.

Quatre direccions

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

Ús

El connector d'informació sobre eines genera contingut i marques sota demanda i, per defecte, col·loca els consells sobre eines després del seu element activador.

Activa la informació sobre eines mitjançant JavaScript:

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

Marcatge

L'etiquetatge necessari per a una informació sobre eines és només un dataatribut i titlea l'element HTML voleu tenir una informació sobre eines. El marcatge generat d'una informació sobre eines és bastant senzill, tot i que requereix una posició (per defecte, establerta toppel connector).

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Mètodes

$().tooltip(options)

Adjunta un controlador d'informació eines a una col·lecció d'elements.

.tooltip('show')

Revela la informació sobre eines d'un element. Torna a la persona que truca abans que s'hagi mostrat realment la informació sobre eines (és a dir, abans shown.bs.tooltipque es produeixi l'esdeveniment). Això es considera una activació "manual" de la informació sobre eines. Els consells sobre eines amb títols de longitud zero no es mostren mai.

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

.tooltip('hide')

Amaga la informació sobre eines d'un element. Torna a la persona que truca abans que la informació sobre eines s'hagi amagat (és a dir, abans hidden.bs.tooltipque es produeixi l'esdeveniment). Això es considera una activació "manual" de la informació sobre eines.

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

.tooltip('toggle')

Commuta la informació sobre eines d'un element. Torna a la persona que truca abans que s'hagi mostrat o amagat la informació sobre eines (és a dir, abans que es produeixi l'esdeveniment shown.bs.tooltipo ). hidden.bs.tooltipAixò es considera una activació "manual" de la informació sobre eines.

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

.tooltip('destroy')

Amaga i destrueix la informació sobre eines d'un element. Els consells sobre eines que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

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

Esdeveniments

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

Popovers popover.js

Afegiu petites superposicions de contingut, com les de l'iPad, a qualsevol element per allotjar informació secundària.

Les finestres emergents tant el títol com el contingut són de longitud zero mai es mostren.

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

Exemples

Popover estàtic

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra.

Demo en directe

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

Quatre direccions

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

Omet al següent clic

Utilitzeu el focusdisparador per descartar popovers al següent clic que faci l'usuari.

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

Ús

Activa les finestres emergents mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Mètodes

$().popover(options)

Inicialitza les finestres emergents per a una col·lecció d'elements.

.popover('show')

Revela el popover d'un element. Torna a la persona que truca abans que s'hagi mostrat realment el popover (és a dir, abans shown.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover. Les finestres emergents tant el títol com el contingut són de longitud zero mai es mostren.

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

.popover('hide')

Amaga la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi amagat (és a dir, abans hidden.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover.

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

.popover('toggle')

Activa o desactiva la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.popovero ). hidden.bs.popoverAixò es considera una activació "manual" del popover.

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

.popover('destroy')

Amaga i destrueix el popover d'un element. Els popovers que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

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

Esdeveniments

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

Missatges d'alerta alert.js

Alertes d'exemple

Afegiu la funcionalitat de descartar a tots els missatges d'alerta amb aquest connector.

Quan s'utilitza un .closebotó, ha de ser el primer fill del .alert-dismissiblei no hi pot haver contingut de text abans de l'etiquetatge.

Ús

Només heu d'afegir data-dismiss="alert"al vostre botó de tancament per donar automàticament una funcionalitat de tancament d'alerta. Tancar una alerta l'elimina del DOM.

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

Perquè les vostres alertes facin servir l'animació en tancar, assegureu-vos que tinguin la .fadei.in classes

Mètodes

$().alert()

Fa que una alerta escolti els esdeveniments de clic als elements descendents que tenen l' data-dismiss="alert"atribut. (No és necessari quan s'utilitza l'inicialització automàtica de l'api de dades.)

$().alert('close')

Tanca una alerta eliminant-la del DOM. Si les classes .fadei .inestan presents a l'element, l'alerta s'esvairà abans que s'elimini.

Esdeveniments

El connector d'alerta de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat d'alerta.

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

Botons button.js

Fes més amb els botons. Controla els estats dels botons o crea grups de botons per a més components com ara barres d'eines.

Estatal

Afegeix data-loading-text="Loading..."per utilitzar un estat de càrrega en un botó.

Aquesta funció està obsoleta des de la v3.3.5 i s'ha eliminat a la 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>

Canvi únic

Afegeix data-toggle="button"per activar la commutació en un sol botó.

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

Casilla de selecció / Ràdio

Afegiu data-toggle="buttons"-hi una .btn-groupcasella de selecció o entrades de ràdio per activar la commutació dels seus respectius estils.

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

Mètodes

$().button('toggle')

Commuta l'estat push. Dóna al botó l'aspecte que s'ha activat.

$().button('reset')

Restableix l'estat del botó: canvia el text pel text original. Aquest mètode és asíncron i torna abans que s'hagi completat el restabliment.

$().button(string)

Canvia el text a qualsevol estat de text definit amb dades.

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

Replega collapse.js

Connector flexible que utilitza un grapat de classes per a un comportament fàcil de canviar.

Exemple

Feu clic als botons següents per mostrar i amagar un altre element mitjançant els canvis de classe:

• .collapseamaga contingut
• .collapsings'aplica durant les transicions
• .collapse.inmostra contingut

Podeu utilitzar un enllaç amb l' hrefatribut o un botó amb l' data-targetatribut. En ambdós casos, data-toggle="collapse"és necessari.

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

Exemple d'acordió

Amplieu el comportament de col·lapse predeterminat per crear un acordió amb el component del panell.

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

També és possible canviar .panel-bodys per .list-groups.

Ús

El connector de col·lapse utilitza unes quantes classes per gestionar el treball pesat:

• .collapseamaga el contingut
• .collapse.inmostra el contingut
• .collapsings'afegeix quan comença la transició i s'elimina quan s'acaba

Aquestes classes es poden trobar a component-animations.less.

Mitjançant atributs de dades

Només cal afegir data-toggle="collapse"i a data-targeta l'element per assignar automàticament el control d'un element plegable. L' data-targetatribut accepta un selector CSS al qual aplicar el col·lapse. Assegureu-vos d'afegir la classe collapsea l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional in.

Per afegir una gestió de grups semblant a un acordió a un control plegable, afegiu l'atribut de dades data-parent="#selector". Consulteu la demostració per veure-ho en acció.

Mitjançant JavaScript

Habilita manualment amb:

$('.collapse').collapse()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-parent="".

Mètodes

.collapse(options)

Activa el teu contingut com a element plegable. Accepta opcions opcionals object.

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

.collapse('toggle')

Commuta un element plegable per mostrar-lo o amagar-lo. Torna a la persona que truca abans que l'element plegable s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.collapseo ).hidden.bs.collapse

.collapse('show')

Mostra un element plegable. Torna a la persona que truca abans que s'hagi mostrat realment l'element plegable (és a dir, abans shown.bs.collapseque es produeixi l'esdeveniment).

.collapse('hide')

Amaga un element plegable. Torna a la persona que truca abans que l'element plegable s'hagi amagat (és a dir, abans hidden.bs.collapseque es produeixi l'esdeveniment).

Esdeveniments

La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.

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

Carrusel carousel.js

Un component de presentació de diapositives per circular per elements, com un carrusel. Els carrusels imbricats no s'admeten.

Exemples

Anterior Pròxim

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

Subtítols opcionals

Afegiu subtítols a les vostres diapositives fàcilment amb l' .carousel-captionelement de qualsevol .item. Col·loqueu gairebé qualsevol HTML opcional allà dins i s'alinearà i formatarà automàticament.

Primera etiqueta de la diapositiva

Nulla vitae elit libero, a pharetra augue mollis interdum.

Segona etiqueta de la diapositiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiqueta de la tercera diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Anterior Pròxim

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

Ús

Carrusels múltiples

Els carrusels requereixen l'ús d'un idcontenidor a l'exterior (el .carousel) perquè els controls del carrusel funcionin correctament. Quan afegiu diversos carrusels o quan canvieu un carrusel id, assegureu-vos d'actualitzar els controls pertinents.

Mitjançant atributs de dades

Utilitzeu atributs de dades per controlar fàcilment la posició del carrusel. data-slideaccepta les paraules clau prevo next, que altera la posició de la diapositiva en relació a la seva posició actual. Alternativament, utilitzeu data-slide-toper passar un índex de diapositives en brut al carrusel data-slide-to="2", que canvia la posició de la diapositiva a un índex concret que comença per 0.

L' data-ride="carousel"atribut s'utilitza per marcar un carrusel com a animador a partir de la càrrega de la pàgina. No es pot utilitzar en combinació amb la inicialització explícita de JavaScript (redundant i innecessària) del mateix carrusel.

Mitjançant JavaScript

Truqueu manualment al carrusel amb:

$('.carousel').carousel()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-interval="".

Mètodes

.carousel(options)

Inicialitza el carrusel amb opcions opcionals objecti comença a circular pels elements.

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

.carousel('cycle')

Recorre els elements del carrusel d'esquerra a dreta.

.carousel('pause')

Impedeix que el carrusel circuli per elements.

.carousel(number)

Cicle el carrusel a un fotograma concret (basat en 0, similar a una matriu).

.carousel('prev')

Cicles a l'element anterior.

.carousel('next')

Passa a l'element següent.

Esdeveniments

La classe de carrusel de Bootstrap exposa dos esdeveniments per connectar-se a la funcionalitat del carrusel.

Tots dos esdeveniments tenen les següents propietats addicionals:

• direction: La direcció en què llisca el carrusel (o "left"bé "right").
• relatedTarget: l'element DOM que s'està fent lliscar al seu lloc com a element actiu.

Tots els esdeveniments del carrusel es desenvolupen al mateix carrusel (és a dir, al <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afix affix.js

Exemple

El connector d'afix s'activa position: fixed;i desactiva, emulant l'efecte trobat amb position: sticky;. La subnavegació de la dreta és una demostració en directe del connector afix.

Ús

Utilitzeu el connector afix mitjançant atributs de dades o manualment amb el vostre propi JavaScript. En ambdues situacions, heu de proporcionar CSS per al posicionament i l'amplada del vostre contingut col·locat.

Nota: no utilitzeu el connector d'afixos en un element contingut en un element relativament posicionat, com ara una columna estirada o empesa, a causa d'un error de representació de Safari .

Posicionament mitjançant CSS

El connector d'afix alterna entre tres classes, cadascuna representant un estat particular: .affix, .affix-top, i .affix-bottom. Heu de proporcionar els estils, amb l'excepció de position: fixed;on .affix, d'aquestes classes vosaltres mateixos (independentment d'aquest connector) per gestionar les posicions reals.

Així és com funciona el connector d'afix:

1. Per començar, el connector s'afegeix .affix-topper indicar que l'element es troba a la seva posició superior. En aquest moment no cal cap posicionament CSS.
2. Desplaçar-vos més enllà de l'element que voleu col·locar hauria de desencadenar la col·locació real. Aquí és on .affixsubstitueix .affix-topi estableix position: fixed;(proporcionat pel CSS de Bootstrap).
3. Si es defineix un desplaçament inferior, desplaçar-se més enllà hauria de substituir-lo .affixper .affix-bottom. Com que els desplaçaments són opcionals, establir-ne un requereix que establiu el CSS adequat. En aquest cas, afegir position: absolute;quan sigui necessari. El connector utilitza l'atribut de dades o l'opció JavaScript per determinar on col·locar l'element des d'allà.

Seguiu els passos anteriors per configurar el vostre CSS per a qualsevol de les opcions d'ús següents.

Mitjançant atributs de dades

Per afegir fàcilment un comportament d'afixos a qualsevol element, només cal que afegiu data-spy="affix"-lo a l'element que voleu espiar. Utilitzeu desplaçaments per definir quan s'ha de canviar la fixació d'un element.

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

Mitjançant JavaScript

Truqueu al connector d'afix mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset-top="200".

Mètodes

.affix(options)

Activa el teu contingut com a contingut enganxat. Accepta opcions opcionals object.

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

.affix('checkPosition')

Recalcula l'estat de l'afix en funció de les dimensions, la posició i la posició de desplaçament dels elements rellevants. Les classes .affix, .affix-top, i .affix-bottoms'afegeixen o s'eliminen del contingut adjunt segons el nou estat. Aquest mètode s'ha de cridar sempre que es canvien les dimensions del contingut col·locat o de l'element objectiu, per garantir el posicionament correcte del contingut col·locat.

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

Esdeveniments

El connector d'afixos de Bootstrap exposa alguns esdeveniments per connectar-vos a la funcionalitat d'afixos.