Més d'una dotzena de components reutilitzables creats per proporcionar iconografia, menús desplegables, grups d'entrada, navegació, alertes i molt més.
Glificons
Glifs disponibles
Inclou més de 250 glifos en format de lletra del conjunt Glyphicon Halflings. Els glyphicons Halflings normalment no estan disponibles de forma gratuïta, però el seu creador els ha fet disponibles per a Bootstrap de manera gratuïta. Com a agraïment, només us demanem que inclogueu un enllaç a Glyphicons sempre que sigui possible.
Per raons de rendiment, totes les icones requereixen una classe base i una classe d'icones individuals. Per utilitzar-lo, col·loqueu el codi següent gairebé a qualsevol lloc. Assegureu-vos de deixar un espai entre la icona i el text per a un farciment adequat.
No barregis amb altres components
Les classes d'icones no es poden combinar directament amb altres components. No s'han d'utilitzar juntament amb altres classes en el mateix element. En comptes d'això, afegiu un imbricat <span>i apliqueu les classes d'icones al fitxer <span>.
Només per al seu ús en elements buits
Les classes d'icones només s'han d'utilitzar en elements que no contenen contingut de text i no tenen elements secundaris.
Canviar la ubicació del tipus de lletra de la icona
Bootstrap suposa que els fitxers de tipus de lletra d'icones es trobaran al ../fonts/directori, en relació amb els fitxers CSS compilats. Moure o canviar el nom d'aquests fitxers de tipus de lletra significa actualitzar el CSS d'una d'aquestes tres maneres:
Canvieu les variables @icon-font-pathi/o @icon-font-nameals fitxers font Less.
Utilitzeu l'opció que millor s'adapti a la vostra configuració de desenvolupament específica.
Icones accessibles
Les versions modernes de les tecnologies d'assistència anunciaran contingut generat en CSS, així com caràcters Unicode específics. Per evitar sortides no desitjades i confuses als lectors de pantalla (sobretot quan les icones s'utilitzen exclusivament per a la decoració), les amaguem amb l' aria-hidden="true"atribut.
Si utilitzeu una icona per transmetre significat (en lloc de només com a element decoratiu), assegureu-vos que aquest significat també es transmeti a les tecnologies d'assistència; per exemple, incloeu contingut addicional, ocult visualment amb la .sr-onlyclasse.
Si esteu creant controls sense cap altre text (com ara un <button>que només conté una icona), sempre hauríeu de proporcionar contingut alternatiu per identificar la finalitat del control, de manera que tingui sentit per als usuaris de tecnologies d'assistència. En aquest cas, podeu afegir un aria-labelatribut al propi control.
Exemples
Utilitzeu-los en botons, grups de botons per a una barra d'eines, navegació o entrades de formularis afegides.
Una icona que s'utilitza en una alerta per transmetre que es tracta d'un missatge d'error, amb .sr-onlytext addicional per transmetre aquesta pista als usuaris de tecnologies d'assistència.
Emboliqui l'activador del menú desplegable i el menú desplegable dins .dropdown, o un altre element que declari position: relative;. A continuació, afegiu l'HTML del menú.
Per defecte, un menú desplegable es col·loca automàticament al 100% des de la part superior i al costat esquerre del seu pare. Afegeix .dropdown-menu-righta una .dropdown-menualineació a la dreta del menú desplegable.
Pot requerir un posicionament addicional
Els desplegables es col·loquen automàticament mitjançant CSS dins del flux normal del document. Això significa que els pares poden retallar els menús desplegables amb determinades overflowpropietats o aparèixer fora dels límits de la finestra gràfica. Abordeu aquests problemes pel vostre compte a mesura que sorgeixin.
.pull-rightAlineació obsoleta
A partir de la v3.1.0, hem obsolet .pull-rightels menús desplegables. Per alinear un menú a la dreta, utilitzeu .dropdown-menu-right. Els components de navegació alineats a la dreta de la barra de navegació utilitzen una versió mixin d'aquesta classe per alinear automàticament el menú. Per anul·lar-lo, utilitzeu .dropdown-menu-left.
Capçaleres
Afegiu una capçalera per etiquetar seccions d'accions a qualsevol menú desplegable.
Agrupeu una sèrie de botons en una única línia amb el grup de botons. Afegiu una ràdio de JavaScript opcional i un comportament d'estil de casella de selecció amb el nostre connector de botons .
Els consells sobre eines i les finestres emergents dels grups de botons requereixen una configuració especial
Quan utilitzeu informació sobre eines o popovers en elements dins d'un .btn-group, haureu d'especificar l'opció container: 'body'per evitar efectes secundaris no desitjats (com ara que l'element creixi més ample i/o perdi les seves cantonades arrodonides quan s'activa la informació emergent o la informació emergent).
Assegureu-vos que sigui correcte rolei proporcioneu una etiqueta
Perquè les tecnologies d'assistència, com ara els lectors de pantalla, transmetin que s'agrupen una sèrie de botons, rolecal proporcionar un atribut adequat. Per als grups de botons, això seria role="group", mentre que les barres d'eines haurien de tenir un role="toolbar".
Una excepció són els grups que només contenen un únic control (per exemple, els grups de botons justificats amb <button>elements) o un menú desplegable.
A més, els grups i les barres d'eines haurien de tenir una etiqueta explícita, ja que la majoria de tecnologies d'assistència no els anunciaran, malgrat la presència de l' roleatribut correcte. En els exemples proporcionats aquí, fem servir , però també es poden utilitzar aria-labelalternatives com ara .aria-labelledby
Exemple bàsic
Emboliqui una sèrie de botons amb .btnen .btn-group.
Barra d'eines de botons
Combina conjunts de <div class="btn-group">en un <div class="btn-toolbar">per a components més complexos.
Talla
En lloc d'aplicar classes de mida de botons a tots els botons d'un grup, només cal que afegiu -los .btn-group-*a cada .btn-group, inclòs quan anideu diversos grups.
Nidificació
Col·loqueu un .btn-groupdins d'un altre .btn-groupquan vulgueu que els menús desplegables es barregin amb una sèrie de botons.
Feu que un grup de botons estiri a mides iguals per abastar tota l'amplada del seu pare. També funciona amb menús desplegables de botons dins del grup de botons.
Maneig de fronteres
A causa de l'HTML i el CSS específics utilitzats per justificar els botons (és a dir display: table-cell, ), les vores entre ells es doblan. En grups de botons normals, margin-left: -1pxs'utilitza per apilar les vores en lloc d'eliminar-les. Tanmateix, marginno funciona amb display: table-cell. Com a resultat, depenent de les vostres personalitzacions a Bootstrap, és possible que vulgueu eliminar o tornar a pintar les vores.
IE8 i vores
Internet Explorer 8 no representa les vores dels botons d'un grup de botons justificat, tant si està activat <a>com en <button>elements. Per evitar-ho, emboliqueu cada botó en un altre .btn-group.
Si els <a>elements s'utilitzen per actuar com a botons, activant la funcionalitat a la pàgina, en lloc de navegar a un altre document o secció dins de la pàgina actual, també se'ls hauria de donar un role="button".
Amb <button>elements
Per utilitzar grups de botons justificats amb <button>elements, heu d'embolicar cada botó en un grup de botons . La majoria dels navegadors no apliquen correctament el nostre CSS per a la justificació dels <button>elements, però com que admetem menús desplegables de botons, podem solucionar-ho.
Botons desplegables
Utilitzeu qualsevol botó per activar un menú desplegable col·locant-lo dins d'un .btn-groupi proporcionant el marcatge de menú adequat.
Dependència del connector
Els menús desplegables de botons requereixen que el complement desplegable s'inclogui a la vostra versió de Bootstrap.
Menú desplegable d'un sol botó
Converteix un botó en un menú desplegable amb alguns canvis bàsics de marcatge.
Amplieu els controls del formulari afegint text o botons abans, després o als dos costats de qualsevol <input>. Utilitzeu -lo .input-groupamb .input-group-addono .input-group-btnper anteposar o afegir elements a un únic .form-control.
<input>Només textuals
Eviteu utilitzar <select>elements aquí, ja que no es poden dissenyar completament als navegadors WebKit.
Eviteu utilitzar <textarea>elements aquí ja que el seu rowsatribut no es respectarà en alguns casos.
Els consells sobre eines i les finestres emergents dels grups d'entrada requereixen una configuració especial
Quan utilitzeu informació sobre eines o popovers en elements dins d'un .input-group, haureu d'especificar l'opció container: 'body'per evitar efectes secundaris no desitjats (com ara que l'element s'ample i/o perd les seves cantonades arrodonides quan s'activa la informació emergent o la informació emergent).
No barregis amb altres components
No barregeu grups de formularis ni classes de columnes de graella directament amb grups d'entrada. En lloc d'això, niu el grup d'entrada dins del grup de formularis o de l'element relacionat amb la quadrícula.
Afegiu sempre etiquetes
Els lectors de pantalla tindran problemes amb els vostres formularis si no incloeu una etiqueta per a cada entrada. Per a aquests grups d'entrada, assegureu-vos que qualsevol etiqueta o funcionalitat addicional es transmeti a les tecnologies d'assistència.
La tècnica exacta que s'ha d'utilitzar ( <label>elements visibles, <label>elements ocults mitjançant la .sr-onlyclasse o ús de l' atribut aria-label, aria-labelledby, aria-describedby, titleo placeholder) i quina informació addicional caldrà transmetre variarà en funció del tipus exacte de giny d'interfície que esteu implementant. Els exemples d'aquesta secció proporcionen alguns enfocaments suggerits i específics per a casos.
Exemple bàsic
Col·loqueu un complement o un botó a banda i banda d'una entrada. També podeu col·locar-ne un als dos costats d'una entrada.
No admetem diversos complements ( .input-group-addono .input-group-btn) en un sol costat.
No admetem diversos controls de formulari en un sol grup d'entrada.
Talla
Afegiu les classes de mida del formulari relatives al .input-groupmateix i el contingut es canviarà automàticament, sense necessitat de repetir les classes de mida del control del formulari a cada element.
Caselles de selecció i complements de ràdio
Col·loqueu qualsevol casella de selecció o opció de ràdio dins del complement d'un grup d'entrada en lloc de text.
Addons de botons
Els botons dels grups d'entrada són una mica diferents i requereixen un nivell addicional d'imbricació. En lloc de .input-group-addon, haureu d'utilitzar .input-group-btnper embolicar els botons. Això és necessari a causa dels estils de navegador predeterminats que no es poden substituir.
Botons amb desplegables
Botons segmentats
Múltiples botons
Tot i que només podeu tenir un complement per costat, podeu tenir diversos botons dins d'un mateix .input-group-btn.
Navs
Els navegadors disponibles a Bootstrap tenen un marcatge compartit, començant per la .navclasse base, així com estats compartits. Canvia les classes modificadores per canviar entre cada estil.
L'ús de navs per als panells de pestanyes requereix un connector de pestanyes de JavaScript
Per a pestanyes amb àrees tabulables, heu d'utilitzar el connector JavaScript de pestanyes . L'etiquetatge també requerirà roleatributs addicionals i ARIA; consulteu l' exemple de marcatge del connector per a més detalls.
Feu que els navegadors utilitzats com a navegació siguin accessibles
Si utilitzeu navs per proporcionar una barra de navegació, assegureu-vos d'afegir un role="navigation"al contenidor principal més lògic del fitxer <ul>, o embolicar un <nav>element al voltant de tota la navegació. No afegiu el paper al <ul>mateix, ja que això evitaria que s'anunciés com una llista real per les tecnologies d'assistència.
Pestanyes
Tingueu en compte que la .nav-tabsclasse requereix la .navclasse base.
Feu que les pestanyes o les píndoles tinguin una amplada igual a la dels seus pares en pantalles de més de 768 píxels amb .nav-justified. En pantalles més petites, els enllaços de navegació s'apilen.
Els enllaços de navegació de la barra de navegació justificats no s'admeten actualment.
Safari i navegacions justificades responsives
A partir de la v9.1.2, Safari mostra un error en què canviar la mida del navegador horitzontalment provoca errors de representació a la navegació justificada que s'esborren en refrescar. Aquest error també es mostra a l' exemple de navegació justificada .
Les barres de navegació són metacomponents sensibles que serveixen com a capçaleres de navegació per a la vostra aplicació o lloc. Comencen a replegar-se (i es poden alternar) a les visualitzacions mòbils i es tornen horitzontals a mesura que augmenta l'amplada de la finestra gràfica disponible.
Els enllaços de navegació de la barra de navegació justificats no s'admeten actualment.
Contingut desbordant
Com que Bootstrap no sap quant espai necessita el contingut de la vostra barra de navegació, és possible que tingueu problemes amb l'embolcall del contingut en una segona fila. Per resoldre això, podeu:
Redueix la quantitat o l'amplada dels elements de la barra de navegació.
Amaga certs elements de la barra de navegació en determinades mides de pantalla utilitzant classes d'utilitat sensibles .
Canvieu el punt en què la vostra barra de navegació canvia entre el mode replegat i el mode horitzontal. Personalitzeu la @grid-float-breakpointvariable o afegiu la vostra pròpia consulta multimèdia.
Requereix un connector de JavaScript
Si JavaScript està desactivat i la finestra gràfica és prou estreta com perquè la barra de navegació es col·lapsa, serà impossible ampliar la barra de navegació i veure el contingut dins del fitxer .navbar-collapse.
La barra de navegació sensible requereix que el connector de col·lapse s'inclogui a la vostra versió de Bootstrap.
Canviant el punt d'interrupció de la barra de navegació mòbil col·lapsada
La barra de navegació es col·lapsa a la seva visualització mòbil vertical quan la finestra gràfica és més estreta que @grid-float-breakpoint, i s'expandeix a la seva visualització horitzontal no mòbil quan la finestra gràfica té almenys @grid-float-breakpointuna amplada. Ajusteu aquesta variable a la font Menys per controlar quan la barra de navegació col·lapsa/expandeix. El valor predeterminat és 768px(la pantalla més petita "petita" o "tauleta").
Feu que les barres de navegació siguin accessibles
Assegureu-vos d'utilitzar un <nav>element o, si feu servir un element més genèric, com ara un <div>, afegiu una role="navigation"a cada barra de navegació per identificar-la explícitament com una regió de referència per als usuaris de tecnologies d'assistència.
Imatge de marca
Substituïu la marca de la barra de navegació per la vostra pròpia imatge canviant el text per un <img>. Com que .navbar-brandté el seu propi farciment i alçada, és possible que hàgiu de substituir alguns CSS en funció de la vostra imatge.
Formes
Col·loqueu el contingut del formulari dins .navbar-formper obtenir una alineació vertical adequada i un comportament col·lapsat en finestres estretes. Utilitzeu les opcions d'alineació per decidir on es troba dins del contingut de la barra de navegació.
Com a avisos, .navbar-formcomparteix gran part del seu codi amb .form-inlinevia mixin. Alguns controls de formulari, com els grups d'entrada, poden requerir que les amplades fixes es mostrin correctament dins d'una barra de navegació.
Els lectors de pantalla tindran problemes amb els vostres formularis si no incloeu una etiqueta per a cada entrada. Per a aquests formularis en línia, podeu amagar les etiquetes mitjançant la .sr-onlyclasse. Hi ha altres mètodes alternatius per proporcionar una etiqueta per a tecnologies d'assistència, com ara l' atribut aria-label, aria-labelledbyo . titleSi no hi ha cap d'aquests, els lectors de pantalla poden recórrer a l'ús de l' placeholderatribut, si n'hi ha, però tingueu en compte que placeholderno es recomana l'ús de com a substitut d'altres mètodes d'etiquetatge.
Botons
Afegiu la .navbar-btnclasse als <button>elements que no resideixen en a <form>per centrar-los verticalment a la barra de navegació.
Ús específic del context
Igual que les classes de botons estàndard , .navbar-btnes pot utilitzar en <a>i <input>elements. Tanmateix, .navbar-btnni les classes de botons estàndard s'han d'utilitzar en <a>elements dins de .navbar-nav.
Text
Emboliqui les cadenes de text en un element amb .navbar-text, normalment en una <p>etiqueta per a l'interlineat i el color adequats.
Enllaços que no són de navegació
Per a les persones que utilitzin enllaços estàndard que no es troben dins del component de navegació normal de la barra de navegació, utilitzeu la .navbar-linkclasse per afegir els colors adequats per a les opcions de la barra de navegació predeterminada i inversa.
Alineació de components
Alineeu els enllaços de navegació, els formularis, els botons o el text mitjançant les classes d'utilitat .navbar-lefto . .navbar-rightAmbdues classes afegiran un CSS flotant en la direcció especificada. Per exemple, per alinear els enllaços de navegació, col·loqueu-los en un separat <ul>amb la classe d'utilitat corresponent aplicada.
Aquestes classes són versions combinades de .pull-lefti .pull-right, però s'adrecen a les consultes multimèdia per facilitar el maneig dels components de la barra de navegació en diferents mides de dispositiu.
Alineant a la dreta diversos components
Actualment, les barres de navegació tenen una limitació amb diverses .navbar-rightclasses. Per espaiar correctament el contingut, utilitzem el marge negatiu a l'últim .navbar-rightelement. Quan hi ha diversos elements que utilitzen aquesta classe, aquests marges no funcionen com s'ha previst.
Ho revisarem quan puguem reescriure aquest component a la v4.
Fixat a la part superior
Afegeix .navbar-fixed-topi inclou un .containero .container-fluidal contingut de la barra de navegació al centre i al coixinet.
Cal encoixinat corporal
La barra de navegació fixa se superposarà a l'altre contingut, tret que l'afegiu paddinga la part superior del fitxer <body>. Proveu els vostres propis valors o utilitzeu el nostre fragment a continuació. Consell: per defecte, la barra de navegació té 50 píxels d'alçada.
Assegureu-vos d'incloure-ho després del CSS bàsic de Bootstrap.
Fixat al fons
Afegeix .navbar-fixed-bottomi inclou un .containero .container-fluidal contingut de la barra de navegació al centre i al coixinet.
Cal encoixinat corporal
La barra de navegació fixa se superposarà a l'altre contingut, tret que l'afegiu paddinga la part inferior del fitxer <body>. Proveu els vostres propis valors o utilitzeu el nostre fragment a continuació. Consell: per defecte, la barra de navegació té 50 píxels d'alçada.
Assegureu-vos d'incloure-ho després del CSS bàsic de Bootstrap.
Part superior estàtica
Creeu una barra de navegació d'amplada completa que s'allunyi amb la pàgina afegint .navbar-static-topi inclòs un .containero .container-fluidper al centre i el contingut de la barra de navegació.
A diferència de les .navbar-fixed-*classes, no cal que canvieu cap farciment al fitxer body.
Barra de navegació invertida
Modifiqueu l'aspecte de la barra de navegació afegint .navbar-inverse.
Pa ratllat
Indiqueu la ubicació de la pàgina actual dins d'una jerarquia de navegació.
Els separadors s'afegeixen automàticament en CSS mitjançant :beforei content.
Proporcioneu enllaços de paginació per al vostre lloc o aplicació amb el component de paginació de diverses pàgines o l' alternativa de paginació més senzilla .
Paginació per defecte
Paginació senzilla inspirada en Rdio, ideal per a aplicacions i resultats de cerca. El bloc gran és difícil de perdre, fàcilment escalable i ofereix grans àrees de clic.
Etiquetar el component de paginació
El component de paginació s'ha d'embolicar en un <nav>element per identificar-lo com a secció de navegació per als lectors de pantalla i altres tecnologies d'assistència. A més, com que és probable que una pàgina ja tingui més d'una secció de navegació d'aquest tipus (com ara la navegació principal a la capçalera o una navegació a la barra lateral), és recomanable proporcionar un descriptiu aria-labelque <nav>reflecteixi el seu propòsit. Per exemple, si el component de paginació s'utilitza per navegar entre un conjunt de resultats de cerca, una etiqueta adequada podria ser aria-label="Search results pages".
Estats desactivats i actius
Els enllaços es poden personalitzar per a diferents circumstàncies. Utilitzeu .disabled-los per als enllaços que no es poden fer clic i .activeper indicar la pàgina actual.
Us recomanem que canvieu les àncores actives o desactivades per <span>, o que l'ometeu en el cas de les fletxes anteriors/següents, per eliminar la funcionalitat de clic tot conservant els estils previstos.
Talla
Vols una paginació més gran o més petita? Afegiu .pagination-lgo .pagination-smper a mides addicionals.
Buscapersones
Enllaços ràpids anteriors i següents per a implementacions de paginació senzilles amb marques i estils lleugers. És ideal per a llocs senzills com blocs o revistes.
Exemple per defecte
Per defecte, el cercapersones centra els enllaços.
Enllaços alineats
Alternativament, podeu alinear cada enllaç als costats:
Estat desactivat opcional
Els enllaços de cercapersones també utilitzen la .disabledclasse d'utilitat general de la paginació.
Etiquetes
Exemple
Exemple d'encapçalament Nou
Exemple d'encapçalament Nou
Exemple d'encapçalament Nou
Exemple d'encapçalament Nou
Exemple d'encapçalament Nou
Exemple d'encapçalament Nou
Variacions disponibles
Afegiu qualsevol de les classes modificadores esmentades a continuació per canviar l'aparença d'una etiqueta.
Informació d' èxit principal per defecte Advertència Perill
Tens tones d'etiquetes?
Els problemes de renderització poden sorgir quan teniu desenes d'etiquetes en línia dins d'un contenidor estret, cadascuna conté el seu propi inline-blockelement (com una icona). El camí per evitar-ho és la configuració display: inline-block;. Per obtenir un context i un exemple, vegeu #13219 .
Insígnies
Ressalteu fàcilment els elements nous o no llegits afegint un <span class="badge">a enllaços, navegacions Bootstrap i molt més.
Quan no hi hagi elements nous o no llegits, les insígnies simplement es replegaran (mitjançant el :emptyselector de CSS) sempre que no hi hagi contingut.
Compatibilitat entre navegadors
Les insígnies no es col·lapsen automàticament a Internet Explorer 8 perquè no són compatibles amb el :emptyselector.
S'adapta als estats de navegació actius
S'inclouen estils integrats per col·locar insígnies en estats actius a les navegacions de píndoles.
Un component lleuger i flexible que, opcionalment, pot ampliar tota la finestra gràfica per mostrar el contingut clau del vostre lloc.
Hola món!
Es tracta d'una unitat d'heroi senzilla, un component senzill d'estil jumbotron per cridar l'atenció addicional sobre el contingut o la informació destacats.
Per fer el jumbotron d'amplada completa i sense cantonades arrodonides, col·loqueu-lo fora de totes les .containers i, en canvi, afegiu-hi un .containerdins.
Capçalera de la pàgina
Una intèrpret d'ordres senzilla per h1espaiar i segmentar adequadament les seccions de contingut d'una pàgina. Pot utilitzar l' element h1predeterminat de ' small, així com la majoria dels altres components (amb estils addicionals).
Exemple de capçalera de pàgina Subtext per a la capçalera
Miniatures
Amplieu el sistema de quadrícula de Bootstrap amb el component de miniatures per mostrar fàcilment quadrícules d'imatges, vídeos, text i molt més.
Si busqueu una presentació semblant a Pinterest de miniatures de diferents alçades i/o amplades, haureu d'utilitzar un connector de tercers com ara Masonry , Isotope o Salvattore .
Exemple per defecte
De manera predeterminada, les miniatures de Bootstrap estan dissenyades per mostrar imatges enllaçades amb un marcatge mínim necessari.
Contingut personalitzat
Amb una mica de marcatge addicional, és possible afegir qualsevol tipus de contingut HTML com encapçalaments, paràgrafs o botons a les miniatures.
Etiqueta en 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.
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.
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.
Proporcioneu missatges de comentaris contextuals per a les accions típiques dels usuaris amb un grapat de missatges d'alerta disponibles i flexibles.
Exemples
Embolcalla qualsevol text i un botó d'ignorar opcional .alerti una de les quatre classes contextuals (p. ex., .alert-success) per als missatges d'alerta bàsics.
No hi ha classe per defecte
Les alertes no tenen classes per defecte, només classes base i modificadora. Una alerta grisa predeterminada no té massa sentit, de manera que cal que especifiqueu un tipus mitjançant una classe contextual. Trieu entre èxit, informació, advertència o perill.
Ben fet! Heu llegit correctament aquest missatge d'alerta important.
Caps amunt! Aquesta alerta necessita la vostra atenció, però no és molt important.
Avís! Millor comproveu-vos, no teniu massa bona pinta.
Oh snap! Canvia algunes coses i prova d'enviar de nou.
Alertes descartables
Creeu qualsevol alerta afegint un .alert-dismissiblebotó opcional i de tancament.
Proporcioneu comentaris actualitzats sobre el progrés d'un flux de treball o d'una acció amb barres de progrés senzilles però flexibles.
Compatibilitat entre navegadors
Les barres de progrés utilitzen transicions i animacions CSS3 per aconseguir alguns dels seus efectes. Aquestes funcions no s'admeten a Internet Explorer 9 i anteriors o versions anteriors de Firefox. Opera 12 no admet animacions.
Compatibilitat amb la política de seguretat de contingut (CSP).
Si el vostre lloc web té una política de seguretat de contingut (CSP) que no permet style-src 'unsafe-inline', no podreu utilitzar els styleatributs en línia per establir l'amplada de la barra de progrés tal com es mostra als nostres exemples següents. Els mètodes alternatius per establir les amplades que són compatibles amb CSP estrictes inclouen utilitzar una mica de JavaScript personalitzat (que estableix element.style.width) o utilitzar classes CSS personalitzades.
Exemple bàsic
Barra de progrés predeterminada.
60% complet
Amb etiqueta
Traieu la classe <span>with .sr-onlyde la barra de progrés per mostrar un percentatge visible.
60%
Per assegurar-vos que el text de l'etiqueta es manté llegible fins i tot en percentatges baixos, penseu a afegir una min-widtha la barra de progrés.
0%
2%
Alternatives contextuals
Les barres de progrés utilitzen alguns dels mateixos botons i classes d'alertes per a estils coherents.
40% completat (èxit)
20% complet
60% completat (advertència)
80% complet (perill)
A ratlles
Utilitza un degradat per crear un efecte ratllat. No disponible a IE9 i posteriors.
40% completat (èxit)
20% complet
60% completat (advertència)
80% complet (perill)
Animat
Afegeix .activea .progress-bar-stripedper animar les ratlles de dreta a esquerra. No disponible a IE9 i posteriors.
45% complet
Apilats
Col·loqueu diverses barres a la mateixa .progressper apilar-les.
35% completat (èxit)
20% completat (advertència)
10% complet (perill)
Objecte multimèdia
Estils d'objectes abstractes per crear diversos tipus de components (com ara comentaris de bloc, tuits, etc.) que inclouen una imatge alineada a l'esquerra o a la dreta juntament amb el contingut textual.
Multimèdia per defecte
El suport predeterminat mostra un objecte multimèdia (imatges, vídeo, àudio) a l'esquerra o a la dreta d'un bloc de contingut.
Encapçalament dels mitjans
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Encapçalament dels mitjans
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Encapçalament multimèdia niu
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Encapçalament dels mitjans
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Encapçalament dels mitjans
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Les classes .pull-lefti .pull-righttambé existeixen i s'utilitzaven anteriorment com a part del component multimèdia, però estan obsoletes per a aquest ús a partir de la v3.3.0. Són aproximadament equivalents a .media-lefti .media-right, excepte que .media-rights'han de col·locar després .media-bodyde l'html.
Alineació dels mitjans
Les imatges o altres mitjans es poden alinear a la part superior, mitjana o inferior. El valor predeterminat és alineat a la part superior.
Mitjans alineats a la part superior
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mitjans alineats al mig
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mitjans alineats a la part inferior
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Llista de mitjans
Amb una mica d'etiquetatge addicional, podeu utilitzar la llista de mitjans dins (útil per a fils de comentaris o llistes d'articles).
Encapçalament dels mitjans
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Encapçalament multimèdia niu
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Encapçalament multimèdia niu
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Encapçalament multimèdia niu
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Grup de llista
Els grups de llistes són un component flexible i potent per mostrar no només llistes simples d'elements, sinó també complexes amb contingut personalitzat.
Exemple bàsic
El grup de llista més bàsic és simplement una llista no ordenada amb elements de llista i les classes adequades. Construeix-hi amb les opcions que segueixen o amb el teu propi CSS segons sigui necessari.
Cras justo odio
Dapibus ac facilitis in
Morbi leo risus
Porta ac consectetur ac
Vestíbul a l'eros
Insígnies
Afegiu el component de les insígnies a qualsevol element del grup de llista i es col·locarà automàticament a la dreta.
14Cras justo odio
2Dapibus ac facilitis in
1Morbi leo risus
Elements enllaçats
Enllaceu els elements del grup de llista mitjançant etiquetes d'ancoratge en lloc d'elements de llista (això també significa un pare <div>en lloc d'un <ul>). No hi ha necessitat de pares individuals al voltant de cada element.
Els elements del grup de llista poden ser botons en lloc d'elements de llista (això també significa un pare <div>en lloc d'un <ul>). No hi ha necessitat de pares individuals al voltant de cada element. No utilitzeu les .btnclasses estàndard aquí.
Elements desactivats
Afegiu -lo .disableda a .list-group-itemper posar-lo en gris perquè aparegui desactivat.
Tot i que no sempre és necessari, de vegades cal posar el DOM en una caixa. En aquestes situacions, proveu el component del panell.
Exemple bàsic
Per defecte, tot el .panelque es fa és aplicar una vora bàsica i un farciment per contenir contingut.
Exemple de panell bàsic
Panell amb encapçalament
Afegiu fàcilment un contenidor d'encapçalament al vostre tauler amb .panel-heading. També podeu incloure qualsevol <h1>- <h6>amb una .panel-titleclasse per afegir un encapçalament amb estil prèviament. Tanmateix, les mides de lletra de <h1>- <h6>se substitueixen per .panel-heading.
Per pintar els enllaços correctament, assegureu-vos de col·locar els enllaços als encapçalaments dins de .panel-title.
Encapçalament del panell sense títol
Contingut del panell
Títol del panell
Contingut del panell
Panell amb peu de pàgina
Embolica els botons o el text secundari en .panel-footer. Tingueu en compte que els peus de pàgina del panell no hereten els colors i les vores quan s'utilitzen variacions contextuals, ja que no estan pensats per estar en primer pla.
Contingut del panell
Alternatives contextuals
Com altres components, podeu fer que un panell sigui més significatiu per a un context concret afegint qualsevol de les classes d'estat contextual.
Títol del panell
Contingut del panell
Títol del panell
Contingut del panell
Títol del panell
Contingut del panell
Títol del panell
Contingut del panell
Títol del panell
Contingut del panell
Amb taules
Afegiu qualsevol no vorejat .tabledins d'un panell per obtenir un disseny perfecte. Si hi ha un .panel-body, afegim una vora addicional a la part superior de la taula per a la separació.
Encapçalament del panell
Alguns continguts del panell predeterminats aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Nom
Cognom
Nom d'usuari
1
senyal
Otto
@mdo
2
Jacob
Thornton
@greix
3
Larry
l'ocell
@twitter
Si no hi ha cap cos del panell, el component es mou de la capçalera del panell a la taula sense interrupció.
Alguns continguts del panell predeterminats aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilitis in
Morbi leo risus
Porta ac consectetur ac
Vestíbul a l'eros
Incrustació responsiva
Permet que els navegadors determinin les dimensions del vídeo o de la presentació de diapositives en funció de l'amplada del bloc que la conté creant una proporció intrínseca que s'ajusti correctament a qualsevol dispositiu.
Les regles s'apliquen directament a <iframe>, <embed>, <video>i <object>elements; Opcionalment, utilitzeu una classe descendent explícita .embed-responsive-itemquan vulgueu fer coincidir l'estil d'altres atributs.
Pro-Tip! No cal que l'inclogueu frameborder="0"a les vostres <iframe>s, ja que ho substituïm per a vosaltres.
Pous
Bé per defecte
Utilitzeu el pou com a simple efecte sobre un element per donar-li un efecte d'inserció.
Mira, estic en un pou!
Classes opcionals
Control de farciment i cantonades arrodonides amb dues classes de modificadors opcionals.