JavaScript

Da vida aos compoñentes de Bootstrap, agora con 13 complementos jQuery personalizados.

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 espazo de nomes do corpo con `'data-api'`. Isto parece isto:

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

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

  1. $ ( ".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):

  1. $ ( "#myModal" ). modal () // inicializado con valores predeterminados
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // inicializado sen teclado
  3. $ ( "#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').

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.

  1. var bootstrapButton = $ . fn . botón . noConflict () // devolve $.fn.button ao valor previamente asignado
  2. $ . fn . bootstrapBtn = bootstrapButton // dálle a $().bootstrapBtn a funcionalidade de arranque

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.

  1. $ ( '#myModal' ). on ( 'mostrar' , función ( e ) {
  2. se (! datos ) devolve e . preventDefault () // deixa de mostrar o modal
  3. })

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 usando o compilado (ou minificado) bootstrap.js , non hai necesidade de incluír isto, 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é.

  1. <div class = "esvanecemento de ocultación modal" >
  2. <div class = "encabezado-modal" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Cabeceira modal </h3>
  5. </div>
  6. <div class = "corpo-modal" >
  7. <p> Un bo corpo... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Pechar </a>
  11. <a href = "#" class = "btn btn-primary" > Gardar cambios </a>
  12. </div>
  13. </div>

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.

  1. <!-- Botón para activar modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Iniciar demostración modal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "encabezado-modal" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Cabeceira modal </h3>
  9. </div>
  10. <div class = "corpo-modal" >
  11. <p> Un bo corpo... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Pechar </button>
  15. <button class = "btn btn-primary" > Garda os cambios </button>
  16. </div>
  17. </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.

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

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

Nome tipo por defecto descrición
pano de fondo booleano verdade Inclúe un elemento de fondo modal. Alternativamente, especifique staticun fondo que non peche o modal ao facer clic.
teclado booleano verdade Pecha o modal cando se preme a tecla Esc
mostrar booleano verdade Mostra o modal cando se inicializa.
remoto camiño falso

Se se proporciona un URL remoto, o contido cargarase mediante o loadmétodo de jQuery e inxectarase no ficheiro .modal-body. Se estás usando a API de datos, podes usar a hrefetiqueta alternativamente para especificar a fonte remota. A continuación móstrase un exemplo diso:

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

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

.modal('alternar')

Alterna manualmente un modal.

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

.modal('mostrar')

Abre manualmente un modal.

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

.modal('ocultar')

Oculta manualmente un modal.

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

Eventos

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

Evento Descrición
mostrar Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado Este evento desenvólvese cando o modal se fixo visible para o usuario (esperará a que se completen as transicións css).
ocultar Este evento desenvólvese inmediatamente cando hidese chamou ao método de instancia.
agochado Este evento desenvólvese cando o modal rematou de ocultarse ao usuario (esperará a que se completen as transicións css).
  1. $ ( '#myModal' ). on ( 'oculto' , función () {
  2. // facer algo…
  3. })

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.

@graxas

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antes de que esgotasen qui. Dereitos das bicicletas Tumblr da granxa á mesa. Anim keffiyeh carles cardigan. Fotomatón de Velit seitan mcsweeney 3 wolf moon irure. Suéter Cosby pantalóns curtos de vaquero lomo, sudadera con capucha williamsburg mínimo que probablemente non escoitou falar deles e cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuado acusamus, cred ironía biodiesel keffiyeh artesán ullamco consequat.

@mdo

Monopatín con bigote Veniam marfa, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camión de comida con camisola cosby tatuada, vinilo non freegan de mcsweeney. Lo-fi wes anderson +1 sartorial. Carles non exercicio estético quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

un

Occaecat commodo aliqua delectus. Fap cervexa artesanal deserunt monopatín ea. Os dereitos das bicicletas Lomo adipisicing banh mi, velit ea are next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS é adipisicing. Consectetur nisi DIY bolsa de mensaxería mínima. Cred ex in, delectus sustentable consectetur fanny pack iphone.

dous

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliché ironía, thundercats probablemente non escoitou falar deles consequat hoodie sen glute lo-fi fap aliquip. Traballe antes de que se esgotasen, terry richardson proident brunch non deixa de ter un suéter cosby e tamén un artesán helvético. Cardigan cervexa artesanal seitán readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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.

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

Vía JavaScript

Chame ao scrollspy mediante JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Aviso! As ligazóns da barra de navegación deben ter obxectivos de identificación resolubles. Por exemplo, un <a href="#home">home</a>debe corresponder a algo no dom como <div id="home"></div>.

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:

  1. $ ( '[data-spy="scroll"]' ). cada ( función () {
  2. var $spy = $ ( isto ). scrollspy ( 'actualizar' )
  3. });

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

Nome tipo por defecto descrición
compensar número 10 Píxeles para compensar desde arriba ao calcular a posición do desprazamento.

Eventos

Evento Descrición
activar Este evento desenvólvese sempre que o scrollspy activa un novo elemento.

Exemplos de pestanas

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

Denim cru que probablemente non escoitou falar deles shorts de jeans Austin. Nesciunt tofu stumptown aliqua, sintetizador retro cleanse. Bigote cliché tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Uso

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

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

Podes activar pestanas individuais de varias maneiras:

  1. $ ( '#myTab a[href="#profile"]' ). pestana ( 'mostrar' ); // Selecciona a pestana polo nome
  2. $ ( '#myTab a:first' ). pestana ( 'mostrar' ); // Selecciona a primeira pestana
  3. $ ( '#myTab a:last' ). pestana ( 'mostrar' ); // Selecciona a última pestana
  4. $ ( '#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 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.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Inicio </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mensaxes </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Configuración </a></li>
  6. </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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Inicio </a></li>
  3. <li><a href = "#profile" > Perfil </a></li>
  4. <li><a href = "#messages" > Mensaxes </a></li>
  5. <li><a href = "#settings" > Configuración </a></li>
  6. </ul>
  7.  
  8. <div class = "contido da pestana" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "perfil" > ... </div>
  11. <div class = "tab-pane" id = "mensaxes" > ... </div>
  12. <div class = "tab-pane" id = "configuración" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( función () {
  17. $ ( '#myTab a:last' ). pestana ( 'mostrar' );
  18. })
  19. </script>

Eventos

Evento Descrición
mostrar Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use event.targete event.relatedTargetpara apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
mostrado Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use event.targete event.relatedTargetpara apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'mostrado' , función ( e ) {
  2. e . destino // pestana activada
  3. e . relatedTarget // pestana anterior
  4. })

Exemplos

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.

Por razóns de rendemento, a información sobre ferramentas e as API de datos emergentes están activadas, o que significa que debes inicializalas por ti mesmo .

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

Pantalóns axustados seguinte nivel keffiyeh probablemente non escoitou falar deles. Fotomatón barba denim crudo tipografía bolsa de mensajería vegana stumptown. Seitan da granxa á mesa, o fixie de quinoa sustentable de mcsweeney de 8 bits American Apparel teñen un cambray de vinilo terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artesán realmente irónico calquera que sexa keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim café de orixe única viral.

Catro direccións

Suxestións sobre ferramentas en grupos de entrada

Ao usar consellos e popovers cos grupos de entrada de Bootstrap, terás que configurar a containeropción (documentada a continuación) para evitar efectos secundarios non desexados.


Uso

Activa a información sobre ferramentas mediante JavaScript:

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

Nome tipo por defecto descrición
animación booleano verdade aplique unha transición de fundido css á información sobre ferramentas
html booleano falso Insira html na información sobre ferramentas. Se é falso, empregarase o método de jquery textpara inserir contido no dom. Usa texto se estás preocupado polos ataques XSS.
colocación cadea | función 'arriba' como colocar a información sobre ferramentas - arriba | inferior | esquerda | certo
selector corda falso Se se proporciona un selector, os obxectos de información sobre ferramentas delegaranse nos obxectivos especificados.
título cadea | función '' valor de título predeterminado se a etiqueta `title` non está presente
disparador corda 'foco do rato' como se activa a información sobre ferramentas - fai clic en | pasar o rato | foco | manual. Teña en conta que pasa varios tipos de activadores, separados por espazos e por maiúsculas.
atraso número | obxecto 0

atrasar a mostra e ocultar a información sobre ferramentas (ms): non se aplica ao tipo de disparador manual

Se se proporciona un número, aplícase un atraso tanto para ocultar como para mostrar

A estrutura do obxecto é:delay: { show: 500, hide: 100 }

envase cadea | falso falso

Engade a información sobre ferramentas a un elemento específicocontainer: 'body'

Aviso! Alternativamente, pódense especificar opcións para consellos individuais mediante o uso de atributos de datos.

Marcado

  1. <a href = "#" data-toggle = "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.

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

.tooltip('ocultar')

Oculta a información sobre ferramentas dun elemento.

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

.tooltip('alternar')

Alterna a información sobre ferramentas dun elemento.

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

.tooltip('destruír')

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

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

Parte superior popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover á dereita

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fondo popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover á esquerda

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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:

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

Nome tipo por defecto descrición
animación booleano verdade aplique unha transición de fundido css á información sobre ferramentas
html booleano falso Insira html no popover. Se é falso, empregarase o método de jquery textpara inserir contido no dom. Usa texto se estás preocupado polos ataques XSS.
colocación cadea | función 'correcto' como colocar o popover - arriba | inferior | esquerda | certo
selector corda falso se se proporciona un selector, os obxectos de información sobre ferramentas delegaranse nos obxectivos especificados
disparador corda 'click' como se activa o popover - fai clic en | pasar o rato | foco | manual
título cadea | función '' valor de título predeterminado se o atributo `title` non está presente
contido cadea | función '' valor de contido predeterminado se o atributo `data-content` non está presente
atraso número | obxecto 0

atraso para mostrar e ocultar o popover (ms): non se aplica ao tipo de activación manual

Se se proporciona un número, aplícase un atraso tanto para ocultar como para mostrar

A estrutura do obxecto é:delay: { show: 500, hide: 100 }

envase cadea | falso falso

Engade o popover a un elemento específicocontainer: 'body'

Aviso! Opcións para popovers individuais pódense especificar alternativamente mediante o uso de atributos de datos.

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.

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

.popover('ocultar')

Oculta un popover de elementos.

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

.popover('alternar')

Alterna un popover de elementos.

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

.popover('destruír')

Oculta e destrúe o popover dun elemento.

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

Alertas de exemplo

Engade a funcionalidade de descartar a todas as mensaxes de alerta con este complemento.

Santo guacamole! É mellor que te comprobes, non tes demasiado bo aspecto.

¡Oh! Tes un erro!

Cambia isto e outro e téntao de novo. Duis mollis, is not commodo luctus, ninsi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tome esta acción Ou fai isto


Uso

Activar a descarte dunha alerta mediante JavaScript:

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

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

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

Eventos

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

Evento Descrición
pechar Este evento desenvólvese inmediatamente cando closese chama ao método de instancia.
pechado Este evento desenvólvese cando se pechou a alerta (esperará a que se completen as transicións css).
  1. $ ( '#a miña-alerta' ). ligar ( 'pechado' , función () {
  2. // facer algo…
  3. })

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

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

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

Conmutador único

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

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

Caixa de verificación

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

  1. <div class = "btn-group" data-toggle = "botóns-caixa de verificación" >
  2. <button type = "button" class = "btn btn-primary" > Esquerda </button>
  3. <button type = "button" class = "btn btn-primary" > Medio </button>
  4. <button type = "button" class = "btn btn-primary" > Dereita </button>
  5. </div>

Radio

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

  1. <div class = "btn-group" data-toggle = "botóns-radio" >
  2. <button type = "button" class = "btn btn-primary" > Esquerda </button>
  3. <button type = "button" class = "btn btn-primary" > Medio </button>
  4. <button type = "button" class = "btn btn-primary" > Dereita </button>
  5. </div>

Uso

Activar botóns mediante JavaScript:

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

Aviso! Podes activar a alternancia automática dun botón usando o data-toggleatributo.
  1. <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.

  1. <button type = "button" class = "btn" data-loading-text = "cargando cousas..." > ... </button>
Aviso! Firefox mantén o estado desactivado nas cargas de páxinas . Unha solución para isto é usar autocomplete="off".

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

  1. <button type = "button" class = "btn" data-complete-text = "acabado!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). botón ( 'completo' )
  4. </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:

Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
  1. <div class = "acordeón" id = "acordeón2" >
  2. <div class = "grupo de acordeóns" >
  3. <div class = "acordeon-heading" >
  4. <a class = "accordion-toggle" data-toggle = "contraer" data-parent = "#accordion2" href = "#collapseOne" >
  5. Elemento do grupo plegable #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "colapso do corpo de acordeón en" >
  9. <div class = "acordeón interior" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "grupo de acordeóns" >
  15. <div class = "acordeon-heading" >
  16. <a class = "accordion-toggle" data-toggle = "contraer" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Elemento do grupo plegable #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "colapso do corpo de acordeón" >
  21. <div class = "acordeón interior" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. simple plegable
  3. </button>
  4.  
  5. <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:

  1. $ ( ".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="".

Nome tipo por defecto descrición
pai selector falso Se se selecciona, pecharanse todos os elementos contraíbles baixo o pai especificado cando se mostre este elemento contraíble. (semellante ao comportamento tradicional do acordeón)
alternar booleano verdade Alterna o elemento contraíble na invocación

Métodos

.collapse(opcións)

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

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

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

Evento Descrición
mostrar Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado Este evento desenvólvese cando un elemento de contraer se fixo visible para o usuario (esperará a que se completen as transicións css).
ocultar Este evento desenvólvese inmediatamente cando hidese chamou ao método.
agochado Este evento desenvólvese cando se ocultou ao usuario un elemento de contraer (esperará a que se completen as transicións css).
  1. $ ( '#myCollapsible' ). on ( 'oculto' , función () {
  2. // facer algo…
  3. })

Exemplo

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

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

Quererá configurar autocomplete="off"para evitar que os menús predeterminados do navegador aparezan sobre o menú despregable Bootstrap 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:

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

Nome tipo por defecto descrición
fonte matriz, función [ ] A fonte de datos para a consulta. Pode ser unha matriz de cadeas ou unha función. Á función pásanse dous argumentos, o queryvalor no campo de entrada e a processdevolución de chamada. A función pódese usar de forma sincrónica devolvendo a fonte de datos directamente ou de forma asíncrona mediante o processúnico argumento da devolución de chamada.
elementos número 8 O número máximo de elementos para mostrar no menú despregable.
minLonxitude número 1 A lonxitude mínima de caracteres necesaria antes de activar as suxestións de autocompletar
emparejador función insensible a maiúsculas e minúsculas O método usado para determinar se unha consulta coincide cun elemento. Acepta un único argumento, itemcontra o cal probar a consulta. Acceda á consulta actual con this.query. Devolve un booleano truese a consulta coincide.
clasificador función coincidencia exacta, diferencia entre
maiúsculas e
minúsculas
Método utilizado para ordenar os resultados de autocompletar. Acepta un único argumento itemse ten o alcance da instancia typeahead. Referencia a consulta actual con this.query.
actualizador función devolve o elemento seleccionado O método utilizado para devolver o elemento seleccionado. Acepta un único argumento, o iteme ten o alcance da instancia typeahead.
resaltador función resalta todas as coincidencias predeterminadas Método utilizado para resaltar os resultados de autocompletar. Acepta un único argumento iteme ten o alcance da instancia typeahead. Debería devolver html.

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.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Aviso! Debes xestionar a posición dun elemento fixado e o comportamento do seu pai inmediato. A posición está controlada por affix, affix-top, e affix-bottom. Lembra buscar un pai potencialmente contraído cando se activa o afixo xa que está eliminando contido do fluxo normal da páxina.

Vía JavaScript

Chame ao complemento de afixos mediante JavaScript:

  1. $ ( '#navbar' ). afixo ()

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

Nome tipo por defecto descrición
compensar número | función | obxecto 10 Píxeles para compensar da pantalla ao calcular a posición do desprazamento. Se se proporciona un só número, a compensación aplicarase tanto na dirección superior como na esquerda. Para escoitar unha única dirección ou varias compensacións únicas, só tes que proporcionar un obxecto offset: { x: 10 }. Usa unha función cando necesites proporcionar unha compensación dinámica (útil para algúns deseños sensibles).