CSS base

Ademais do andamio, os elementos HTML básicos son estilizados e mellorados con clases extensibles para proporcionar unha aparencia fresca e consistente.

Títulos e copia do corpo

Escala tipográfica

Toda a grella tipográfica baséase en dúas variables Menos do noso ficheiro variables.less: @baseFontSizee @baseLineHeight. O primeiro é o tamaño da fonte base empregado en todo e o segundo é a altura da liña base.

Usamos esas variables, e algunhas matemáticas, para crear as marxes, recheos e alturas de liña de todo o noso tipo e moito máis.

Exemplo de texto do corpo

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.

Copia do corpo principal

Fai que un parágrafo destaque engadindo .lead.

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

h1. Título 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5
h6. Título 6

Énfase, enderezo e abreviatura

Elemento Uso Opcional
<strong> Por enfatizar un fragmento de texto con importante Ningún
<em> Para enfatizar un fragmento de texto con estrés Ningún
<abbr> Envolve abreviaturas e acrónimos para mostrar a versión ampliada ao pasar o cursor

Inclúe un titleatributo opcional para o texto expandido

Use .initialisma clase para as abreviaturas en maiúsculas.
<address> Para obter información de contacto do seu antepasado máis próximo ou de todo o traballo Conserva o formato rematando todas as liñas con<br>

Usando a énfase

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

Nota: non dubides en usar <b>e <i>en HTML5, pero o seu uso cambiou un pouco. <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Enderezos de exemplo

Aquí tes dous exemplos de como <address>se pode usar a etiqueta:

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

Exemplos de abreviaturas

As abreviaturas cun titleatributo teñen un bordo inferior de puntos claros e un cursor de axuda ao pasar o cursor. Isto dálle aos usuarios unha indicación adicional que se mostrará algo ao pasar o cursor.

Engade a initialismclase a unha abreviatura para aumentar a harmonía tipográfica dándolle un tamaño de texto lixeiramente menor.

HTML é o mellor desde o pan rebanado.

Unha abreviatura da palabra atributo é attr .

Citas de bloque

Elemento Uso Opcional
<blockquote> Elemento de nivel de bloque para citar contido doutra fonte

Engadir citeatributo para o URL de orixe

Uso .pull-lefte .pull-rightclases para opcións flotantes
<small> Elemento opcional para engadir unha cita orientada ao usuario, normalmente un autor con título da obra Coloque <cite>arredor do título ou do nome da fonte

Para incluír unha cita en bloque, envolve <blockquote>calquera HTML como cita. Para citas directas recomendamos un <p>.

Inclúe un elemento opcional <small>para citar a túa fonte e terás un guión &mdash;antes del para fins de estilismo.

  1. <cota de bloque>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Alguén famoso </small>
  4. </blockquote>

Exemplos de citas en bloque

As comillas de bloque predeterminadas teñen o estilo así:

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

Alguén famoso en Body of work

Para facer flotar a túa cita de bloque á dereita, engade class="pull-right":

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

Alguén famoso en Body of work

Listas

Sen orde

<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 portttitor Lorem

Sen estilo

<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 portttitor Lorem

Ordenado

<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 portttitor Lorem

Descrición

<dl>

Listas de descricións
Unha lista de descricións é perfecta para definir termos.
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.

Descrición horizontal

<dl class="dl-horizontal">

Listas de descricións
Unha lista de descricións é perfecta para definir termos.
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.

Aviso! As listas de descricións horizontais truncarán os termos que son demasiado longos para caber na corrección da columna esquerda text-overflow. Nas vistas máis estreitas, cambiarán ao deseño apilado predeterminado.

En liña

Envolve fragmentos de código en liña con <code>.

  1. Por exemplo , a sección < code> </ code > debe ser envolveda como en liña .

Bloque básico

Use <pre>para varias liñas de código. Asegúrate de escapar de calquera corchete angular do código para unha representación correcta.

<p>Texto de mostra aquí...</p>
  1. <pre>
  2. <p>Texto de mostra aquí...</p>
  3. </pre>

Nota: Asegúrese de manter o código dentro das <pre>etiquetas o máis preto posible da esquerda; renderizará todas as pestanas.

Opcionalmente, pode engadir a .pre-scrollableclase que establecerá unha altura máxima de 350 px e proporcionará unha barra de desprazamento do eixe Y.

Google Prettify

Toma o mesmo <pre>elemento e engade dúas clases opcionais para mellorar a representación.

  1. <p> Texto de mostra aquí... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Texto de mostra aquí...</p>
  4. </pre>

Descarga google-code-prettify e consulta o readme para saber como usalo.

Marcado da táboa

Etiquetar Descrición
<table> Elemento de envoltura para mostrar datos en formato tabular
<thead> Elemento contenedor para filas de cabeceira da táboa ( <tr>) para etiquetar columnas da táboa
<tbody> Elemento contenedor para as filas da táboa ( <tr>) no corpo da táboa
<tr> Elemento contenedor para un conxunto de celas da táboa ( <td>ou <th>) que aparece nunha soa fila
<td> Celda da táboa predeterminada
<th> Cela especial da táboa para as etiquetas de columnas (ou filas, dependendo do alcance e da colocación)
.<thead>
<caption> Descrición ou resumo do que contén a táboa, especialmente útil para lectores de pantalla
  1. <táboa>
  2. <cabeza>
  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. </táboa>

Opcións da táboa

Nome Clase Descrición
Por defecto Ningún Sen estilos, só columnas e filas
Básico .table Só liñas horizontais entre filas
Bordado .table-bordered Redondea as esquinas e engade o bordo exterior
Raia cebra .table-striped Engade cor de fondo gris claro ás filas impares (1, 3, 5, etc.)
Condensado .table-condensed Corta o recheo vertical á metade, de 8px a 4px, dentro de todos tde thelementos

Táboas de exemplo

1. Estilos de táboa predeterminados

As táboas teñen un estilo automaticamente con só algúns bordos para garantir a lexibilidade e manter a estrutura. Con 2.0, a .tableclase é necesaria.

  1. <table class = "table" >
  2. </táboa>
# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter

2. Mesa de raias

Déixate un pouco coas túas táboas engadindo raias de cebra; só tes que engadir a .table-stripedclase.

Nota: As táboas con franxas usan o :nth-childselector CSS e non están dispoñibles en IE7-IE8.

  1. <table class = "table table-striped" >
  2. </táboa>
# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter

3. Mesa con bordes

Engade bordos ao redor de toda a mesa e esquinas redondeadas con fins estéticos.

  1. <table class = "táboa con bordes de táboa" >
  2. </táboa>
# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
Marcos Oto @getbootstrap
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter

4. Táboa condensada

Fai as túas táboas máis compactas engadindo a .table-condensedclase para cortar o recheo das celas da táboa á metade (de 8px a 4px).

  1. <table class = "table table-condensed" >
  2. </táboa>
# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter

5. Combínaos todos!

Non dubides en combinar calquera das clases da táboa para conseguir diferentes looks utilizando calquera das clases dispoñibles.

  1. <table class = "táboa con raias de táboa con bordes de táboa condensada" >
  2. ...
  3. </táboa>
Nome completo
# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter

HTML e CSS flexibles

A mellor parte dos formularios en Bootstrap é que todas as túas entradas e controis teñen un aspecto estupendo sen importar como os constrúas no teu marcado. Non é necesario HTML superfluo, pero fornecemos os patróns para aqueles que o precisen.

Os deseños máis complicados inclúen clases sucintas e escalables para facilitar o estilo e a vinculación de eventos, polo que estás cuberto en cada paso.

Catro esquemas incluídos

Bootstrap inclúe catro tipos de deseños de formularios:

  • Vertical (predeterminado)
  • Busca
  • En liña
  • Horizontal

Os distintos tipos de deseños de formularios requiren algúns cambios no marcado, pero os propios controis permanecen e se comportan igual.

Controla estados e moito máis

Os formularios de Bootstrap inclúen estilos para todos os controis do formulario base, como entrada, área de texto e selección que esperarías. Pero tamén inclúe unha serie de compoñentes personalizados, como entradas anexas e antepostas e soporte para listas de caixas de verificación.

Inclúense estados como erro, aviso e éxito para cada tipo de control de formulario. Tamén se inclúen estilos para controis desactivados.

Catro tipos de formas

Bootstrap ofrece marcas e estilos sinxelos para catro estilos de formularios web comúns.

Nome Clase Descrición
Vertical (predeterminado) .form-vertical (Non requerido) Etiquetas apiladas e aliñadas á esquerda sobre os controis
En liña .form-inline Etiqueta aliñada á esquerda e controis de bloque en liña para un estilo compacto
Busca .form-search Entrada de texto extra redondeada para unha estética de busca típica
Horizontal .form-horizontal Flota as etiquetas aliñadas á esquerda e á dereita na mesma liña que os controis

Exemplos de formularios usando só controis de formulario, sen marcas adicionais

Forma básica

Valores predeterminados intelixentes e lixeiros sen marcado adicional.

Exemplo de texto de axuda a nivel de bloque aquí.

  1. <form class = "ben" >
  2. <label> Nome da etiqueta </label>
  3. <input type = "text" class = "span3" placeholder = "Escriba algo..." >
  4. <span class = "help-block" > Exemplo de texto de axuda a nivel de bloque aquí. </span>
  5. <label class = "caixa de verificación" >
  6. <input type = "checkbox" > Comprobe-me
  7. </label>
  8. <button type = "submit" class = "btn" > Enviar </button>
  9. </form>

Formulario de busca

Engadir .form-searchao formulario e .search-queryao input.

  1. <form class = "ben busca de formularios" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Busca </button>
  4. </form>

Formulario en liña

Engade .form-inlinepara perfeccionar o aliñamento vertical e o espazamento dos controis do formulario.

  1. <form class = "ben formulario en liña" >
  2. <input type = "text" class = "input-small" placeholder = "Correo electrónico" >
  3. <input type = "contrasinal" class = "input-small" placeholder = "Contrasinal" >
  4. <label class = "caixa de verificación" >
  5. <input type = "checkbox" > Lémbrame
  6. </label>
  7. <button type = "submit" class = "btn" > Iniciar sesión </button>
  8. </form>

Formas horizontais

Á dereita móstranse todos os controis de formulario predeterminados que admitimos. Aquí está a lista con viñetas:

  • entradas de texto (texto, contrasinal, correo electrónico, etc.)
  • caixa de verificación
  • radio
  • seleccionar
  • selección múltiple
  • entrada de ficheiro
  • área de texto

Ademais do texto de forma libre, calquera entrada baseada en texto HTML5 aparece así.

Exemplo de marcado

Tendo en conta o deseño do formulario de exemplo anterior, aquí está o marcado asociado ao primeiro grupo de entrada e control. As clases .control-group, .control-label, e .controlsson todas necesarias para estilizar.

  1. <form class = "form-horizontal" >
  2. <conxunto de campos>
  3. <legend> Texto da lenda </legend>
  4. <div class = "grupo de control" >
  5. <label class = "control-label" for = "input01" > Entrada de texto </label>
  6. <div class = "controis" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Texto de axuda compatible </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Estados de control de formularios

disabledBootstrap presenta estilos para estados e enfocados compatibles co navegador . Eliminamos o Webkit predeterminado outlinee aplicamos un box-shadowno seu lugar para :focus.


Validación de formularios

Tamén inclúe estilos de validación de erros, avisos e éxito. Para usalo, engade a clase de erro ao .control-group.

  1. <fieldset
  2. class = "erro do grupo de control" >
  3. </fieldset>
Algún valor aquí
Algo puido ir mal
Corrixe o erro
Woohoo!
Woohoo!

Ampliación dos controis de formularios

Anteponer e engadir entradas

Os grupos de entrada (con texto anexado ou anteposto) ofrecen un xeito sinxelo de dar máis contexto ás túas entradas. Exemplos excelentes inclúen o signo @ para os nomes de usuario de Twitter ou $ para as finanzas.


Caixas de verificación e radios

Ata a versión 1.4, Bootstrap requiría un marcado adicional nas caixas de verificación e nas radios para apilalas. Agora, é unha simple cuestión de repetir o <label class="checkbox">que envolve o <input type="checkbox">.

Tamén se admiten caixas de verificación e radios en liña. Só ten que engadir .inlinea calquera .checkboxou .radioe xa está.


Formularios en liña e anexar/antes

Para usar entradas de antecedentes ou anexas nun formulario en liña, asegúrate de colocar .add-one inputna mesma liña, sen espazos.


Formulario de texto de axuda

Para engadir texto de axuda para as entradas do formulario, inclúa texto de axuda en liña <span class="help-inline">ou un bloque de texto de axuda con <p class="help-block">despois do elemento de entrada.

Use as mesmas .span*clases do sistema de cuadrícula para os tamaños de entrada.

Tamén podes usar clases estáticas que non se asignen á grade, que non se adapten aos estilos CSS sensibles ou que teñan en conta distintos tipos de controis (por exemplo, inputcontra select).

@

Aquí tes un texto de axuda

.00
Aquí tes máis texto de axuda
$ .00

Nota: As etiquetas rodean todas as opcións para áreas de clic moito máis grandes e un formulario máis utilizable.

Botón clase="" Descrición
btn Botón gris estándar con degradado
btn btn-primary Proporciona peso visual adicional e identifica a acción principal nun conxunto de botóns
btn btn-info Usado como alternativa aos estilos predeterminados
btn btn-success Indica unha acción exitosa ou positiva
btn btn-warning Indica que se debe tomar precaución con esta acción
btn btn-danger Indica unha acción perigosa ou potencialmente negativa
btn btn-inverse Botón gris escuro alternativo, non vinculado a unha acción ou uso semántico

Botóns para accións

Como convención, os botóns só deben usarse para accións mentres que os hipervínculos deben usarse para os obxectos. Por exemplo, "Descargar" debería ser un botón mentres que "Actividade recente" debería ser unha ligazón.

Os estilos de botón pódense aplicar a calquera cousa coa .btnclase aplicada. Non obstante, normalmente quererás aplicar estes só a elementos <a>e <button>.

Compatibilidade entre navegadores

IE9 non recorta os degradados de fondo nas esquinas redondeadas, polo que o eliminamos. Relacionado, IE9 modifica os buttonelementos desactivados, convertendo o texto en gris cunha sombra de texto desagradable que non podemos corrixir.

Varios tamaños

Queres botóns máis grandes ou pequenos? Engade .btn-large, .btn-small, ou .btn-minipara dous tamaños adicionais.


Estado desactivado

Para os botóns desactivados, engade a .disabledclase ás ligazóns e o disabledatributo para os <button>elementos.

Ligazón principal Ligazón

Aviso! Aquí usamos .disabledcomo clase de utilidade, semellante á clase común .active, polo que non se require ningún prefixo.

Unha clase, varias etiquetas

Usa a .btnclase nun elemento <a>, <button>, ou <input>.

Ligazón
  1. <a class = "btn" href = "" > Ligazón </a>
  2. <button class = "btn" type = "enviar" >
  3. Botón
  4. </button>
  5. <input class = "btn" type = "botón"
  6. valor = "Entrada" >
  7. <input class = "btn" type = "submit"
  8. valor = "Enviar" >

Como mellor práctica, intente facer coincidir o elemento para o seu contexto para garantir a representación entre navegadores coincidentes. Se tes un input, utiliza un <input type="submit">para o teu botón.

  • icona-vidro
  • icona-música
  • busca de iconas
  • icona-sobre
  • icona-corazón
  • icona-estrela
  • icona-estrela-baleiro
  • icona-usuario
  • icona-película
  • icona-th-grande
  • icona-th
  • icona-th-lista
  • icona-ok
  • icona-eliminar
  • icona-ampliar
  • icon-zoom-out
  • icona desactivada
  • sinal-icona
  • icona-cog
  • icona-lixo
  • icona-casa
  • arquivo-icona
  • icona-tempo
  • icona-estrada
  • icona-descarga-alt
  • icona-descarga
  • carga de iconas
  • icona-box de entrada
  • icon-play-circle
  • icona-repetir
  • icon-refresh
  • icon-list-alt
  • icona-bloqueo
  • icona-bandeira
  • icona-auriculares
  • icon-volume-off
  • icona-baixa o volume
  • icona-subir volume
  • icona-qrcode
  • icona-código de barras
  • icona-etiqueta
  • etiquetas de iconas
  • libro de iconas
  • icona-marcador
  • icona-impresión
  • icona-cámara
  • icona-fonte
  • icona-negriña
  • icona-cursiva
  • icona-texto-altura
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icona-alinear-dereita
  • icon-align-justify
  • lista de iconas
  • icona-sangrado-esquerda
  • icona-sangrado-dereita
  • icon-facetime-video
  • imaxe-icona
  • icona-lapis
  • icono-mapa-marcador
  • axuste da icona
  • tinte de iconas
  • icona-editar
  • icon-share
  • icon-check
  • icona-mover
  • icona-paso-atrás
  • icona-retroceso rápido
  • icona cara atrás
  • xogo de iconas
  • icona-pausa
  • icona-parada
  • icona cara adiante
  • icona-avance rápido
  • icona-paso-adelante
  • icona-expulsar
  • icona-chevron-esquerda
  • icona-chevron-dereita
  • icona-máis-signo
  • icona-signo-menos
  • icona-eliminar-sinal
  • icona-sinal-ok
  • icona-sinal-pregunta
  • icona-sinal de información
  • icona-captura de pantalla
  • icona-eliminar-círculo
  • icona-ok-círculo
  • icona-ban-círculo
  • icona-frecha-esquerda
  • icona-frecha-dereita
  • icona-frecha-arriba
  • icona-frecha-abaixo
  • icon-share-alt
  • icon-size-full
  • icon-size-small
  • icon-plus
  • icona-menos
  • icona-asterisco
  • icona-signo-de-exclamación
  • icona-agasallo
  • icona-folla
  • icona-lume
  • icona-ollo aberto
  • icona-ollo-pecha
  • icona-sinal-de-advertencia
  • plano-icona
  • icona-calendario
  • icona-aleatoria
  • icona-comentario
  • icona-imán
  • icon-chevron-up
  • icon-chevron-down
  • icona-retweet
  • icona-carro da compra
  • icona-carpeta-pechar
  • icona-carpeta-aberto
  • icon-size-vertical
  • icon-size-horizontal
  • icona-hdd
  • icona-bulchorn
  • icona-campá
  • icono-certificado
  • icona-pulgar cara arriba
  • icona-polgares abaixo
  • icona-man-dereita
  • icona-man-esquerda
  • icona-man arriba
  • icona-man abaixo
  • icona-círculo-frecha-dereita
  • icona-círculo-frecha-esquerda
  • icona-círculo-frecha-arriba
  • icona-círculo-frecha abaixo
  • icona-globo
  • chave inglesa
  • iconas-tarefas
  • icona-filtro
  • icona-maletín
  • icona-pantalla completa

Construído como un sprite

En lugar de facer que cada icona sexa unha solicitude adicional, recompilámolas nun sprite: un montón de imaxes nun ficheiro que usa CSS para situar as imaxes con background-position. Este é o mesmo método que usamos en Twitter.com e funcionounos ben.

Todas as clases de iconas teñen como prefixo .icon-un espazo de nomes e un alcance axeitados, ao igual que os nosos outros compoñentes. Isto axudará a evitar conflitos con outras ferramentas.

Glyphicons concedeunos o uso do conxunto de Halflings no noso conxunto de ferramentas de código aberto sempre que proporcionemos unha ligazón e un crédito aquí nos documentos. Considera facer o mesmo nos teus proxectos.

Como empregar

Bootstrap usa unha <i>etiqueta para todas as iconas, pero non teñen clase de caso, só un prefixo compartido. Para usalo, coloque o seguinte código en calquera lugar:

  1. <i class = "busca de iconas" ></i>

Tamén hai estilos dispoñibles para iconas invertidas (brancas), preparadas cunha clase adicional:

  1. <i class = "icona-busca icona-branca" ></i>

Hai 140 clases para escoller para as túas iconas. Só ten que engadir unha <i>etiqueta coas clases correctas e xa está. Podes atopar a lista completa en sprites.less ou aquí mesmo neste documento.

Aviso! Cando uses cadeas de texto ao lado, como nos botóns ou nas ligazóns de navegación, asegúrate de deixar un espazo despois da <i>etiqueta para un espazo adecuado.

Casos de uso

As iconas son xeniais, pero onde se usarían? Aquí tes algunhas ideas:

  • Como elementos visuais para a súa navegación na barra lateral
  • Para unha navegación puramente guiada por iconas
  • Para botóns para axudar a transmitir o significado dunha acción
  • Con ligazóns para compartir contexto no destino dun usuario

Esencialmente, en calquera lugar onde poidas poñer unha <i>etiqueta, podes poñer unha icona.

Exemplos

Utilízaos en botóns, grupos de botóns para unha barra de ferramentas, navegación ou entradas de formularios antepostas.