CSS base

A la part superior de la bastida, els elements HTML bàsics estan dissenyats i millorats amb classes extensibles per oferir un aspecte i un aspecte fresc i coherent.

Encapçalaments i còpia del cos

Escala tipogràfica

Tota la graella tipogràfica es basa en dues variables Less del nostre fitxer variables.less: @baseFontSizei @baseLineHeight. El primer és la mida de lletra base utilitzada a tot arreu i el segon és l'alçada de la línia base.

Utilitzem aquestes variables, i algunes matemàtiques, per crear els marges, els farciments i les altures de línia de tot el nostre tipus i més.

Exemple de text del cos

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Còpia del cos principal

Feu que un paràgraf destaqui afegint .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Títol 1

h2. Títol 2

h3. Títol 3

h4. Títol 4

h5. Títol 5
h6. Títol 6

Èmfasi, adreça i abreviatura

Element Ús Opcional
<strong> Per emfatitzar un fragment de text amb important Cap
<em> Per emfatitzar un fragment de text amb accent Cap
<abbr> Embolcalla les abreviatures i els acrònims per mostrar la versió ampliada al passar el cursor

Inclou un atribut opcional titleper al text ampliat

Utilitzeu .initialismla classe per a les abreviatures en majúscules.
<address> Per a la informació de contacte del seu avantpassat més proper o del conjunt de l'obra Conserva el format acabant totes les línies amb<br>

Utilitzant l'èmfasi

Fusce dapibus , tellus ac cursus commodo , torttor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: no dubteu a utilitzar-lo <b>en <i>HTML5, però el seu ús ha canviat una mica. <b>està destinat a ressaltar paraules o frases sense transmetre importància addicional, mentre que <i>és principalment per a veu, termes tècnics, etc.

Adreces d'exemple

Aquí teniu dos exemples de com <address>es pot utilitzar l'etiqueta:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nom complet
[email protected]

Exemples d'abreviatures

Les abreviatures amb un titleatribut tenen una vora inferior amb punts clars i un cursor d'ajuda al passar el cursor. Això dóna als usuaris una indicació addicional que es mostrarà alguna cosa al passar el cursor.

Afegiu la initialismclasse a una abreviatura per augmentar l'harmonia tipogràfica donant-li una mida de text una mica més petita.

HTML és el millor des del pa llescat.

Una abreviatura de la paraula atribut és attr .

Cites de bloc

Element Ús Opcional
<blockquote> Element a nivell de bloc per citar contingut d'una altra font

Afegeix citeun atribut per a l'URL d'origen

Ús .pull-lefti .pull-rightclasses per a opcions flotants
<small> Element opcional per afegir una citació orientada a l'usuari, normalment un autor amb títol de l'obra Col·loqueu al <cite>voltant del títol o el nom de la font

Per incloure una cita de bloc, <blockquote>envolta qualsevol HTML com a cita. Per a cites directes, recomanem un <p>.

Incloeu un <small>element opcional per citar la vostra font i obtindreu un guió em &mdash;abans per a finalitats d'estil.

  1. <quota de bloc>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Algú famós </small>
  4. </blockquote>

Exemples de cites de bloc

Les quotes de bloc predeterminades tenen l'estil següent:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Algú famós a Body of work

Per fer flotar la vostra cita de bloqueig a la dreta, afegiu class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Algú famós a Body of work

Llistes

No ordenat

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Sense estil

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordenat

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Descripció

<dl>

Llistes de descripció
Una llista de descripció és perfecta per definir termes.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Descripció horitzontal

<dl class="dl-horizontal">

Llistes de descripció
Una llista de descripció és perfecta per definir termes.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Caps amunt! Les llistes de descripcions horitzontals truncaran els termes massa llargs per cabre a la correcció de la columna de l'esquerra text-overflow. A les finestres més estretes, canviaran al disseny apilat predeterminat.

En linia

Emboliqui fragments de codi en línia amb <code>.

  1. Per exemple , la secció < code> </ code > s'hauria d'embolicar com a en línia .

Bloc bàsic

S'utilitza <pre>per a diverses línies de codi. Assegureu-vos d'escapar els claudàtors angulars del codi per a una representació adequada.

<p>Text de mostra aquí...</p>
  1. <pre>
  2. <p>Mostra de text aquí...</p>
  3. </pre>

Nota: Assegureu-vos de mantenir el codi dins de <pre>les etiquetes el més a prop de l'esquerra possible; representarà totes les pestanyes.

Opcionalment, podeu afegir la .pre-scrollableclasse que establirà una alçada màxima de 350 px i proporcionarà una barra de desplaçament de l'eix y.

Google Prettify

Agafeu el mateix <pre>element i afegiu dues classes opcionals per millorar la representació.

  1. <p> Exemple de text aquí... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Mostra de text aquí...</p>
  4. </pre>

Baixeu google-code-prettify i consulteu el readme per saber com utilitzar-lo.

Marcat de taula

Etiqueta Descripció
<table> Element d'embolcall per mostrar dades en format tabular
<thead> Element de contenidor per a files de capçalera de taula ( <tr>) per etiquetar columnes de taula
<tbody> Element contenidor per a les files de la taula ( <tr>) al cos de la taula
<tr> Element contenidor per a un conjunt de cel·les de taula ( <td>o <th>) que apareixen en una sola fila
<td> Cel·la per defecte de la taula
<th> Cel·la de taula especial per a etiquetes de columna (o fila, segons l'abast i la ubicació)
S'ha d'utilitzar dins d'un<thead>
<caption> Descripció o resum del que conté la taula, especialment útil per als lectors de pantalla
  1. <taula>
  2. <cap>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </taula>

Opcions de taula

Nom Classe Descripció
Per defecte Cap Sense estils, només columnes i files
Bàsic .table Només línies horitzontals entre files
Vorejat .table-bordered Arrodoneix les cantonades i afegeix una vora exterior
Franja de zebra .table-striped Afegeix un color de fons gris clar a les files senars (1, 3, 5, etc.)
Condensat .table-condensed Redueix el farciment vertical per la meitat, de 8px a 4px, dins de tots tdi thelements

Taules d'exemple

1. Estils de taula per defecte

Les taules s'estilen automàticament amb només unes quantes vores per garantir la llegibilitat i mantenir l'estructura. Amb 2.0, la .tableclasse és obligatòria.

  1. <table class = "taula" >
  2. </taula>
# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter

2. Taula de ratlles

Fes una mica de luxe amb les teves taules afegint ratlles de zebra; només has d'afegir la .table-stripedclasse.

Nota: Les taules en ratlles utilitzen el :nth-childselector CSS i no estan disponibles a IE7-IE8.

  1. <table class = "taula amb ratlles de taula" >
  2. </taula>
# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter

3. Taula vorejada

Afegiu vores al voltant de tota la taula i cantonades arrodonides amb finalitats estètiques.

  1. <table class = "taula amb vores de taula" >
  2. </taula>
# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
senyal Otto @getbootstrap
2 Jacob Thornton @greix
3 Larry l'ocell @twitter

4. Taula condensada

Feu que les vostres taules siguin més compactes afegint la .table-condensedclasse per tallar el farciment de les cel·les de la taula per la meitat (de 8 px a 4 px).

  1. <table class = "taula condensada per taula" >
  2. </taula>
# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter

5. Combina-los tots!

No dubteu a combinar qualsevol de les classes de taula per aconseguir diferents aspectes utilitzant qualsevol de les classes disponibles.

  1. <table class = "taula amb ratlles de taula amb vores de taula condensada" >
  2. ...
  3. </taula>
Nom complet
# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter

HTML i CSS flexibles

La millor part dels formularis a Bootstrap és que totes les vostres entrades i controls tenen un aspecte fantàstic, independentment de com els creeu al vostre marcatge. No es requereix HTML superflu, però proporcionem els patrons per a aquells que ho necessitin.

Els dissenys més complicats inclouen classes succintes i escalables per facilitar l'estil i l'enquadernació d'esdeveniments, de manera que esteu cobert en cada pas.

Quatre dissenys inclosos

Bootstrap inclou quatre tipus de dissenys de formularis:

  • Vertical (per defecte)
  • Cerca
  • En linia
  • Horitzontal

Els diferents tipus de dissenys de formulari requereixen alguns canvis en l'etiquetatge, però els controls es mantenen i es comporten igual.

Controla els estats i molt més

Els formularis de Bootstrap inclouen estils per a tots els controls de formulari bàsics com l'entrada, l'àrea de text i la selecció que espereu. Però també inclou una sèrie de components personalitzats, com ara entrades adjuntes i anteposades i suport per a llistes de caselles de selecció.

S'inclouen estats com error, advertència i èxit per a cada tipus de control de formulari. També s'inclouen estils per als controls desactivats.

Quatre tipus de formes

Bootstrap proporciona un marcatge i estils senzills per a quatre estils de formularis web habituals.

Nom Classe Descripció
Vertical (per defecte) .form-vertical (no requerit) Etiquetes apilades i alineades a l'esquerra sobre els controls
En linia .form-inline Etiqueta alineada a l'esquerra i controls de bloc en línia per a un estil compacte
Cerca .form-search Entrada de text extra arrodonit per a una estètica de cerca típica
Horitzontal .form-horizontal Flota les etiquetes alineades a l'esquerra i a la dreta a la mateixa línia que els controls

Formularis d'exemple que utilitzen només controls de formulari, sense marques addicionals

Forma bàsica

Valors predeterminats intel·ligents i lleugers sense marques addicionals.

Exemple de text d'ajuda a nivell de bloc aquí.

  1. <form class = "bé" >
  2. <label> Nom de l'etiqueta </label>
  3. <input type = "text" class = "span3" placeholder = "Escriu alguna cosa..." >
  4. <span class = "help-block" > Exemple de text d'ajuda a nivell de bloc aquí. </span>
  5. <label class = "casella de verificació" >
  6. <input type = "checkbox" > Fes una ullada
  7. </label>
  8. <button type = "submit" class = "btn" > Envia </button>
  9. </form>

Formulari de cerca

Afegiu .form-searchal formulari i .search-queryal input.

  1. <form class = "ben cerca de formulari" >
  2. <input type = "text" class = "entrada-mitjana de cerca-consulta" >
  3. <button type = "submit" class = "btn" > Cerca </button>
  4. </form>

Formulari en línia

Afegiu .form-inlineper refinar l'alineació vertical i l'espaiat dels controls de formulari.

  1. <form class = "ben formulari en línia" >
  2. <input type = "text" class = "input-small" placeholder = "Correu electrònic" >
  3. <input type = "contrasenya" class = "input-small" placeholder = "Contrasenya" >
  4. <label class = "casella de verificació" >
  5. <input type = "checkbox" > Recorda'm
  6. </label>
  7. <button type = "submit" class = "btn" > Inicieu la sessió </button>
  8. </form>

Formes horitzontals

A la dreta es mostren tots els controls de formulari predeterminats que admetem. Aquí teniu la llista amb vinyetes:

  • entrades de text (text, contrasenya, correu electrònic, etc.)
  • casella de selecció
  • ràdio
  • seleccionar
  • selecció múltiple
  • entrada de fitxer
  • àrea de text

A més del text de forma lliure, qualsevol entrada basada en text HTML5 apareix així.

Exemple de marcatge

Tenint en compte el disseny del formulari d'exemple anterior, aquí teniu l'etiquetatge associat al primer grup d'entrada i control. Les classes .control-group, .control-label, i són totes necessàries per a l'estil..controls

  1. <form class = "form-horitzontal" >
  2. <conjunt de camps>
  3. <legend> Text de la llegenda </legend>
  4. <div class = "grup de control" >
  5. <label class = "control-label" for = "input01" > Entrada de text </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Text d'ajuda compatible </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Estats de control de formularis

disabledBootstrap inclou estils per als estats i enfocats compatibles amb el navegador . Suprimim el Webkit predeterminat outlinei apliquem una box-shadowal seu lloc per a :focus.


Validació de formularis

També inclou estils de validació d'errors, advertències i èxit. Per utilitzar-lo, afegiu la classe d'error al fitxer .control-group.

  1. <conjunt de camps
  2. class = "error del grup de control" >
  3. </fieldset>
Algun valor aquí
Alguna cosa pot haver anat malament
Si us plau, corregiu l'error
Woohoo!
Woohoo!

Ampliació dels controls de formulari

Afegiu i anteposeu entrades

Els grups d'entrada (amb text adjunt o anteposat) proporcionen una manera senzilla de donar més context a les vostres entrades. Exemples excel·lents inclouen el signe @ per als noms d'usuari de Twitter o $ per a les finances.


Caselles de selecció i ràdios

Fins a la v1.4, Bootstrap requeria un marcatge addicional al voltant de les caselles de selecció i les ràdios per apilar-les. Ara, és una simple qüestió de repetir el <label class="checkbox">que embolica el <input type="checkbox">.

Les caselles de selecció i les ràdios en línia també són compatibles. Només has d'afegir .inlinea qualsevol .checkboxo .radioi ja està.


Formularis en línia i afegiu/anteposa

Per utilitzar les entrades d'anterior o d'afegir en un formulari en línia, assegureu-vos de col·locar .add-oni inputa la mateixa línia, sense espais.


Formulari de text d'ajuda

Per afegir text d'ajuda per a les entrades del formulari, incloeu text d'ajuda en línia amb <span class="help-inline">o un bloc de text d'ajuda amb <p class="help-block">després de l'element d'entrada.

Utilitzeu les mateixes .span*classes del sistema de quadrícula per a les mides d'entrada.

També podeu utilitzar classes estàtiques que no s'adapten a la quadrícula, que s'adaptin als estils CSS responsius o que tinguin en compte diferents tipus de controls (p. ex., inputvs. select).

@

Aquí teniu un text d'ajuda

.00
Aquí teniu més text d'ajuda
$ .00

Nota: les etiquetes envolten totes les opcions per a àrees de clic molt més grans i una forma més utilitzable.

Botó classe="" Descripció
btn Botó gris estàndard amb degradat
btn btn-primary Proporciona un pes visual addicional i identifica l'acció principal en un conjunt de botons
btn btn-info S'utilitza com a alternativa als estils predeterminats
btn btn-success Indica una acció reeixida o positiva
btn btn-warning Indica que cal tenir precaució amb aquesta acció
btn btn-danger Indica una acció perillosa o potencialment negativa
btn btn-inverse Botó alternatiu gris fosc, no vinculat a una acció o ús semàntic

Botons per a accions

Com a convenció, els botons només s'han d'utilitzar per a accions mentre que els hiperenllaços s'han d'utilitzar per als objectes. Per exemple, "Baixa" hauria de ser un botó mentre que "activitat recent" hauria de ser un enllaç.

Els estils de botons es poden aplicar a qualsevol cosa amb la .btnclasse aplicada. Tanmateix, normalment voldreu aplicar-los només a <a>i <button>elements.

Compatibilitat entre navegadors

IE9 no retalla els degradats de fons a les cantonades arrodonides, de manera que l'eliminem. Relacionat, IE9 modifica els buttonelements desactivats, fent que el text sigui gris amb una ombra de text desagradable que no podem solucionar.

Múltiples mides

Voleu botons més grans o més petits? Afegiu .btn-large, .btn-small, o .btn-miniper a dues mides addicionals.


Estat desactivat

Per als botons desactivats, afegiu la .disabledclasse als enllaços i l' disabledatribut per als <button>elements.

Enllaç principal Enllaç

Caps amunt! Aquí fem servir .disabledcom a classe d'utilitat, semblant a la .activeclasse comuna, de manera que no es requereix cap prefix.

Una classe, diverses etiquetes

Utilitzeu la .btnclasse en un element <a>, <button>, o .<input>

Enllaç
  1. <a class = "btn" href = "" > Enllaç </a>
  2. <button class = "btn" type = "enviar" >
  3. Botó
  4. </button>
  5. <input class = "btn" type = "botó"
  6. valor = "Entrada" >
  7. <input class = "btn" type = "envia"
  8. valor = "Envia" >

Com a pràctica recomanada, intenteu fer coincidir l'element amb el vostre context per assegurar-vos que la representació entre navegadors coincideixi. Si teniu un input, utilitzeu un <input type="submit">per al vostre botó.

  • icona-vidre
  • icona-música
  • cerca d'icones
  • icona-sobre
  • icona-cor
  • icona-estrella
  • icona-estrella-buida
  • icona-usuari
  • icona-pel·lícula
  • icona-th-gran
  • icona-è
  • icona-th-lista
  • icona-ok
  • icona-eliminar
  • icona-apropa
  • icona-ampliar-reduir
  • icona apagada
  • icona-senyal
  • icona-cog
  • icona-paperera
  • icona-casa
  • fitxer-icona
  • icona-hora
  • icona-carretera
  • icona-descàrrega-alt
  • icona-descàrrega
  • icona de càrrega
  • icona-safata d'entrada
  • icona-juga-cercle
  • icona-repetició
  • actualització d'icones
  • icon-list-alt
  • icona de bloqueig
  • icona-bandera
  • icona-auriculars
  • icona-volum apagat
  • icona-abaix el volum
  • icona-augment de volum
  • icona-qrcode
  • icona-codi de barres
  • icona-etiqueta
  • etiquetes d'icones
  • llibre d'icones
  • icona-marcador
  • icona-impressió
  • icona-càmera
  • font-icona
  • icona en negreta
  • icona-cursiva
  • icona-alçada-text
  • icona-amplada-text
  • icona-alinear-esquerra
  • icon-align-center
  • icona-alinear-dreta
  • icon-align-justify
  • llista d'icones
  • icona-sagnat-esquerra
  • icona-sagnat-dreta
  • icona-facetime-vídeo
  • imatge-icona
  • icona-llapis
  • icona-mapa-marcador
  • icona-ajust
  • icona-tint
  • icona-editar
  • icon-share
  • icon-check
  • icona-moviment
  • icona-pas enrere
  • icona-enrere ràpid
  • icona-enrere
  • joc d'icones
  • icona-pausa
  • icona-stop
  • icona-endavant
  • icona-avançament ràpid
  • icona-pas endavant
  • icona-expulsió
  • icona-chevron-esquerra
  • icona-chevron-dreta
  • signe més-icona
  • icona-signe-menys
  • icona-eliminar-signe
  • icona-signe d'acord
  • icona-signe-pregunta
  • icona-signe d'informació
  • icona-captura de pantalla
  • icona-elimina-cercle
  • icona-ok-cercle
  • icona-ban-cercle
  • icona-fletxa-esquerra
  • icona-fletxa-dreta
  • icona-fletxa amunt
  • icona-fletxa avall
  • icon-share-alt
  • icon-size-full
  • icona-canviar la mida-petita
  • icona més
  • icona-menys
  • icona-asterisc
  • icona-signe d'exclamació
  • icona-regal
  • icona-fulla
  • icona-foc
  • icona-ull obert
  • icona-ull-tancar
  • icona-senyal-advertència
  • icona-pla
  • icona-calendari
  • icona-aleatori
  • icona-comentari
  • icona-imant
  • icona-chevron-up
  • icona-chevron-avall
  • icona-retuitejar
  • icona-carretó de la compra
  • icona-carpeta-tancar
  • icona-carpeta-obert
  • icona-canvi de mida-vertical
  • icona-canviar la mida-horitzontal
  • icona-hdd
  • icona-bulorn
  • icona-campana
  • icona-certificat
  • icona-polze cap amunt
  • icona-polze cap avall
  • icona-man-dreta
  • icona-mà-esquerra
  • icona-man amunt
  • icona-man avall
  • icona-cercle-fletxa-dreta
  • icona-cercle-fletxa-esquerra
  • icona-cercle-fletxa amunt
  • icona-cercle-fletxa avall
  • globus-icona
  • icona-clau anglesa
  • icones-tasques
  • icona-filtre
  • icona-maletí
  • icona-pantalla completa

Construït com un sprite

En lloc de fer que cada icona sigui una sol·licitud addicional, les hem compilat en un sprite: un munt d'imatges en un fitxer que utilitza CSS per posicionar les imatges amb background-position. Aquest és el mateix mètode que fem servir a Twitter.com i ens ha funcionat bé.

Totes les classes d'icones tenen el prefix .icon-per a l'espai de noms i l'abast adequats, igual que els nostres altres components. Això ajudarà a evitar conflictes amb altres eines.

Glyphicons ens ha concedit l'ús del conjunt Halflings al nostre conjunt d'eines de codi obert sempre que proporcionem un enllaç i un crèdit aquí als documents. Penseu en fer el mateix en els vostres projectes.

Com utilitzar

Bootstrap utilitza una <i>etiqueta per a totes les icones, però no tenen classe de cas, només un prefix compartit. Per utilitzar-lo, col·loqueu el codi següent gairebé a qualsevol lloc:

  1. <i class = "cerca d'icones" ></i>

També hi ha estils disponibles per a icones invertides (blanques), preparats amb una classe addicional:

  1. <i class = "icona-cerca icona-blanc" ></i>

Hi ha 140 classes per triar per a les vostres icones. Només cal que afegiu una <i>etiqueta amb les classes adequades i ja està. Podeu trobar la llista completa a sprites.less o aquí mateix en aquest document.

Caps amunt! Quan utilitzeu cadenes de text al costat, com en botons o enllaços de navegació, assegureu-vos de deixar un espai després de l' <i>etiqueta per a un espai adequat.

Casos d'ús

Les icones són genials, però on les utilitzaria? Aquí teniu algunes idees:

  • Com a elements visuals per a la navegació de la barra lateral
  • Per a una navegació purament basada en icones
  • Per als botons que ajuden a transmetre el significat d'una acció
  • Amb enllaços per compartir context a la destinació d'un usuari

Bàsicament, a qualsevol lloc on pugueu posar una <i>etiqueta, podeu posar una icona.

Exemples

Utilitzeu-los en botons, grups de botons per a una barra d'eines, navegació o entrades de formularis afegides.