Visión xeral

Individual ou compilado

Os complementos pódense incluír individualmente (usando os *.jsficheiros individuais de Bootstrap) ou todos á vez (usando bootstrap.jso minificado bootstrap.min.js).

Atributos de datos

Podes usar todos os complementos de Bootstrap só a través da API de marcado sen escribir unha soa liña de JavaScript. Esta é a API de primeira clase de Bootstrap e debería ser a túa primeira consideración ao usar un complemento.

Dito isto, nalgunhas situacións pode ser desexable desactivar esta función. Polo tanto, tamén ofrecemos a posibilidade de desactivar a API de atributos de datos desvinculando todos os eventos do documento con espazo de nomes data-api. Isto parece isto:

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

Alternativamente, para apuntar a un complemento específico, simplemente inclúa o nome do complemento como espazo de nomes xunto co espazo de nomes da API de datos como este:

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

API programática

Tamén cremos que deberías poder usar todos os complementos de Bootstrap só a través da API de JavaScript. Todas as API públicas son métodos únicos que se poden encadear e devolven a colección sobre a que se actuou.

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

Todos os métodos deben aceptar un obxecto de opcións opcionais, unha cadea que se dirixe a un método en particular ou nada (que inicia un complemento co comportamento predeterminado):

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

Cada complemento tamén expón o seu construtor bruto nunha Constructorpropiedade: $.fn.popover.Constructor. Se queres obter unha instancia de complemento en particular, obtén directamente desde un elemento: $('[rel="popover"]').data('popover').

Configuración predeterminada

Podes cambiar a configuración predeterminada dun complemento modificando o Constructor.DEFAULTSobxecto do complemento:

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

Sen conflito

Ás veces é necesario usar complementos de Bootstrap con outros marcos de IU. Nestas circunstancias, ocasionalmente poden ocorrer colisións de espazos de nomes. Se isto ocorre, podes chamar .noConflictao complemento do que desexas reverter o valor.

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

Eventos

Bootstrap ofrece eventos personalizados para as accións únicas da maioría dos complementos. Xeralmente, estes veñen nunha forma de infinitivo e de participio pasado, onde o infinitivo (ex. show) se activa ao comezo dun evento, e a súa forma de participio pasado (ex. shown) desenvólvese ao completar unha acción.

A partir da 3.0.0, todos os eventos de Bootstrap teñen espazo de nomes.

Todos os eventos de infinitivo proporcionan preventDefaultfuncionalidade. Isto proporciona a capacidade de deter a execución dunha acción antes de que comece.

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

Sanitizante

As informacións sobre ferramentas e popovers usan o noso desinfectante integrado para desinfectar as opcións que aceptan HTML.

O valor predeterminado whiteListé o seguinte:

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

Se queres engadir novos valores a este valor predeterminado whiteList, podes facer o seguinte:

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

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

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

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

Se queres evitar o noso desinfectante porque prefires usar unha biblioteca dedicada, por exemplo DOMPurify , debes facer o seguinte:

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

Números de versión

Pódese acceder á versión de cada un dos complementos jQuery de Bootstrap a través da VERSIONpropiedade do construtor do complemento. Por exemplo, para o complemento de información sobre ferramentas:

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

Non hai opcións especiais cando JavaScript está desactivado

Os complementos de Bootstrap non caen con especial gracia cando JavaScript está desactivado. Se che importa a experiencia do usuario neste caso, úsao <noscript>para explicar a situación (e como volver activar JavaScript) aos teus usuarios e/ou engade as túas propias opcións de reserva personalizadas.

Transicións transition.js

Sobre as transicións

Para efectos de transición sinxelos, inclúa transition.jsunha vez xunto cos outros ficheiros JS. Se estás a usar o compilado (ou minificado) bootstrap.js, non hai que incluír isto, xa está aí.

Que hai dentro

Transition.js é un axudante básico para transitionEndeventos, así como un emulador de transición CSS. Úsano os outros complementos para comprobar a compatibilidade de transición CSS e capturar as transicións pendentes.

Desactivando as transicións

As transicións pódense desactivar globalmente usando o seguinte fragmento de JavaScript, que debe vir despois de cargarse transition.js(ou bootstrap.jsou bootstrap.min.js, segundo o caso):

$.support.transition = false

Modais modal.js

Os modais son sinxelos, pero flexibles, as solicitudes de diálogo coa funcionalidade mínima necesaria e os valores predeterminados intelixentes.

Debido a como HTML5 define a súa semántica, o autofocusatributo HTML non ten ningún efecto nos modais de Bootstrap. Para conseguir o mesmo efecto, use algún JavaScript personalizado:

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

Exemplos

Exemplo estático

Un modal renderizado con cabeceira, corpo e conxunto de accións no pé.

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

Alterna un modal a través de JavaScript facendo clic no botón de abaixo. Deslizarase cara abaixo e desaparecerá dende a parte superior da páxina.

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

Tamaños opcionais

Os modais teñen dous tamaños opcionais, dispoñibles mediante clases de modificadores para colocalos nun .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Eliminar animación

Para os modais que simplemente aparecen en lugar de desaparecer para ver, elimina a .fadeclase do teu marcado modal.

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

Usando o sistema de reixa

Para aproveitar o sistema de cuadrícula Bootstrap dentro dun modal, só tes que aniñar .rows dentro do .modal-bodye despois usa as clases normais do sistema de grade.

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

Contido modal variable en función do botón disparador

Tes un montón de botóns que activan o mesmo modal, só con contidos lixeiramente diferentes? Use event.relatedTargete atributos HTMLdata-* (posiblemente a través de jQuery ) para variar o contido do modal dependendo do botón que se premeu. Consulte os documentos de eventos modais para obter máis información 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)
})

Uso

O complemento modal alterna o teu contido oculto baixo demanda, mediante atributos de datos ou JavaScript. Tamén se engade .modal-openao <body>comportamento de desprazamento predeterminado para anular e xera unha .modal-backdropárea de clic para descartar os modais mostrados ao facer clic fóra do modal.

A través de atributos de datos

Activa un modal sen escribir JavaScript. Establécese data-toggle="modal"nun elemento do controlador, como un botón, xunto cun data-target="#foo"ou href="#foo"para seleccionar un modal específico para alternar.

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

Vía JavaScript

Chame a un modal con id myModalcunha única liña de JavaScript:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-backdrop="".

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

Métodos

.modal(options)

Activa o teu contido como modal. Acepta opcións opcionais object.

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

.modal('toggle')

Alterna manualmente un modal. Volve ao interlocutor antes de que o modal se amosase ou ocultase (é dicir, antes de que se produza o evento shown.bs.modalou ).hidden.bs.modal

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

.modal('show')

Abre manualmente un modal. Volve ao interlocutor antes de que se amosara o modal (é dicir, antes de shown.bs.modalque ocorra o evento).

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

.modal('hide')

Oculta manualmente un modal. Volve ao interlocutor antes de que se ocultase o modal (é dicir, antes de hidden.bs.modalque se produza o evento).

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

.modal('handleUpdate')

Reaxusta o posicionamento do modal para contrarrestar unha barra de desprazamento no caso de que apareza unha, o que faría que o modal salte cara á esquerda.

Só é necesario cando a altura do modal cambia mentres está aberto.

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

Eventos

A clase modal de Bootstrap expón algúns eventos para conectarse á funcionalidade modal.

Todos os eventos modais desenvólvense no propio modal (é dicir, no <div class="modal">).

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

Menú despregable dropdown.js

Exemplos

Engade menús despregables a case calquera cousa con este sinxelo complemento, incluíndo a barra de navegación, as pestanas e as pílulas.

Dentro dunha barra de navegación

Dentro de pastillas

Uso

A través de atributos de datos ou JavaScript, o complemento despregable alterna o contido oculto (menús despregables) alternando a .openclase no elemento da lista principal.

Nos dispositivos móbiles, abrir un menú despregable engádese unha .dropdown-backdropárea de toque para pechar os menús despregables ao tocar fóra do menú, un requisito para a compatibilidade adecuada de iOS. Isto significa que cambiar dun menú despregable aberto a un menú despregable diferente require un toque adicional no móbil.

Nota: data-toggle="dropdown"confía no atributo para pechar menús despregables a nivel de aplicación, polo que é unha boa idea usalo sempre.

A través de atributos de datos

Engadir data-toggle="dropdown"a unha ligazón ou botón para alternar un menú despregable.

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

Para manter os URL intactos cos botóns de ligazón, utiliza o data-targetatributo en lugar 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>

Vía JavaScript

Chame aos menús despregables mediante JavaScript:

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

Opcións

Ningún

Métodos

$().dropdown('toggle')

Alterna o menú despregable dunha determinada barra de navegación ou navegación por pestanas.

Eventos

Todos os eventos do menú despregable desenvólvense no .dropdown-menuelemento principal de '.

Todos os eventos do menú despregable teñen unha relatedTargetpropiedade, cuxo valor é o elemento de áncora alternante.

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

ScrollSpy scrollspy.js

Exemplo na barra de navegación

O complemento ScrollSpy serve para actualizar automaticamente os obxectivos de navegación en función da posición do desprazamento. Desprázate pola área debaixo da barra de navegación e observa o cambio de clase activa. Tamén se destacarán os subelementos do menú despregable.

Uso

Require posicionamento relativo

Non importa o método de implementación, scrollspy require o uso do position: relative;elemento que estás espiando. Na maioría dos casos este é o <body>. Cando faga scrollspying en elementos distintos do <body>, asegúrese de ter un heightconxunto e overflow-y: scroll;aplicado.

A través de atributos de datos

Para engadir facilmente o comportamento scrollspy á túa navegación da barra superior, engádese data-spy="scroll"ao elemento que queres espiar (normalmente este sería o <body>). A continuación, engade o data-targetatributo co ID ou clase do elemento pai de calquera .navcompoñente 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>

Vía JavaScript

Despois de engadir position: relative;o teu CSS, chama ao scrollspy mediante JavaScript:

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

Métodos

.scrollspy('refresh')

Ao usar scrollspy xunto coa engade ou eliminación de elementos do DOM, terás que chamar ao método de actualización deste xeito:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-offset="".

Eventos

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

Pestanas alternables tab.js

Exemplos de pestanas

Engade funcións de pestanas rápidas e dinámicas para pasar a través dos paneis de contido local, mesmo a través dos menús despregables. Non se admiten as pestanas anidadas.

Uso

Activa as pestanas con tabulacións a través de JavaScript (cada pestana debe activarse individualmente):

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

Podes activar pestanas individuais de varias maneiras:

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

Marcado

Podes activar unha pestana ou navegación por pílulas sen escribir JavaScript simplemente especificando data-toggle="tab"ou data-toggle="pill"nun elemento. Engadindo as clases nave nav-tabsá pestana ulaplicarase o estilo da pestana Bootstrap , mentres que engadindo as clases nave nav-pillsaplicarase o estilo de pílula .

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

Efecto de desvanecemento

Para que as pestanas se desvanezan, engade .fadea cada unha .tab-pane. O primeiro panel de pestanas tamén debe .infacer visible o contido 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étodos

$().tab

Activa un elemento de pestana e un contenedor de contido. A pestana debería ter un nodo de contedores data-targetou un hrefnodo de destino no DOM. Nos exemplos anteriores, as pestanas son as <a>s con data-toggle="tab"atributos.

.tab('show')

Selecciona a pestana indicada e mostra o seu contido asociado. Calquera outra pestana seleccionada anteriormente non se selecciona e o contido asociado queda oculto. Volve ao interlocutor antes de que se amosara o panel de pestanas (é dicir, antes de shown.bs.tabque se produza o evento).

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

Eventos

Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:

1. hide.bs.tab(na pestana activa actual)
2. show.bs.tab(na pestana por mostrar)
3. hidden.bs.tab(na pestana activa anterior, a mesma que para o hide.bs.tabevento)
4. shown.bs.tab(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tabevento)

Se xa non estaba activa ningunha pestana, os eventos hide.bs.tabe hidden.bs.tabnon se activarán.

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

Suxestións sobre ferramentasInformación sobre ferramentas

Inspirado no excelente complemento jQuery.tipsy escrito por Jason Frame; As informacións sobre ferramentas son unha versión actualizada, que non dependen de imaxes, usan CSS3 para animacións e atributos de datos para o almacenamento local de títulos.

Os consellos de ferramentas con títulos de lonxitude cero nunca se amosan.

Exemplos

Pasa o cursor polas seguintes ligazóns para ver consellos:

Información sobre ferramentas estática

Hai catro opcións dispoñibles: arriba, dereita, inferior e aliñada á esquerda.

Catro direccións

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

Uso

O complemento de información sobre ferramentas xera contido e marcas baixo demanda e, por defecto, coloca as informacións sobre ferramentas despois do seu elemento de activación.

Activa a información sobre ferramentas mediante JavaScript:

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

Marcado

O marcado necesario para unha información sobre ferramentas é só un dataatributo e titleno elemento HTML desexa ter unha información sobre ferramentas. O marcado xerado dunha información sobre ferramentas é bastante sinxelo, aínda que require unha posición (por defecto, definida toppolo complemento).

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-animation="".

Métodos

$().tooltip(options)

Anexa un controlador de información sobre ferramentas a unha colección de elementos.

.tooltip('show')

Revela a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se amosase a información sobre ferramentas (é dicir, antes de shown.bs.tooltipque se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas. Os consellos de ferramentas con títulos de lonxitude cero nunca se amosan.

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

.tooltip('hide')

Oculta a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se ocultase a información sobre ferramentas (é dicir, antes de hidden.bs.tooltipque se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas.

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

.tooltip('toggle')

Alterna a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se amosase ou ocultase a información sobre ferramentas (é dicir, antes de que se produza o evento shown.bs.tooltipou ). hidden.bs.tooltipIsto considérase unha activación "manual" da información sobre ferramentas.

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

.tooltip('destroy')

Oculta e destrúe a información sobre ferramentas dun elemento. As informacións sobre ferramentas que usan a delegación (que se crean mediante a selectoropción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.

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

Eventos

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

Popovers popover.js

Engade pequenas superposicións de contido, como as do iPad, a calquera elemento para albergar información secundaria.

Os popovers cuxo título e contido son de lonxitude cero nunca se mostran.

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

Exemplos

Popover estático

Hai catro opcións dispoñibles: arriba, dereita, inferior e aliñada á esquerda.

Demo en directo

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

Catro direccións

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

Descartar no seguinte clic

Use o focusdisparador para descartar popovers no seguinte clic que faga o usuario.

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

Uso

Activar popovers mediante JavaScript:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-animation="".

Métodos

$().popover(options)

Inicia os popovers para unha colección de elementos.

.popover('show')

Revela o popover dun elemento. Volve ao interlocutor antes de que se amosase o popover (é dicir, antes de shown.bs.popoverque se produza o evento). Isto considérase un desencadeamento "manual" do popover. Os popovers cuxo título e contido son de lonxitude cero nunca se mostran.

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

.popover('hide')

Oculta o popover dun elemento. Volve ao interlocutor antes de que se ocultase o popover (é dicir, antes de hidden.bs.popoverque ocorra o evento). Isto considérase un desencadeamento "manual" do popover.

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

.popover('toggle')

Alterna o popover dun elemento. Volve ao interlocutor antes de que se amosase ou ocultase o popover (é dicir, antes de que se produza o evento shown.bs.popoverou ). hidden.bs.popoverIsto considérase un desencadeamento "manual" do popover.

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

.popover('destroy')

Oculta e destrúe o popover dun elemento. Os popovers que usan a delegación (que se crean mediante a selectoropción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.

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

Eventos

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

Mensaxes de alerta alert.js

Alertas de exemplo

Engade a función de descartar a todas as mensaxes de alerta con este complemento.

Cando se utiliza un .closebotón, debe ser o primeiro fillo do .alert-dismissiblee ningún contido de texto pode aparecer antes no marcado.

Uso

Só tes que engadir data-dismiss="alert"ao teu botón de peche para dar automaticamente unha función de peche de alerta. Ao pechar unha alerta elimínaa do DOM.

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

Para que as túas alertas usen a animación ao pechar, asegúrate de que xa teñan as clases .fadee .inaplicadas.

Métodos

$().alert()

Fai que unha alerta escoite eventos de clic en elementos descendentes que teñen o data-dismiss="alert"atributo. (Non é necesario cando se usa a inicialización automática da API de datos).

$().alert('close')

Pecha unha alerta quitándoa do DOM. Se as clases .fadee .inestán presentes no elemento, a alerta desaparecerá antes de eliminarla.

Eventos

O complemento de alerta de Bootstrap expón algúns eventos para conectarse á funcionalidade de alerta.

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

Botóns button.js

Fai máis cos botóns. Controla os estados dos botóns ou crea grupos de botóns para máis compoñentes como barras de ferramentas.

Estado

Engadir data-loading-text="Loading..."para usar un estado de carga nun botón.

Esta función está obsoleta desde a versión 3.3.5 e eliminouse na versión 4.

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

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

Conmutador único

Engadir data-toggle="button"para activar a alternancia nun só botón.

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

Caixa de verificación / Radio

Engade data-toggle="buttons"a unha .btn-groupcaixa de verificación ou entradas de radio para activar a alternancia nos seus respectivos estilos.

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

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

Métodos

$().button('toggle')

Alterna o estado push. Dálle ao botón a aparencia de que foi activado.

$().button('reset')

Restablece o estado do botón: cambia o texto polo texto orixinal. Este método é asíncrono e volve antes de que se complete o restablecemento.

$().button(string)

Cambia o texto a calquera estado de texto definido por datos.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Colapsar collapse.js

Complemento flexible que utiliza un puñado de clases para facilitar o comportamento de alternar.

Exemplo

Fai clic nos botóns seguintes para mostrar e ocultar outro elemento mediante os cambios de clase:

• .collapseoculta o contido
• .collapsingaplícase durante as transicións
• .collapse.inmostra o contido

Podes usar unha ligazón co hrefatributo ou un botón co data-targetatributo. En ambos os casos, data-toggle="collapse"é necesario.

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

Exemplo de acordeón

Amplíe o comportamento de contraer predeterminado para crear un acordeón co compoñente do panel.

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

Tamén é posible intercambiar .panel-bodys por .list-groups.

Uso

O complemento de colapso utiliza algunhas clases para xestionar o traballo pesado:

• .collapseoculta o contido
• .collapse.inmostra o contido
• .collapsingengádese cando comeza a transición e elimínase cando remata

Estas clases pódense atopar en component-animations.less.

A través de atributos de datos

Só ten que engadir data-toggle="collapse"e data-targeta ao elemento para asignar automaticamente o control dun elemento plegable. O data-targetatributo acepta un selector CSS ao que aplicar o contraer. Asegúrate de engadir a clase collapseao elemento contraíble. Se queres que se abra por defecto, engade a clase adicional in.

Para engadir unha xestión de grupos de tipo acordeón a un control plegable, engade o atributo de datos data-parent="#selector". Consulta a demostración para ver isto en acción.

Vía JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-parent="".

Métodos

.collapse(options)

Activa o teu contido como elemento plegable. Acepta opcións opcionais object.

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

.collapse('toggle')

Alterna un elemento plegable para mostrar ou ocultar. Regresa ao interlocutor antes de que se amosase ou escondese o elemento plegable (é dicir, antes de que se produza o evento shown.bs.collapseou ).hidden.bs.collapse

.collapse('show')

Mostra un elemento plegable. Volve ao interlocutor antes de que se amosara realmente o elemento plegable (é dicir, antes de shown.bs.collapseque se produza o evento).

.collapse('hide')

Oculta un elemento plegable. Volve ao interlocutor antes de que o elemento plegable se escondese (é dicir, antes de hidden.bs.collapseque se produza o evento).

Eventos

A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.

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

Carrusel carousel.js

Un compoñente de presentación de diapositivas para percorrer elementos, como un carrusel. Non se admiten os carrusels anidados.

Exemplos

Anterior A continuación

<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ítulos opcionais

Engade subtítulos ás túas diapositivas facilmente co .carousel-captionelemento de calquera .item. Coloca case calquera HTML opcional dentro e aliñarase e formatarase automaticamente.

Etiqueta da primeira diapositiva

Nulla vitae elit libero, a pharetra augue mollis interdum.

Etiqueta da segunda diapositiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiqueta da terceira diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Anterior A continuación

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

Uso

Múltiples carruseles

Os carrusels requiren o uso dun idrecipiente no exterior (o .carousel) para que os controis do carrusel funcionen correctamente. Cando engadas varios carrusels ou cambies o carrusel dun carrusel id, asegúrate de actualizar os controis pertinentes.

A través de atributos de datos

Usa atributos de datos para controlar facilmente a posición do carrusel. data-slideacepta as palabras clave prevou next, que altera a posición da diapositiva en relación coa súa posición actual. Alternativamente, úsao data-slide-topara pasar un índice de diapositivas en bruto ao carrusel data-slide-to="2", que cambia a posición da diapositiva a un índice concreto que comeza por 0.

O data-ride="carousel"atributo úsase para marcar un carrusel como animación a partir da carga da páxina. Non se pode usar en combinación coa inicialización explícita de JavaScript (redundante e innecesaria) do mesmo carrusel.

Vía JavaScript

Chamar ao carrusel manualmente con:

$('.carousel').carousel()

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-interval="".

Métodos

.carousel(options)

Inicia o carrusel cunhas opcións opcionais objecte comeza a percorrer os elementos.

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

.carousel('cycle')

Percorre os elementos do carrusel de esquerda a dereita.

.carousel('pause')

Impide que o carrusel circule por elementos.

.carousel(number)

Cicla o carrusel a un cadro particular (baseado en 0, semellante a unha matriz).

.carousel('prev')

Ciclos ao elemento anterior.

.carousel('next')

Ciclos ao seguinte elemento.

Eventos

A clase de carrusel de Bootstrap expón dous eventos para conectarse á funcionalidade do carrusel.

Ambos eventos teñen as seguintes propiedades adicionais:

• direction: A dirección na que se despraza o carrusel ( "left"ou ben "right").
• relatedTarget: o elemento DOM que se está a colocar como elemento activo.

Todos os eventos do carrusel desenvólvense no propio carrusel (é dicir, no <div class="carousel">).

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

Afixo affix.js

Exemplo

O complemento de afixos activa position: fixed;e desactiva, emulando o efecto atopado con position: sticky;. A subnavegación da dereita é unha demostración en directo do complemento de afixos.

Uso

Use o complemento de afixos mediante atributos de datos ou manualmente co seu propio JavaScript. En ambas situacións, debes proporcionar CSS para o posicionamento e o ancho do teu contido adxunto.

Nota: Non use o complemento de afixos nun elemento contido nun elemento relativamente posicionado, como unha columna tirada ou empuxada, debido a un erro de renderizado de Safari .

Posicionamento mediante CSS

O complemento de afixos alterna entre tres clases, cada unha representando un estado particular: .affix, .affix-top, e .affix-bottom. Debes proporcionar os estilos, con excepción de position: fixed;on .affix, para estas clases ti mesmo (independentemente deste complemento) para xestionar as posicións reais.

Así é como funciona o complemento de afixos:

1. Para comezar, o complemento engádese .affix-toppara indicar que o elemento está na súa posición superior. Neste momento, non se require ningún posicionamento CSS.
2. Desprazándose ata o elemento que quere colocar debería activar a colocación real. Aquí é onde se .affixsubstitúe .affix-tope se establece position: fixed;(proporcionado polo CSS de Bootstrap).
3. Se se define un desplazamento inferior, desprazarse máis alá del debería substituír .affixpor .affix-bottom. Dado que as compensacións son opcionais, a configuración dun require que configures o CSS adecuado. Neste caso, engádese position: absolute;cando sexa necesario. O complemento usa o atributo de datos ou a opción JavaScript para determinar onde colocar o elemento desde alí.

Sigue os pasos anteriores para configurar o teu CSS para calquera das opcións de uso que aparecen a continuación.

A través de atributos de datos

Para engadir facilmente un comportamento de afixo a calquera elemento, só tes que engadirdata-spy="affix" ao elemento que queres espiar. Use compensacións para definir cando cambiar a fixación dun elemento.

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

Vía JavaScript

Chame ao complemento de afixos mediante JavaScript:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-offset-top="200".

Métodos

.affix(options)

Activa o teu contido como contido adxunto. Acepta opcións opcionais object.

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

.affix('checkPosition')

Recalcula o estado do afixo en función das dimensións, posición e posición de desprazamento dos elementos relevantes. As clases .affix, .affix-top, e .affix-bottomengádense ou elimínanse do contido axustado segundo o novo estado. Este método cómpre chamar sempre que se cambien as dimensións do contido adxunto ou do elemento de destino, para garantir o posicionamento correcto do contido adxunto.

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

Eventos

O complemento de afixos de Bootstrap expón algúns eventos para conectarse á funcionalidade de afixos.