Sobre os modais

Unha versión simplificada, pero flexible, do complemento modal de javascript tradicional con só a funcionalidade mínima necesaria e os valores predeterminados intelixentes.

Exemplo estático

A continuación móstrase un modal renderizado de forma estática.

Demo en directo

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

Usando bootstrap-modal

Chame ao modal a través de javascript:

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

Opcións

Marcado

Podes activar os modais na túa páxina facilmente sen ter que escribir unha soa liña de javascript. Só ten que configurar data-toggle="modal"un elemento de controlador cun data-target="#foo"ou href="#foo"que corresponda a un identificador de elemento modal e, cando se faga clic, iniciará o seu modal.

Ademais, para engadir opcións á túa instancia modal, só tes que incluílas como atributos de datos adicionais tanto no elemento de control como no propio marcado modal.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Iniciar modal </a>    

<div class = "modal" id = "myModal" >  
  <div class = "encabezado-modal" > 
    <button class = "close" data-dismiss = "modal" > × </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>

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

Sobre os menús despregables

Engade menús despregables a case calquera cousa en Bootstrap con este sinxelo complemento. Bootstrap presenta compatibilidade completa do menú despregable na barra de navegación, as pestanas e as pílulas.

Exemplos

Fai clic nas ligazóns de navegación do menú despregable na barra de navegación e nas pílulas de abaixo para probar os menús despregables.

• Ligazón regular
• Despregar menú
  • Action
  • Another action
  • Something else here
  • Separated link
• Menú despregable 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Menú despregable 3
  • Action
  • Another action
  • Something else here
  • Separated link

Usando bootstrap-dropdown.js

Chame aos menús despregables mediante javascript:

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

Marcado

Para engadir rapidamente a funcionalidade do menú despregable a calquera elemento, só tes que engadir data-toggle="dropdown"e calquera menú despregable de arranque válido activarase automaticamente.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Ligazón normal </a></li>  
  <li class = "menú desplegable" id = "menú1" >  
    <a class = "dropdown-toggle" data-toggle = "menú desplegable" href = "#menu1" >   
      Despregar menú
      <b class = "caret" ></b> 
    </a>
    <ul class = "menú desplegable" > 
      <li><a href = "#" > Acción </a></li> 
      <li><a href = "#" > Outra acción </a></li> 
      <li><a href = "#" > Aquí hai outra cousa </a></li> 
      <li class = "divisor" ></li> 
      <li><a href = "#" > Ligazón separada </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "menú desplegable" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Despregar menú
      <b class = "caret" ></b> 
    </a>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Métodos

$().menú desplegable()

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

O complemento ScrollSpy serve para actualizar automaticamente os obxectivos de navegación en función da posición do desprazamento.

Exemplo de barra de navegación con scrollspy

Desprázate pola área de abaixo e mira a actualización da navegación. Tamén se destacarán os subelementos do menú despregable. Próbao!

Usando bootstrap-scrollspy.js

Chame ao scrollspy a través de javascript:

$ ( '#navbar' ). scrollspy ()

Marcado

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

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

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

Eventos

Este complemento engade funcións de pestanas e pílulas rápidas e dinámicas para a transición a través do contido local.

Exemplos de pestanas

Fai clic nas pestanas de abaixo para alternar entre os paneis ocultos, mesmo a través dos menús despregables.

• Casa
• Perfil
• Despregar menú
  • @fat
  • @mdo

Usando bootstrap-tab.js

Activa as pestanas con tabulacións mediante 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 navegación por pestanas ou pílulas sen escribir ningún javascript simplemente especificando data-toggle="tab"ou data-toggle="pill"nun elemento. Engadindo as clases nave nav-tabsá pestana ulaplicarase o estilo da pestana de arranque.

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

Acerca de Tooltips

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

Exemplo de uso de Tooltips

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

Usando bootstrap-tooltip.js

Activa a información sobre ferramentas mediante javascript:

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

Opcións

Marcado

Por razóns de rendemento, a información sobre ferramentas e as apis de datos popover 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' )

Sobre popovers

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

* Require que se inclúa a información sobre ferramentas

Exemplo de popover do rato

Pasa o rato sobre o botón para activar o popover.

Usando bootstrap-popover.js

Activar popovers mediante javascript:

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

Opcións

Marcado

Por razóns de rendemento, a información sobre ferramentas e as apis de datos popover 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' )

Sobre as alertas

O complemento de alerta é unha pequena clase para engadir unha funcionalidade próxima ás alertas.

Alertas de exemplo

O complemento de alertas funciona en mensaxes de alerta regulares e bloquea mensaxes.

Usando bootstrap-alert.js

Activar a eliminación 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…
})

Sobre

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.

Exemplos de usos

Use o complemento de botóns para os estados e os alternadores.

Usando bootstrap-button.js

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.

<!-- Engade data-toggle="button" para activar a alternancia nun só botón -->
<button class = "btn" data-toggle = "button" > Alternancia única </button>  
 
<!-- Engadir 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 class = "btn" > Esquerda </button> 
  <button class = "btn" > Medio </button> 
  <button class = "btn" > Dereita </button> 
</div>
 
<!-- Engadir data-toggle="buttons-radio" para alternar o estilo de radio en btn-group -->
<div class = "btn-group" data-toggle = "botóns-radio" >  
  <button class = "btn" > Esquerda </button> 
  <button class = "btn" > Medio </button> 
  <button class = "btn" > Dereita </button> 
</div>

Métodos

$().button('alternar')

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

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

Usando bootstrap-collapse.js

Activar mediante javascript:

$ ( ".colapso" ). colapsar ()

Opcións

Marcado

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.

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

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

Sobre

Un complemento xenérico para percorrer elementos en bicicleta. Un carrusel.

Exemplo de carrusel

Mira a presentación de diapositivas a continuación.

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.

Segunda etiqueta en 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.

Terceira etiqueta de 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.

‹ ›

Usando bootstrap-carousel.js

Chamar a través de javascript:

$ ( '.carrusel' ). carrusel ()

Opcións

Marcado

Os atributos de datos úsanse para os controles anteriores e seguintes. Consulte o exemplo de marcado a continuación.

<div id = "myCarousel" class = "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>

Métodos

.carousel(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')

Evita que o carrusel pase 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.

.carousel('seguinte')

Ciclos ao seguinte elemento.

Eventos

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

Sobre

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

Exemplo

Comeza a escribir no campo de abaixo para mostrar os resultados de teclear.

Usando bootstrap-typeahead.js

Chame ao typeahead mediante javascript:

$ ( '.typeahead' ). teclear ()

Opcións

Marcado

Engade atributos de datos para rexistrar un elemento coa funcionalidade typeahead.

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

Métodos

.typeahead(opcións)

Inicializa unha entrada cunha tipografía.