Individual ou compilado

Os complementos pódense incluír individualmente (aínda que algúns teñen dependencias obrigatorias) ou todos á vez. Tanto bootstrap.js como bootstrap.min.js conteñen todos os complementos nun único ficheiro.

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 corpo espazado con "data-api". Isto parece isto:

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

$ ( 'corpo' ). 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" ). botón ( "alternar" ). addClass ( "graxa" )

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 () // inicializado con valores predeterminados                       
$ ( "#myModal" ). modal ({ keyboard : false }) // inicializado sen teclado     
$ ( "#myModal" ). modal ( 'mostrar' ) // inicializa e invoca show inmediatamente                

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

Eventos

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

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

$ ( '#myModal' ). on ( 'mostrar' , función ( e ) {   
    se (! datos ) devolve e . preventDefault () // impide que se mostre o modal   
})

Sobre as transicións

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

Casos de uso

Algúns exemplos do complemento de transición:

• Deslizamento ou esvaecemento en modais
• Pestanas esvaecidas
• Esvaecemento de alertas
• Paneles de carrusel deslizantes

Exemplos

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

Exemplo estático

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

<div class = "esvanecemento de ocultación modal" > 
  <div class = "encabezado-modal" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Cabeceira modal </h3>
  </div>
  <div class = "corpo-modal" > 
    <p> Un bo corpo... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Pechar </a>  
    <a href = "#" class = "btn btn-primary" > Gardar cambios </a>  
  </div>
</div>

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.

<!-- Botón para activar modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Iniciar demostración modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "encabezado-modal" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Cabeceira modal </h3> 
  </div>
  <div class = "corpo-modal" > 
    <p> Un bo corpo... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Pechar </button>   
    <button class = "btn btn-primary" > Garda os cambios </button> 
  </div>
</div>

Uso

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" > Iniciar modal </button>   

Vía JavaScript

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

$ ( '#myModal' ). modal ( opcións )

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(opcións)

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

$ ( '#myModal' ). modal ({
  teclado : falso 
})

.modal('alternar')

Alterna manualmente un modal.

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

.modal('mostrar')

Abre manualmente un modal.

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

.modal('ocultar')

Oculta manualmente un modal.

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

Eventos

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

$ ( '#myModal' ). on ( 'oculto' , función () {   
  // facer algo…
})

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

Uso

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 = "menú desplegable" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Activador do menú despregable </a>   
  <ul class = "menú desplegable" role = "menú" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Para manter os URL intactos, utiliza o data-targetatributo en lugar de href="#".

<div class = "menú desplegable" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Despregar menú
    <b class = "caret" ></b> 
  </a>
  <ul class = "menú desplegable" role = "menú" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Vía JavaScript

Chame aos menús despregables mediante JavaScript:

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

Opcións

Ningún

Métodos

$().menú desplegable('alternar')

Unha API programática para alternar menús para unha determinada barra de navegación ou navegación por pestanas.

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

A través de atributos de datos

Para engadir facilmente o comportamento scrollspy á túa navegación da barra superior, só tes que engadir data-spy="scroll"ao elemento que queres espiar (normalmente este sería o corpo) e data-target=".navbar"seleccionar o navegador que queres usar. Quererá usar scrollspy cun .navcompoñente.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Vía JavaScript

Chame ao scrollspy mediante JavaScript:

$ ( '#navbar' ). scrollspy ()

Métodos

.scrollspy('actualizar')

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"]' ). cada ( función () {  
  var $spy = $ ( isto ). scrollspy ( 'actualizar' )
});

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

Exemplos de pestanas

Engade unha funcionalidade de pestanas rápidas e dinámicas para a transición a través dos paneis de contido local, incluso a través dos menús despregables.

Uso

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

$ ( '#myTab a' ). prema ( función ( e ) {  
  e . preventDefault ();
  $ ( este ). pestana ( 'mostrar' );
})

Podes activar pestanas individuais de varias maneiras:

$ ( '#myTab a[href="#profile"]' ). pestana ( 'mostrar' ); // Selecciona a pestana polo nome 
$ ( '#myTab a:first' ). pestana ( 'mostrar' ); // Selecciona a primeira pestana 
$ ( '#myTab a:last' ). pestana ( 'mostrar' ); // Selecciona a última pestana 
$ ( '#myTab li:eq(2) a' ). pestana ( 'mostrar' ); // Selecciona a terceira pestana (indexada 0) 

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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Inicio </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mensaxes </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Configuración </a></li>  
</ul>

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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Inicio </a></li>  
  <li><a href = "#profile" > Perfil </a></li> 
  <li><a href = "#messages" > Mensaxes </a></li> 
  <li><a href = "#settings" > Configuración </a></li> 
</ul>
 
<div class = "contido da pestana" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "perfil" > ... </div>  
  <div class = "tab-pane" id = "mensaxes" > ... </div>  
  <div class = "tab-pane" id = "configuración" > ... </div>  
</div>
 
<script>
  $ ( función () {  
    $ ( '#myTab a:last' ). pestana ( 'mostrar' );
  })
</script>

Eventos

$ ( 'a[data-toggle="tab"]' ). on ( 'mostrado' , función ( e ) {   
  e . destino // pestana activada
  e . relatedTarget // pestana anterior
})

Exemplos

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.

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

Catro direccións

Uso

Activa a información sobre ferramentas mediante JavaScript:

$ ( '#exemplo' ). información sobre ferramentas ( opcións )

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

Marcado

Por razóns de rendemento, a información sobre ferramentas e as apis de datos emergentes están activadas. Se queres usalas, só tes que especificar unha opción de selección.

<a href = "#" rel = "tooltip" title = "primeira información sobre ferramentas" > pasa o rato sobre min </a>   

Métodos

$().información sobre ferramenta(opcións)

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

.tooltip('mostrar')

Revela a información sobre ferramentas dun elemento.

$ ( '#elemento' ). información sobre ferramentas ( 'mostrar' )

.tooltip('ocultar')

Oculta a información sobre ferramentas dun elemento.

$ ( '#elemento' ). información sobre ferramentas ( 'ocultar' )

.tooltip('alternar')

Alterna a información sobre ferramentas dun elemento.

$ ( '#elemento' ). información sobre ferramentas ( 'alternar' )

.tooltip('destruír')

Oculta e destrúe a información sobre ferramentas dun elemento.

$ ( '#elemento' ). información sobre ferramentas ( 'destruír' )

Exemplos

Engade pequenas superposicións de contido, como as do iPad, a calquera elemento para albergar información secundaria. Pasa o rato sobre o botón para activar o popover. Require que se inclúa Tooltip .

Popover estático

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

Non se mostra ningún marcado xa que se xeran popovers a partir de JavaScript e o contido dun dataatributo.

Demo en directo

Catro direccións

Uso

Activar popovers mediante JavaScript:

$ ( '#exemplo' ). popover ( opcións )

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

Marcado

Por razóns de rendemento, a información sobre ferramentas e as apis de datos emergentes están activadas. Se queres usalas, só tes que especificar unha opción de selección.

Métodos

$().popover(opcións)

Inicia os popovers para unha colección de elementos.

.popover('mostrar')

Revela un popover de elementos.

$ ( '#elemento' ). popover ( 'mostrar' )

.popover('ocultar')

Oculta un popover de elementos.

$ ( '#elemento' ). popover ( 'ocultar' )

.popover('alternar')

Alterna un popover de elementos.

$ ( '#elemento' ). popover ( 'alternar' )

.popover('destruír')

Oculta e destrúe o popover dun elemento.

$ ( '#elemento' ). popover ( 'destruír' )

Alertas de exemplo

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

Uso

Activar a descarte dunha alerta mediante JavaScript:

$ ( ".alerta" ). alerta ()

Marcado

Só tes que engadir data-dismiss="alert"ao teu botón de peche para dar automaticamente unha función de peche de alerta.

<a class = "close" data-dismiss = "alerta" href = "#" > × </a>   

Métodos

$().alerta()

Envolve todas as alertas cunha funcionalidade próxima. Para que as túas alertas se animen cando estean pechadas, asegúrate de que xa teñan a clase .fadee aplicada..in

.alert('pechar')

Pecha unha alerta.

$ ( ".alerta" ). alerta ( 'pechar' )

Eventos

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

$ ( '#a miña-alerta' ). ligar ( 'pechado' , función () {   
  // facer algo…
})

Exemplos de usos

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

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

<button type = "button" class = "btn btn-primary" data-loading-text = "Cargando..." > Estado de carga </button>   

Conmutador único

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

<button type = "button" class = "btn" data-toggle = "button" > Alternancia única </button>   

Caixa de verificación

Engade data-toggle="buttons-checkbox" para alternar o estilo da caixa de verificación en btn-group.

<div class = "btn-group" data-toggle = "botóns-caixa de verificación" >  
  <button type = "button" class = "btn" > Esquerda </button>  
  <button type = "button" class = "btn" > Medio </button>  
  <button type = "button" class = "btn" > Dereita </button>  
</div>

Radio

Engade data-toggle="buttons-radio" para cambiar o estilo de radio en btn-group.

<div class = "btn-group" data-toggle = "botóns-radio" >  
  <button type = "button" class = "btn" > Esquerda </button>  
  <button type = "button" class = "btn" > Medio </button>  
  <button type = "button" class = "btn" > Dereita </button>  
</div>

Uso

Activar botóns mediante JavaScript:

$ ( '.nav-tabs' ). botón ()

Marcado

Os atributos de datos son integrantes do complemento do botón. Consulte o código de exemplo a continuación para os distintos tipos de marcado.

Opcións

Ningún

Métodos

$().button('alternar')

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

<button type = "button" class = "btn" data-toggle = "botón" > … </button>    

$().button('cargando')

Establece o estado do botón para cargar: desactiva o botón e cambia o texto polo texto de carga. O texto de carga debe definirse no elemento botón mediante o atributo data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "cargando cousas..." > ... </button>    

$().button('restablecer')

Restablece o estado do botón: cambia o texto polo texto orixinal.

$().button(cadea)

Restablece o estado do botón: cambia o texto por calquera estado de texto definido por datos.

<button type = "button" class = "btn" data-complete-text = "acabado!" > ... </button>    
<script>
  $ ( '.btn' ). botón ( 'completo' )
</script>

Sobre

Obtén estilos básicos e soporte flexible para compoñentes plegables como acordeóns e navegación.

* Require que se inclúa o complemento Transitions.

Exemplo de acordeón

Usando o complemento de contraer, creamos un widget sinxelo de estilo acordeón:

<div class = "acordeón" id = "acordeón2" >  
  <div class = "grupo de acordeóns" > 
    <div class = "acordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Elemento do grupo plegable #1
      </a>
    </div>
    <div id = "collapseOne" class = "colapso do corpo de acordeón en" >  
      <div class = "acordeón interior" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "grupo de acordeóns" > 
    <div class = "acordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "contraer" data-parent = "#accordion2" href = "#collapseTwo" >    
        Elemento do grupo plegable #2
      </a>
    </div>
    <div id = "collapseTwo" class = "colapso do corpo de acordeón" >  
      <div class = "acordeón interior" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Tamén podes usar o complemento sen o marcado de acordeón. Fai un botón para alternar a expansión e o colapso doutro elemento.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  simple plegable
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Uso

A través de atributos de datos

Só ten que engadir data-toggle="collapse"e un data-targetelemento para asignar automaticamente o control dun elemento plegable. O data-targetatributo acepta un selector css ao que aplicar o colapso. 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:

$ ( ".colapso" ). colapsar ()

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(opcións)

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

$ ( '#myCollapsible' ). contraer ({
  alternar : falso 
})

.collapse('alternar')

Alterna un elemento plegable para mostrar ou ocultar.

.collapse('mostrar')

Mostra un elemento plegable.

.collapse('ocultar')

Oculta un elemento plegable.

Eventos

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

$ ( '#myCollapsible' ). on ( 'oculto' , función () {   
  // facer algo…
})

Exemplo de carrusel

A seguinte presentación de diapositivas mostra un complemento xenérico e un compoñente para percorrer elementos como un carrusel.

Etiqueta da primeira miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "diapositiva do carrusel" >  
  <!-- Elementos do carrusel -->
  <div class = "carrusel-inner" > 
    <div class = "elemento activo" > … </div> 
    <div class = "elemento" > … </div> 
    <div class = "elemento" > … </div> 
  </div>
  <!-- Navegación do carrusel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "anterior" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "seguinte" > › </a>   
</div>

Uso

A través de atributos de datos

...

Vía JavaScript

Chamar ao carrusel manualmente con:

$ ( '.carrusel' ). carrusel ()

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

.carrusel(opcións)

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

$ ( '.carrusel' ). carrusel ({
  intervalo : 2000 
})

.carousel('ciclo')

Percorre os elementos do carrusel de esquerda a dereita.

.carousel('pausa')

Impide que o carrusel circule por elementos.

.carrusel(número)

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

.carousel('anterior')

Ciclos ao elemento anterior.

.carrusel('seguinte')

Ciclos ao seguinte elemento.

Eventos

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

Exemplo

Un complemento básico e facilmente estendido para crear rapidamente tipografías elegantes con calquera entrada de texto do formulario.

<input type = "text" data-provide = "typeahead" >  

Uso

A través de atributos de datos

Engade atributos de datos para rexistrar un elemento coa funcionalidade typeahead como se mostra no exemplo anterior.

Vía JavaScript

Chame ao typeahead manualmente con:

$ ( '.typeahead' ). teclear ()

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

Métodos

.typeahead(opcións)

Inicializa unha entrada cunha tipografía.

Exemplo

A subnavegación da esquerda é unha demostración en directo do complemento de afixos.

Uso

A través de atributos de datos

Para engadir facilmente un comportamento de afixo a calquera elemento, só tes que engadir data-spy="affix"ao elemento que queres espiar. A continuación, use os desplazamentos para definir cando activar e desactivar a fixación dun elemento.

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

Vía JavaScript

Chame ao complemento de afixos mediante JavaScript:

$ ( '#navbar' ). afixo ()

Métodos

.affix('actualizar')

Ao usar afixos xunto coa engade ou eliminación de elementos do DOM, quererá chamar ao método de actualización:

$ ( '[data-spy="afixo"]' ). cada ( función () {  
  $ ( este ). afixo ( 'actualizar' )
});

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