JavaScript
Da vida aos compoñentes de Bootstrap con máis dunha ducia de complementos jQuery personalizados. Inclúeos todos facilmente ou un por un.
Da vida aos compoñentes de Bootstrap con máis dunha ducia de complementos jQuery personalizados. Inclúeos todos facilmente ou un por un.
Os complementos pódense incluír individualmente (usando os *.js
ficheiros individuais de Bootstrap) ou todos á vez (usando bootstrap.js
o minificado bootstrap.min.js
).
Ambos bootstrap.js
e bootstrap.min.js
conteñen todos os complementos nun único ficheiro. Inclúe só un.
Algúns complementos e compoñentes CSS dependen doutros complementos. Se inclúes complementos individualmente, asegúrate de comprobar estas dependencias nos documentos. Teña en conta tamén que todos os complementos dependen de jQuery (isto significa que jQuery debe incluírse antes dos ficheiros de complementos). Consulte o nosobower.json
para ver que versións de jQuery son compatibles.
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:
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:
Non use atributos de datos de varios complementos no mesmo elemento. Por exemplo, un botón non pode ter unha información sobre ferramentas e alternar un modal. Para facelo, use un elemento de envoltura.
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.
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):
Cada complemento tamén expón o seu construtor bruto nunha Constructor
propiedade: $.fn.popover.Constructor
. Se queres obter unha instancia de complemento en particular, obtén directamente desde un elemento: $('[rel="popover"]').data('popover')
.
Podes cambiar a configuración predeterminada dun complemento modificando o Constructor.DEFAULTS
obxecto do complemento:
Á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 .noConflict
ao complemento do que desexas reverter o valor.
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 preventDefault
funcionalidade. Isto proporciona a capacidade de deter a execución dunha acción antes de que comece.
Pódese acceder á versión de cada un dos complementos jQuery de Bootstrap a través da VERSION
propiedade do construtor do complemento. Por exemplo, para o complemento de información sobre ferramentas:
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.
Bootstrap non admite oficialmente bibliotecas JavaScript de terceiros como Prototype ou jQuery UI. A pesar .noConflict
dos eventos separados dos nomes, pode haber problemas de compatibilidade que teñas que solucionar por ti mesmo.
Para efectos de transición sinxelos, inclúa transition.js
unha 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í.
Transition.js é un axudante básico para transitionEnd
eventos, 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.
As transicións pódense desactivar globalmente usando o seguinte fragmento de JavaScript, que debe vir despois de cargarse transition.js
(ou bootstrap.js
ou bootstrap.min.js
, segundo o caso):
Os modais son sinxelos, pero flexibles, as solicitudes de diálogo coa funcionalidade mínima necesaria e os valores predeterminados intelixentes.
Asegúrate de non abrir un modal mentres outro aínda estea visible. Mostrar máis dun modal á vez require un código personalizado.
Tenta sempre colocar o código HTML dun modal nunha posición de nivel superior no teu documento para evitar que outros compoñentes afecten o aspecto e/ou a funcionalidade do modal.
Hai algunhas advertencias sobre o uso de modais en dispositivos móbiles. Consulte os nosos documentos de soporte do navegador para obter máis información.
Debido a como HTML5 define a súa semántica, o autofocus
atributo HTML non ten ningún efecto nos modais de Bootstrap. Para conseguir o mesmo efecto, use algún JavaScript personalizado:
Un modal renderizado con cabeceira, corpo e conxunto de accións no pé.
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.
Asegúrese de engadir role="dialog"
e aria-labelledby="..."
, facendo referencia ao título modal, a .modal
, e role="document"
ao .modal-dialog
propio.
Ademais, pode dar unha descrición do seu diálogo modal con aria-describedby
on .modal
.
Incorporar vídeos de YouTube en modais require JavaScript adicional que non está en Bootstrap para deter automaticamente a reprodución e moito máis. Consulta esta útil publicación de Stack Overflow para obter máis información.
Os modais teñen dous tamaños opcionais, dispoñibles mediante clases de modificadores para colocalos nun .modal-dialog
.
Para os modais que simplemente aparecen en lugar de desaparecer para ver, elimina a .fade
clase do teu marcado modal.
Para aproveitar o sistema de cuadrícula Bootstrap dentro dun modal, só tes que aniñar .row
s dentro do .modal-body
e despois usa as clases normais do sistema de grade.
Tes un montón de botóns que activan o mesmo modal, só con contidos lixeiramente diferentes? Use event.relatedTarget
e atributos HTMLdata-*
(posiblemente a través de jQuery ) para variar o contido do modal dependendo do botón que se premeu. Consulte os documentos sobre eventos modais para obter máis información sobre relatedTarget
,
O complemento modal alterna o teu contido oculto baixo demanda, mediante atributos de datos ou JavaScript. Tamén se engade .modal-open
ao <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.
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.
Chame a un modal con id myModal
cunha única liña de JavaScript:
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 ou a cadea'static' |
verdade | Inclúe un elemento de fondo modal. Alternativamente, especifique static un 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 | Esta opción está obsoleta desde a versión 3.3.0 e eliminouse na versión 4. Recomendamos no seu lugar usar un modelo do lado do cliente ou un marco de vinculación de datos, ou chamar a jQuery.load vostede mesmo. Se se proporciona un URL remoto, o contido cargarase unha vez a través do método de jQuery |
.modal(options)
Activa o teu contido como modal. Acepta opcións opcionais object
.
.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.modal
ou ).hidden.bs.modal
.modal('show')
Abre manualmente un modal. Volve ao interlocutor antes de que se amosara o modal (é dicir, antes de shown.bs.modal
que ocorra o evento).
.modal('hide')
Oculta manualmente un modal. Volve ao interlocutor antes de que se ocultase o modal (é dicir, antes de hidden.bs.modal
que se produza o evento).
.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.
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">
).
Tipo de evento | Descrición |
---|---|
mostrar.bs.modal | Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTarget propiedade do evento. |
mostrado.bs.modal | Este evento desenvólvese cando o modal se fixo visible para o usuario (esperará a que se completen as transicións CSS). Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTarget propiedade do evento. |
ocultar.bs.modal | Este evento desenvólvese inmediatamente cando hide se chamou ao método de instancia. |
oculto.bs.modal | Este evento desenvólvese cando o modal rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS). |
cargado.bs.modal | Este evento desenvólvese cando o modal cargou contido mediante a remote opción. |
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.
A través de atributos de datos ou JavaScript, o complemento despregable alterna o contido oculto (menús despregables) alternando a .open
clase 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.
Engadir data-toggle="dropdown"
a unha ligazón ou botón para alternar un menú despregable.
Para manter os URL intactos cos botóns de ligazón, utiliza o data-target
atributo en lugar de href="#"
.
Chame aos menús despregables mediante JavaScript:
data-toggle="dropdown"
aínda necesarioIndependentemente de se chamas ao teu menú despregable mediante JavaScript ou usas a API de datos, data-toggle="dropdown"
sempre é necesario que estea presente no elemento de activación do menú despregable.
Ningún
$().dropdown('toggle')
Alterna o menú despregable dunha determinada barra de navegación ou navegación por pestanas.
Todos os eventos do menú despregable desenvólvense no .dropdown-menu
elemento principal de '.
Todos os eventos do menú despregable teñen unha relatedTarget
propiedade, cuxo valor é o elemento de áncora alternante.
Tipo de evento | Descrición |
---|---|
mostrar.bs.menú despregable | Este evento desenvólvese inmediatamente cando se chama ao método show instance. |
mostrado.bs.menú despregable | Este evento desenvólvese cando o menú despregable se fixo visible para o usuario (esperará a que se completen as transicións CSS). |
ocultar.bs.menú despregable | Este evento desenvólvese inmediatamente cando se chamou ao método de ocultar instancia. |
hidden.bs.menús desplegable | Este evento desenvólvese cando o menú despregable rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS). |
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.
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.
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.
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.
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.
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.
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>
.
:visible
os elementos non obxectivoOs elementos de destino que non sexan :visible
segundo jQuery ignoraranse e os seus correspondentes elementos de navegación nunca se destacarán.
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 height
conxunto e overflow-y: scroll;
aplicado.
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-target
atributo co ID ou clase do elemento pai de calquera .nav
compoñente Bootstrap.
Despois de engadir position: relative;
o teu CSS, chama ao scrollspy mediante JavaScript:
.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:
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. |
Tipo de evento | Descrición |
---|---|
activar.bs.scrollspy | Este evento desenvólvese sempre que o scrollspy activa un novo elemento. |
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.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Este complemento estende o compoñente de navegación con pestanas para engadir áreas con pestanas.
Activa as pestanas con tabulacións a través de JavaScript (cada pestana debe activarse individualmente):
Podes activar pestanas individuais de varias maneiras:
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 nav
e nav-tabs
á pestana ul
aplicarase o estilo da pestana Bootstrap , mentres que engadindo as clases nav
e nav-pills
aplicarase o estilo de pílula .
Para que as pestanas se desvanezan, engádase .fade
a cada unha .tab-pane
. O primeiro panel de pestanas tamén debe .in
facer visible o contido inicial.
$().tab
Activa un elemento de pestana e un contenedor de contido. A pestana debería ter un nodo de contedores data-target
ou un href
nodo 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.tab
que se produza o evento).
Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:
hide.bs.tab
(na pestana activa actual)show.bs.tab
(na pestana por mostrar)hidden.bs.tab
(na pestana activa anterior, a mesma que para o hide.bs.tab
evento)shown.bs.tab
(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tab
evento)Se xa non estaba activa ningunha pestana, os eventos hide.bs.tab
e hidden.bs.tab
non se activarán.
Tipo de evento | Descrición |
---|---|
mostrar.bs.tab | Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use event.target e event.relatedTarget para orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente. |
mostrado.bs.tab | Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use event.target e event.relatedTarget para orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente. |
ocultar.bs.tab | Este evento desenvólvese cando se quere mostrar unha nova pestana (e, polo tanto, debe ocultarse a pestana activa anterior). Use event.target e event.relatedTarget para orientar a pestana activa actual e a nova pestana que estará activa en breve, respectivamente. |
hidden.bs.tab | Este evento desenvólvese despois de que se amose unha nova pestana (e polo tanto se oculta a pestana activa anterior). Use event.target e event.relatedTarget para apuntar á pestana activa anterior e á nova pestana activa, respectivamente. |
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.
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.
Hai catro opcións dispoñibles: arriba, dereita, inferior e aliñada á esquerda.
Por razóns de rendemento, a información sobre ferramentas e as apis de datos Popover están activadas, o que significa que debes inicializalas ti mesmo .
Unha forma de inicializar todas as suxestións dunha páxina sería seleccionalas polo seu data-toggle
atributo:
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:
O marcado necesario para unha información sobre ferramentas é só un data
atributo e title
no 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 top
polo complemento).
Ás veces quere engadir unha información sobre ferramentas a unha hiperligazón que envolve varias liñas. O comportamento predeterminado do complemento de información sobre ferramentas é centralo horizontal e verticalmente. Engade white-space: nowrap;
ás túas áncoras para evitar isto.
Cando utilice información sobre ferramentas sobre elementos dentro dun .btn-group
ou un .input-group
, ou sobre elementos relacionados coa táboa ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), terá que especificar a opción container: 'body'
(documentada a continuación) para evitar efectos secundarios non desexados (como o elemento que se amplía e/ ou perder as súas esquinas redondeadas cando se activa a información sobre ferramentas).
Para os usuarios que navegan cun teclado e, en particular, os usuarios de tecnoloxías de asistencia, só debería engadir información sobre ferramentas a elementos centrados no teclado, como ligazóns, controis de formulario ou calquera elemento arbitrario cun tabindex="0"
atributo.
Para engadir unha información sobre ferramentas a un elemento disabled
ou .disabled
, coloque o elemento dentro de a <div>
e aplíquelle a información sobre ferramentas <div>
.
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 |
envase | cadea | falso | falso | Engade a información sobre ferramentas a un elemento específico. Exemplo: |
atraso | número | obxecto | 0 | Atraso para mostrar e ocultar a información sobre ferramentas (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 é: |
html | booleano | falso | Insira HTML na información sobre ferramentas. text Se é falso, empregarase o método de jQuery para 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 | dereito | auto. Cando se usa unha función para determinar a colocación, chámase co nodo DOM da información sobre ferramentas como primeiro argumento e o nodo DOM do elemento desencadeante como segundo. O |
selector | corda | falso | Se se proporciona un selector, os obxectos de información sobre ferramentas delegaranse nos obxectivos especificados. Na práctica, utilízase para permitir que o contido HTML dinámico teña información sobre ferramentas engadidas. Vexa isto e un exemplo informativo . |
modelo | corda | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML base para usar ao crear a información sobre ferramentas. A información de ferramentas
O elemento de envoltura máis externo debería ter a |
título | cadea | función | '' | Valor predeterminado do título se Se se dá unha función, chamarase coa súa |
disparador | corda | 'foco do rato' | Como se activa a información sobre ferramentas: fai clic en | pasar o rato | foco | manual. Podes pasar varios disparadores; separalos cun espazo. manual non se pode combinar con ningún outro disparador. |
xanela | cadea | obxecto | función | { selector: 'corpo', recheo: 0} | Mantén a información sobre ferramentas dentro dos límites deste elemento. Exemplo: Se se dá unha función, chámase co nodo DOM do elemento desencadeante como único argumento. O |
Alternativamente, pódense especificar opcións para consellos individuais mediante o uso de atributos de datos, como se explicou anteriormente.
$().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.tooltip
que 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.
.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.tooltip
que se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas.
.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.tooltip
ou ). hidden.bs.tooltip
Isto considérase unha activación "manual" da información sobre ferramentas.
.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 selector
opción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.
Tipo de evento | Descrición |
---|---|
mostrar.bs.información | Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. |
mostrado.bs.información | Este evento desenvólvese cando a información sobre ferramentas se fixo visible para o usuario (esperará a que se completen as transicións CSS). |
ocultar.bs.información | Este evento desenvólvese inmediatamente cando hide se chamou ao método de instancia. |
información oculta.bs | Este evento desenvólvese cando a información sobre ferramentas rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS). |
inserido.bs.información | Este evento desenvólvese despois do show.bs.tooltip evento cando se engadiu o modelo de información sobre ferramentas ao DOM. |
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.
Os popovers requiren que o complemento de información sobre ferramentas estea incluído na súa versión de Bootstrap.
Por razóns de rendemento, a información sobre ferramentas e as apis de datos Popover están activadas, o que significa que debes inicializalas ti mesmo .
Unha forma de inicializar todos os popovers nunha páxina sería seleccionalos polo seu data-toggle
atributo:
Ao usar popovers en elementos dentro dun .btn-group
ou un .input-group
, ou en elementos relacionados coa táboa ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), terás que especificar a opción container: 'body'
(documentada a continuación) para evitar efectos secundarios non desexados (como o elemento que se amplía e/ ou perder as súas esquinas redondeadas cando se activa o popover).
Para engadir un popover a un elemento disabled
ou .disabled
, pon o elemento dentro de a <div>
e aplícalo <div>
no seu lugar.
Ás veces quere engadir un popover a un hipervínculo que envolve varias liñas. O comportamento predeterminado do complemento popover é centralo horizontal e verticalmente. Engade white-space: nowrap;
ás túas áncoras para evitar isto.
Hai catro opcións dispoñibles: arriba, dereita, inferior e aliñada á esquerda.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Use o focus
disparador para descartar popovers no seguinte clic que faga o usuario.
Para un comportamento adecuado entre navegadores e plataformas, debes usar a <a>
etiqueta, non a <button>
etiqueta, e tamén debes incluír os atributos role="button"
e .tabindex
Activar popovers mediante JavaScript:
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 ao popover |
envase | cadea | falso | falso | Engade o popover a un elemento específico. Exemplo: |
contido | cadea | función | '' | Valor de contido predeterminado se Se se dá unha función, chamarase coa súa |
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 é: |
html | booleano | falso | Insira HTML no popover. text Se é falso, empregarase o método de jQuery para 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 | dereito | auto. Cando se usa unha función para determinar a colocación, chámase co nodo DOM popover como primeiro argumento e o nodo DOM do elemento desencadeante como segundo. O |
selector | corda | falso | Se se proporciona un selector, os obxectos popover delegaranse nos obxectivos especificados. Na práctica, isto úsase para permitir que o contido HTML dinámico teña aparellos emergentes engadidos. Vexa isto e un exemplo informativo . |
modelo | corda | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML base para usar ao crear o popover. Os popovers Os popovers
O elemento de envoltura máis externo debería ter a |
título | cadea | función | '' | Valor predeterminado do título se Se se dá unha función, chamarase coa súa |
disparador | corda | 'click' | Como se activa o popover: fai clic en | pasar o rato | foco | manual. Podes pasar varios disparadores; separalos cun espazo. manual non se pode combinar con ningún outro disparador. |
xanela | cadea | obxecto | función | { selector: 'corpo', recheo: 0} | Mantén o popover dentro dos límites deste elemento. Exemplo: Se se dá unha función, chámase co nodo DOM do elemento desencadeante como único argumento. O |
As opcións para popovers individuais pódense especificar alternativamente mediante o uso de atributos de datos, como se explicou anteriormente.
$().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.popover
que 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.
.popover('hide')
Oculta o popover dun elemento. Volve ao interlocutor antes de que se ocultase o popover (é dicir, antes de hidden.bs.popover
que ocorra o evento). Isto considérase un desencadeamento "manual" do popover.
.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.popover
ou ). hidden.bs.popover
Isto considérase un desencadeamento "manual" do popover.
.popover('destroy')
Oculta e destrúe o popover dun elemento. Os popovers que usan a delegación (que se crean mediante a selector
opción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.
Tipo de evento | Descrición |
---|---|
mostrar.bs.popover | Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. |
mostrado.bs.popover | Este evento desenvólvese cando o popover se fixo visible para o usuario (esperará a que se completen as transicións CSS). |
ocultar.bs.popover | Este evento desenvólvese inmediatamente cando hide se chamou ao método de instancia. |
hidden.bs.popover | Este evento desenvólvese cando o popover rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS). |
inserido.bs.popover | Este evento desenvólvese despois do show.bs.popover evento cando o modelo popover foi engadido ao DOM. |
Engade a función de descartar a todas as mensaxes de alerta con este complemento.
Cando se utiliza un .close
botón, debe ser o primeiro fillo do .alert-dismissible
e ningún contido de texto pode aparecer antes no marcado.
Cambia isto ou 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.
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.
Para que as túas alertas usen a animación ao pechar, asegúrate de que xa teñan as clases .fade
e .in
aplicadas.
$().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 .fade
e .in
están presentes no elemento, a alerta desaparecerá antes de eliminarla.
O complemento de alerta de Bootstrap expón algúns eventos para conectarse á funcionalidade de alerta.
Tipo de evento | Descrición |
---|---|
pechar.bs.alerta | Este evento desenvólvese inmediatamente cando close se chama ao método de instancia. |
pechado.bs.alerta | Este evento desenvólvese cando se pechou a alerta (esperará a que se completen as transicións CSS). |
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.
Firefox persiste en estados de control de formularios (desactivación e verificación) nas cargas de páxina . Unha solución para isto é usar autocomplete="off"
. Vexa o erro de Mozilla #654072 .
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.
Polo feito desta demostración, estamos a usar data-loading-text
e $().button('loading')
, pero ese non é o único estado que podes usar. Vexa máis sobre isto a continuación na $().button(string)
documentación .
Engadir data-toggle="button"
para activar a alternancia nun só botón.
.active
earia-pressed="true"
Para os botóns activados previamente, debes engadir a .active
clase e o aria-pressed="true"
atributo a button
ti mesmo.
Engade data-toggle="buttons"
a unha .btn-group
caixa de verificación ou entradas de radio para activar a alternancia nos seus respectivos estilos.
.active
Para as opcións preseleccionadas, debes engadir a .active
clase á entrada de label
ti mesmo.
Se o estado marcado dun botón da caixa de verificación se actualiza sen activar un click
evento no botón (por exemplo, mediante <input type="reset">
ou mediante a configuración da checked
propiedade da entrada), terás que activar/desactivar a .active
clase na entrada label
.
$().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.
Complemento flexible que utiliza un puñado de clases para facilitar o comportamento de alternar.
O colapso require que o complemento de transicións estea incluído na súa versión de Bootstrap.
Fai clic nos botóns seguintes para mostrar e ocultar outro elemento mediante os cambios de clase:
.collapse
oculta o contido.collapsing
aplícase durante as transicións.collapse.in
mostra o contidoPodes usar unha ligazón co href
atributo ou un botón co data-target
atributo. En ambos os casos, data-toggle="collapse"
é necesario.
Amplíe o comportamento de contraer predeterminado para crear un acordeón co compoñente do panel.
Tamén é posible intercambiar .panel-body
s por .list-group
s.
Asegúrese de engadir aria-expanded
ao elemento de control. Este atributo define explícitamente o estado actual do elemento plegable para lectores de pantalla e tecnoloxías auxiliares similares. Se o elemento plegable está pechado por defecto, debería ter un valor de aria-expanded="false"
. Se configuraches o elemento plegable para que estea aberto de forma predeterminada usando a in
clase, configura aria-expanded="true"
o control. O complemento activará automaticamente este atributo segundo se abriu ou non o elemento contraíble.
Ademais, se o seu elemento de control está dirixido a un único elemento contraíble, é dicir, o data-target
atributo apunta a un id
selector, pode engadir un aria-controls
atributo adicional ao elemento de control, que conteña o id
elemento do elemento contraíble. Os lectores de pantalla modernos e tecnoloxías de asistencia similares fan uso deste atributo para ofrecer aos usuarios atallos adicionais para navegar directamente ao propio elemento plegable.
O complemento de colapso utiliza algunhas clases para xestionar o traballo pesado:
.collapse
oculta o contido.collapse.in
mostra o contido.collapsing
engádese cando comeza a transición e elimínase cando remataEstas clases pódense atopar en component-animations.less
.
Só ten que engadir data-toggle="collapse"
e data-target
a ao elemento para asignar automaticamente o control dun elemento plegable. O data-target
atributo acepta un selector CSS ao que aplicar o contraer. Asegúrate de engadir a clase collapse
ao 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.
Habilitar manualmente con:
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 proporciona un selector, pecharanse todos os elementos contraíbles baixo o pai especificado cando se mostre este elemento contraíble. (semellante ao comportamento do acordeón tradicional - depende da panel clase) |
alternar | booleano | verdade | Alterna o elemento contraíble na invocación |
.collapse(options)
Activa o teu contido como elemento plegable. Acepta opcións opcionais object
.
.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.collapse
ou ).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.collapse
que 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.collapse
que se produza o evento).
A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.
Tipo de evento | Descrición |
---|---|
mostrar.bs.colapso | Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. |
mostrado.bs.colapso | 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.bs.colapso | Este evento desenvólvese inmediatamente cando hide se chamou ao método. |
hidden.bs.colapso | Este evento desenvólvese cando se ocultou ao usuario un elemento de contraer (esperará a que se completen as transicións CSS). |
Un compoñente de presentación de diapositivas para percorrer elementos, como un carrusel. Non se admiten os carrusels anidados.
O compoñente do carrusel xeralmente non cumpre cos estándares de accesibilidade. Se precisas cumprir, considera outras opcións para presentar o teu contido.
Bootstrap usa exclusivamente CSS3 para as súas animacións, pero Internet Explorer 8 e 9 non admiten as propiedades CSS necesarias. Así, non hai animacións de transición de diapositivas cando se usan estes navegadores. Decidimos intencionadamente non incluír alternativas baseadas en jQuery para as transicións.
A .active
clase debe engadirse a unha das diapositivas. En caso contrario, o carrusel non estará visible.
As clases .glyphicon .glyphicon-chevron-left
e .glyphicon .glyphicon-chevron-right
non son necesariamente necesarias para os controis. Bootstrap ofrece .icon-prev
e .icon-next
como alternativas a Unicode simples.
Engade subtítulos ás túas diapositivas facilmente co .carousel-caption
elemento de calquera .item
. Coloca case calquera HTML opcional dentro e aliñarase e formatarase automaticamente.
Os carrusels requiren o uso dun id
recipiente 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.
Usa atributos de datos para controlar facilmente a posición do carrusel. data-slide
acepta as palabras clave prev
ou next
, que altera a posición da diapositiva en relación coa súa posición actual. Alternativamente, úsao data-slide-to
para 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.
Chamar ao carrusel manualmente con:
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=""
.
Nome | tipo | por defecto | descrición |
---|---|---|---|
intervalo | número | 5000 | A cantidade de tempo que transcorre entre o ciclo automático dun elemento. Se é falso, o carrusel non se moverá automaticamente. |
pausa | cadea | nulo | "pasar" | Se se establece en "hover" , detén o ciclo do carrusel activado mouseenter e retoma o ciclo do carrusel activado mouseleave . Se se define como null , pasar o rato sobre o carrusel non o deterá. |
envolver | booleano | verdade | Se o carrusel debe circular de forma continua ou ter paradas duras. |
teclado | booleano | verdade | Indica se o carrusel debe reaccionar aos eventos do teclado. |
.carousel(options)
Inicia o carrusel cunhas opcións opcionais object
e comeza a percorrer os elementos.
.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.
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">
).
Tipo de evento | Descrición |
---|---|
slide.bs.carrusel | Este evento desenvólvese inmediatamente cando slide se invoca o método de instancia. |
deslizar.bs.carrusel | Este evento desenvólvese cando o carrusel completou a súa transición de diapositivas. |
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.
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 .
O complemento de afixos alterna entre tres clases, cada unha representando un estado particular: .affix
, .affix-top
, e .affix-bottom
. Debe proporcionar os estilos, con excepción de position: fixed;
on .affix
, para estas clases vostede mesmo (independentemente deste complemento) para xestionar as posicións reais.
Así é como funciona o complemento de afixos:
.affix-top
para indicar que o elemento está na súa posición superior. Neste momento, non se require ningún posicionamento CSS..affix
substitúe .affix-top
e se establece position: fixed;
(proporcionado polo CSS de Bootstrap)..affix
por .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.
Para engadir facilmente un comportamento de afixo a calquera elemento, só tes que engadir data-spy="affix"
ao elemento que queres espiar. Use compensacións para definir cando cambiar a fixación dun elemento.
Chame ao complemento de afixos mediante JavaScript:
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 inferior. Para proporcionar unha compensación única, inferior e superior, basta con proporcionar un obxecto offset: { top: 10 } ou offset: { top: 10, bottom: 5 } . Use unha función cando necesite calcular dinámicamente unha compensación. |
obxectivo | selector | nodo | elemento jQuery | o window obxecto |
Especifica o elemento de destino do afixo. |
.affix(options)
Activa o teu contido como contido adxunto. Acepta opcións opcionais object
.
.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-bottom
engá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.
O complemento de afixos de Bootstrap expón algúns eventos para conectarse á funcionalidade de afixos.
Tipo de evento | Descrición |
---|---|
afixo.bs.afixo | Este evento desenvólvese inmediatamente antes de que se fixera o elemento. |
afixado.bs.afixo | Este evento desenvólvese despois de colocar o elemento. |
afixo-top.bs.afixo | Este evento desenvólvese inmediatamente antes de que o elemento se fixese na parte superior. |
afixado-arriba.bs.afixo | Este evento desenvólvese despois de colocar o elemento na parte superior. |
afixo-baixo.bs.afixo | Este evento desenvólvese inmediatamente antes de que o elemento se fixese na parte inferior. |
axustado-inferior.bs.afixo | Este evento desenvólvese despois de que o elemento se fixera na parte inferior. |