Sobre modals

Una versió simplificada, però flexible, del connector modal javascript tradicional amb només la funcionalitat mínima necessària i els valors predeterminats intel·ligents.

Exemple estàtic

A continuació es mostra un modal representat estàticament.

Demo en directe

Commuteu un modal mitjançant javascript fent clic al botó següent. Es lliscarà cap avall i s'esvaeix des de la part superior de la pàgina.

Utilitzant bootstrap-modal

Truqueu al modal mitjançant javascript:

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

Opcions

Marcatge

Podeu activar els modals a la vostra pàgina fàcilment sense haver d'escriure una sola línia de javascript. Només cal que configureu data-toggle="modal"un element del controlador amb un data-target="#foo"o href="#foo"que correspongui a un identificador d'element modal i, quan feu clic, llançarà el vostre modal.

A més, per afegir opcions a la vostra instància modal, només cal incloure-les com a atributs de dades addicionals a l'element de control o al propi marcatge modal.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Llança el modal </a>    

<div class = "modal" id = "myModal" >  
  <div class = "capçalera-modal" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> Capçalera modal </h3>
  </div>
  <div class = "cos modal" > 
    <p> Un bon cos... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tanca </a>  
    <a href = "#" class = "btn btn-primary" > Desa els canvis </a>  
  </div>
</div>

Mètodes

.modal (opcions)

Activa el teu contingut com a modal. Accepta opcions opcionals object.

$ ( '#myModal' ). modal ({
  teclat : fals 
})

.modal('canviar')

Commuta manualment un modal.

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

.modal('mostrar')

Obre manualment un modal.

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

.modal('amagar')

Amaga manualment un modal.

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

Esdeveniments

La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal.

$ ( '#myModal' ). on ( 'amagat' , funció () {   
  // fer quelcom…
})

Sobre els desplegables

Afegiu menús desplegables a gairebé qualsevol cosa a Bootstrap amb aquest senzill connector. Bootstrap ofereix un suport complet del menú desplegable a la barra de navegació, les pestanyes i les píndoles.

Exemples

Feu clic als enllaços de navegació desplegables a la barra de navegació i a les píndoles a continuació per provar els menús desplegables.

• Enllaç habitual
• Menú desplegable
  • Action
  • Another action
  • Something else here
  • Separated link
• Menú desplegable 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Menú desplegable 3
  • Action
  • Another action
  • Something else here
  • Separated link

Utilitzant bootstrap-dropdown.js

Truqueu als menús desplegables mitjançant javascript:

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

Marcatge

Per afegir ràpidament la funcionalitat del menú desplegable a qualsevol element, només cal que afegiu data-toggle="dropdown"i qualsevol menú desplegable d'arrencada vàlid s'activarà automàticament.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Enllaç normal </a></li>  
  <li class = "menú desplegable" id = "menú1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Menú desplegable
      <b class = "caret" ></b> 
    </a>
    <ul class = "menú desplegable" > 
      <li><a href = "#" > Acció </a></li> 
      <li><a href = "#" > Una altra acció </a></li> 
      <li><a href = "#" > Alguna cosa més aquí </a></li> 
      <li class = "divisor" ></li> 
      <li><a href = "#" > Enllaç separat </a></li> 
    </ul>
  </li>
  ...
</ul>

Mètodes

$().menjador desplegable()

Una API programàtica per activar menús per a una determinada barra de navegació o navegació per pestanyes.

El connector ScrollSpy serveix per actualitzar automàticament els objectius de navegació en funció de la posició del desplaçament.

Exemple de barra de navegació amb scrollspy

Desplaceu-vos per l'àrea següent i mireu l'actualització de la navegació. També es destacaran els subelements desplegables. Intenta-ho!

Utilitzant bootstrap-scrollspy.js

Truqueu al scrollspy mitjançant javascript:

$ ( '#navbar' ). scrollspy ()

Marcatge

Per afegir fàcilment un comportament scrollspy a la vostra navegació de la barra superior, només cal data-spy="scroll"que afegiu l'element que voleu espiar (normalment aquest seria el cos).

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

Opcions

Aquest connector afegeix una pestanya ràpida i dinàmica i una funcionalitat de pastilles per passar pel contingut local.

Pestanyes d'exemple

Feu clic a les pestanyes següents per canviar entre els panells ocults, fins i tot mitjançant menús desplegables.

• Casa
• Perfil
• Menú desplegable
  • @fat
  • @mdo

Utilitzant bootstrap-tab.js

Activa les pestanyes amb tabulació mitjançant javascript:

$ ( '#myTab' ). pestanya ( 'mostra' )

Marcatge

Podeu activar una navegació de pestanyes o píndoles sense escriure cap javascript simplement especificant data-toggle="tab"o data-toggle="pill"en un element.

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

Mètodes

$().tab

Activa un element de pestanya i un contenidor. La pestanya hauria de tenir un "destinació de dades" o un "href" orientat a un node contenidor al dom.

<ul class = "nav nav-tabs" > 
  <li class = "active" ><a href = "#home" > Inici </a></li>  
  <li><a href = "#profile" > Perfil </a></li> 
  <li><a href = "#messages" > Missatges </a></li> 
  <li><a href = "#settings" > Configuració </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pae active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "perfil" > ... </div>  
  <div class = "tab-pane" id = "missatges" > ... </div>  
  <div class = "tab-pane" id = "configuració" > ... </div>  
</div>
 
<script>
  $ ( funció () {  
    $ ( '.tabs a:últim' ). pestanya ( 'mostrar' )
  })
</script>

Esdeveniments

$ ( 'a[data-toggle="tab"]' ). on ( 'mostrat' , funció ( e ) {   
  e . target // pestanya activada
  e . relatedTarget // pestanya anterior
})

Sobre els consells d'eines

Inspirat en l'excel·lent connector jQuery.tipsy escrit per Jason Frame; Els consells sobre eines són una versió actualitzada, que no es basen en imatges, utilitza css3 per a animacions i atributs de dades per a l'emmagatzematge de títols locals.

Exemple d'ús de Tooltips

Passeu el cursor per sobre dels enllaços següents per veure els consells sobre eines:

Utilitzant bootstrap-tooltip.js

Activa la informació sobre eines mitjançant javascript:

$ ( '#exemple' ). informació sobre eines ( opcions )

Opcions

Marcatge

Per raons de rendiment, la informació sobre eines i l'apis de dades emergents estan activades. Si voleu utilitzar-les, només heu d'especificar una opció de selecció.

<a href = "#" rel = "tooltip" title = "primer tooltip" > passa el cursor per sobre meu </a>   

Mètodes

$().tooltip(opcions)

Adjunta un controlador d'informació eines a una col·lecció d'elements.

.tooltip('mostra')

Revela la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'mostra' )

.tooltip('amaga')

Amaga la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'amaga' )

.tooltip('canviar')

Commuta la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'commuta' )

Sobre popovers

Afegiu petites superposicions de contingut, com les de l'iPad, a qualsevol element per allotjar informació secundària.

* Requereix que s'inclogui Tooltip

Exemple de popover del cursor

Passeu el cursor per sobre del botó per activar el popover.

Utilitzant bootstrap-popover.js

Activa les finestres emergents mitjançant javascript:

$ ( '#exemple' ). popover ( opcions )

Opcions

Marcatge

Per motius de rendiment, les API de dades d'informació sobre eines i popover estan activades. Si voleu utilitzar-les, només heu d'especificar una opció del selector.

Mètodes

$().popover(opcions)

Inicialitza les finestres emergents per a una col·lecció d'elements.

.popover('mostra')

Revela un popover d'elements.

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

.popover('amagar')

Amaga una finestra emergent d'elements.

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

.popover('canviar')

Activa o desactiva una finestra emergent d'elements.

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

Sobre les alertes

El connector d'alerta és una petita classe per afegir una funcionalitat propera a les alertes.

Alertes d'exemple

El connector d'alertes funciona amb missatges d'alerta habituals i bloqueja els missatges.

Utilitzant bootstrap-alert.js

Activa l'eliminació d'una alerta mitjançant javascript:

$ ( ".alerta" ). alerta ()

Marcatge

Només heu d'afegir data-dismiss="alert"al vostre botó de tancament per donar automàticament una funcionalitat de tancament d'alerta.

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

Mètodes

$().alert()

Embolcalla totes les alertes amb una funcionalitat propera. Perquè les vostres alertes s'animin quan estiguin tancades, assegureu-vos que ja tenen la classe .fadei .inaplicada.

.alert('tancar')

Tanca una alerta.

$ ( ".alerta" ). alerta ( 'tancar' )

Esdeveniments

La classe d'alerta de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat d'alerta.

$ ( '#la meva-alerta' ). bind ( 'tancat' , funció () {   
  // fer quelcom…
})

Sobre

Fes més amb els botons. Controla els estats dels botons o crea grups de botons per a més components com ara barres d'eines.

Exemples d'usos

Utilitzeu el connector de botons per als estats i les commutacions.

Utilitzant bootstrap-button.js

Activa els botons mitjançant javascript:

$ ( '.tabs' ). botó ()

Marcatge

Els atributs de dades són integrals al connector del botó. Consulteu el codi d'exemple següent per als diferents tipus de marques.

<!-- Afegeix data-toggle="button" per activar la commutació en un sol botó -->
<button class = "btn" data-toggle = "button" > Canvi únic </button>  
 
<!-- Afegeix data-toggle="buttons-checkbox" per canviar l'estil de la casella de selecció a btn-group -->
<div class = "btn-group" data-toggle = "bottons-checkbox" >  
  <button class = "btn" > Esquerra </button> 
  <button class = "btn" > Mitjà </button> 
  <button class = "btn" > Dreta </button> 
</div>
 
<!-- Afegeix data-toggle="buttons-radio" per canviar l'estil de ràdio a btn-group -->
<div class = "btn-group" data-toggle = "botons-ràdio" >  
  <button class = "btn" > Esquerra </button> 
  <button class = "btn" > Mitjà </button> 
  <button class = "btn" > Dreta </button> 
</div>

Mètodes

$().button('canviar')

Commuta l'estat push. Dóna al botó l'aspecte que s'ha activat.

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

$().button('carregant')

Estableix l'estat del botó a la càrrega: desactiva el botó i canvia el text al text de càrrega. El text de càrrega s'ha de definir a l'element botó mitjançant l'atribut de dades data-loading-text.

<button class = "btn" data-loading-text = "carregant coses..." > ... </button>   

$().button('restableix')

Restableix l'estat del botó: canvia el text pel text original.

$().button(cadena)

Restableix l'estat del botó: canvia el text a qualsevol estat de text definit amb dades.

<button class = "btn" data-complete-text = "acabat!" > ... </button>   
<script>
  $ ( '.btn' ). botó ( 'complet' )
</script>

Sobre

Obteniu estils bàsics i suport flexible per a components plegables com els acordions i la navegació.

Exemple d'acordió

Utilitzant el connector de col·lapse, vam crear un giny senzill d'estil acordió:

Utilitzant bootstrap-collapse.js

Habilita mitjançant javascript:

$ ( ".collapse" ). col·lapsar ()

Opcions

Marcatge

Només cal afegir data-toggle="collapse"i data-targeta l'element per assignar automàticament el control d'un element plegable. L' data-targetatribut accepta un selector de css per aplicar el col·lapse. Assegureu-vos d'afegir la classe collapsea l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional in.

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

Mètodes

.collapse(opcions)

Activa el teu contingut com a element plegable. Accepta opcions opcionals object.

$ ( '#myCollapsible' ). col·lapse ({
  alternar : fals 
})

.collapse('canviar')

Commuta un element plegable per mostrar-lo o amagar-lo.

.collapse('mostra')

Mostra un element plegable.

.collapse('amagar')

Amaga un element plegable.

Esdeveniments

La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.

$ ( '#myCollapsible' ). on ( 'amagat' , funció () {   
  // fer quelcom…
})

Sobre

Un connector genèric per recórrer els elements en bicicleta. Un carrusel.

Exemple de carrusel

Mireu la presentació de diapositives a continuació.

Primera etiqueta de miniatura

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

Second Thumbnail label

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

Third Thumbnail label

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

‹ ›

Utilitzant bootstrap-carousel.js

Truqueu mitjançant javascript:

$ ( '.carrusel' ). carrusel ()

Opcions

Marcatge

Els atributs de dades s'utilitzen per als controls anterior i següent. Consulteu l'exemple de marcatge a continuació.

<div id = "myCarousel" class = "carrusel" >  
  <!-- Elements del carrusel -->
  <div class = "carrusel-interior" > 
    <div class = "element actiu" > … </div> 
    <div class = "element" > … </div> 
    <div class = "element" > … </div> 
  </div>
  <!-- Navegació del carrusel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "anterior" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "següent" > › </a>   
</div>

Mètodes

.carrusel (opcions)

Inicialitza el carrusel amb opcions opcionals objecti comença a circular pels elements.

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

.carousel('cicle')

Recorre els elements del carrusel d'esquerra a dreta.

.carousel('pausa')

Impedeix que el carrusel circuli per elements.

.carrusel(número)

Cicle el carrusel a un fotograma concret (basat en 0, similar a una matriu).

.carousel('anterior')

Cicles a l'element anterior.

.carousel('següent')

Passa a l'element següent.

Esdeveniments

La classe de carrusel de Bootstrap exposa dos esdeveniments per connectar-se a la funcionalitat del carrusel.

Sobre

Un connector bàsic i fàcil d'ampliar per crear ràpidament capes de lletra elegants amb qualsevol entrada de text de formulari.

Exemple

Comenceu a escriure al camp següent per mostrar els resultats d'avanç.

Utilitzant bootstrap-typeahead.js

Truqueu al typeahead mitjançant javascript:

$ ( '.typeahead' ). escriviu ()

Opcions

Marcatge

Afegiu atributs de dades per registrar un element amb la funcionalitat typeahead.

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

Mètodes

.typeahead(opcions)

Inicialitza una entrada amb una tipografia.