CSS básico

Además del scaffolding, los elementos HTML básicos se diseñan y mejoran con clases extensibles para brindar una apariencia fresca y consistente.

Encabezados y copia del cuerpo

escala tipografica

Toda la cuadrícula tipográfica se basa en dos variables Less en nuestro archivo variables.less: @baseFontSizey @baseLineHeight. El primero es el tamaño de fuente base utilizado en todo el texto y el segundo es la altura de línea base.

Usamos esas variables y algunas matemáticas para crear los márgenes, rellenos y alturas de línea de todo nuestro tipo y más.

Ejemplo de cuerpo de texto

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.

Texto principal del cuerpo

Haga que un párrafo se destaque agregando .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

Énfasis, dirección y abreviatura

Elemento Uso Opcional
<strong> Para enfatizar un fragmento de texto con importantes Ninguna
<em> Para enfatizar un fragmento de texto con énfasis Ninguna
<abbr> Envuelve abreviaturas y acrónimos para mostrar la versión ampliada al pasar el mouse por encima

Incluir titleatributo opcional para texto expandido

Use .initialismclass para abreviaturas en mayúsculas.
<address> Para obtener información de contacto de su antepasado más cercano o de todo el trabajo Preservar el formato terminando todas las líneas con<br>

Usando énfasis

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

Nota: siéntase libre de usar <b>y <i>en HTML5, pero su uso ha cambiado un poco. <b>está destinado a resaltar palabras o frases sin transmitir una importancia adicional, mientras que <i>es principalmente para voz, términos técnicos, etc.

Direcciones de ejemplo

Aquí hay dos ejemplos de cómo <address>se puede usar la etiqueta:

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

Abreviaturas de ejemplo

Las abreviaturas con un titleatributo tienen un borde inferior de puntos claros y un cursor de ayuda al pasar el mouse. Esto les da a los usuarios una indicación adicional de que algo se mostrará al pasar el mouse.

Agregue la initialismclase a una abreviatura para aumentar la armonía tipográfica dándole un tamaño de texto ligeramente más pequeño.

HTML es lo mejor desde el pan rebanado.

Una abreviatura de la palabra atributo es attr .

cotizaciones en bloque

Elemento Uso Opcional
<blockquote> Elemento a nivel de bloque para citar contenido de otra fuente

Agregar citeatributo para la URL de origen

Uso .pull-lefty .pull-rightclases para opciones flotantes
<small> Elemento opcional para agregar una cita de cara al usuario, generalmente un autor con título de trabajo Coloque el <cite>alrededor del título o nombre de la fuente

Para incluir una cita en bloque, envuelva <blockquote>cualquier HTML como cita. Para citas directas recomendamos un <p>.

Incluya un elemento opcional <small>para citar su fuente y obtendrá un guión &mdash;largo antes de él para fines de estilo.

  1. <cita en bloque>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante venenatis. </p>
  3. <small> Alguien famoso </small>
  4. </blockquote>

Ejemplos de citas en bloque

Las comillas en bloque predeterminadas tienen el estilo siguiente:

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

Alguien famoso en Cuerpo de trabajo

Para hacer flotar su cita en bloque a la derecha, agregue class="pull-right":

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

Alguien famoso en Cuerpo de trabajo

Liza

desordenado

<ul>

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

sin estilo

<ul class="unstyled">

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

Ordenado

<ol>

  1. Lorem ipsum dolor siéntate amet
  2. Consectetur adipiscing elit
  3. entero molestie lorem en massa
  4. Facilisis en aliquet pretium nisl
  5. nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Descripción

<dl>

Listas de descripción
Una lista de descripción es perfecta para definir términos.
eusmod
Vestibulum id ligula porta felis euismod semper 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ón horizontal

<dl class="dl-horizontal">

Listas de descripción
Una lista de descripción es perfecta para definir términos.
eusmod
Vestibulum id ligula porta felis euismod semper 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! Las listas de descripciones horizontales truncarán los términos que son demasiado largos para caber en la corrección de la columna izquierda text-overflow. En ventanas gráficas más estrechas, cambiarán al diseño apilado predeterminado.

En línea

Envuelva fragmentos de código en línea con <code>.

  1. Por ejemplo , la sección < code> </ code > debe ajustarse como en línea .

Bloque básico

Úselo <pre>para varias líneas de código. Asegúrese de escapar de los corchetes angulares en el código para una representación adecuada.

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

Nota: asegúrese de mantener el código dentro <pre>de las etiquetas lo más cerca posible a la izquierda; renderizará todas las pestañas.

Opcionalmente, puede agregar la .pre-scrollableclase que establecerá una altura máxima de 350 px y proporcionará una barra de desplazamiento del eje y.

Google embellecer

Tome el mismo <pre>elemento y agregue dos clases opcionales para mejorar la representación.

  1. <p> Texto de muestra aquí... </p>
  1. <pre clase = "impresión bonita
  2. linos" >
  3. <p>Texto de muestra aquí...</p>
  4. </pre>

Descargue google-code-prettify y vea el archivo Léame para saber cómo usarlo.

marcado de tabla

Etiqueta Descripción
<table> Elemento envolvente para mostrar datos en formato tabular
<thead> Elemento contenedor para filas de encabezado de tabla ( <tr>) para etiquetar columnas de tabla
<tbody> Elemento contenedor para filas de tabla ( <tr>) en el cuerpo de la tabla
<tr> Elemento contenedor para un conjunto de celdas de tabla ( <td>o <th>) que aparece en una sola fila
<td> Celda de tabla predeterminada
<th> Celda de tabla especial para etiquetas de columna (o fila, según el alcance y la ubicación)
Debe usarse dentro de un<thead>
<caption> Descripción o resumen de lo que contiene la tabla, especialmente útil para lectores de pantalla
  1. <tabla>
  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. </tabla>

Opciones de mesa

Nombre Clase Descripción
Defecto Ninguna Sin estilos, solo columnas y filas
Básico .table Solo líneas horizontales entre filas
Bordeado .table-bordered Redondea las esquinas y agrega un borde exterior
rayas de cebra .table-striped Agrega un color de fondo gris claro a las filas impares (1, 3, 5, etc.)
Condensado .table-condensed Corta el relleno vertical por la mitad, de 8 px a 4 px, dentro de todos los elementos tdyth

Tablas de ejemplo

1. Estilos de tabla predeterminados

Las tablas se diseñan automáticamente con solo unos pocos bordes para garantizar la legibilidad y mantener la estructura. Con 2.0, la .tableclase es obligatoria.

  1. < clase de tabla = "tabla" >
  2. </tabla>
# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo

2. Mesa de rayas

Ponga un poco de fantasía con sus tablas agregando rayas de cebra, solo agregue la .table-stripedclase.

Nota: Las tablas rayadas usan el :nth-childselector CSS y no está disponible en IE7-IE8.

  1. < clase de tabla = "tabla tabla-rayada" >
  2. </tabla>
# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo

3. Mesa bordeada

Agregue bordes alrededor de toda la mesa y esquinas redondeadas por motivos estéticos.

  1. < clase de tabla = "tabla con borde de tabla" >
  2. </tabla>
# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
Marca Otón @getbootstrap
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo

4. Tabla condensada

Haga que sus tablas sean más compactas agregando la .table-condensedclase para cortar el relleno de las celdas de la tabla a la mitad (de 8 px a 4 px).

  1. < clase de tabla = "tabla tabla-condensada" >
  2. </tabla>
# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo

5. ¡Combínalos todos!

Siéntase libre de combinar cualquiera de las clases de mesa para lograr diferentes looks utilizando cualquiera de las clases disponibles.

  1. < clase de tabla = "tabla tabla-rayada tabla-bordeada tabla-condensada" >
  2. ...
  3. </tabla>
Nombre completo
# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo

HTML y CSS flexibles

La mejor parte de los formularios en Bootstrap es que todas sus entradas y controles se ven muy bien, sin importar cómo los construya en su marcado. No se requiere HTML superfluo, pero proporcionamos los patrones para aquellos que lo requieran.

Los diseños más complicados vienen con clases sucintas y escalables para facilitar el diseño y la vinculación de eventos, por lo que está cubierto en cada paso.

Cuatro diseños incluidos

Bootstrap viene con soporte para cuatro tipos de diseños de formulario:

  • Vertical (predeterminado)
  • Búsqueda
  • En línea
  • Horizontal

Los diferentes tipos de diseños de formulario requieren algunos cambios en el marcado, pero los controles en sí mismos permanecen y se comportan de la misma manera.

Estados de control y más

Los formularios de Bootstrap incluyen estilos para todos los controles de formulario base como entrada, área de texto y selección que esperaría. Pero también viene con una serie de componentes personalizados como entradas añadidas y antepuestas y soporte para listas de casillas de verificación.

Se incluyen estados como error, advertencia y éxito para cada tipo de control de formulario. También se incluyen estilos para controles deshabilitados.

Cuatro tipos de formularios.

Bootstrap proporciona marcas y estilos simples para cuatro estilos de formularios web comunes.

Nombre Clase Descripción
Vertical (predeterminado) .form-vertical (no requerido) Etiquetas apiladas y alineadas a la izquierda sobre los controles
En línea .form-inline Controles de etiquetas y bloques en línea alineados a la izquierda para un estilo compacto
Búsqueda .form-search Entrada de texto extra redondeado para una estética de búsqueda típica
Horizontal .form-horizontal Flotar a la izquierda, etiquetas alineadas a la derecha en la misma línea que los controles

Formularios de ejemplo que usan solo controles de formulario, sin marcado adicional

Forma básica

Valores predeterminados inteligentes y livianos sin marcado adicional.

Ejemplo de texto de ayuda a nivel de bloque aquí.

  1. < clase de formulario = "bien" >
  2. <etiqueta> Nombre de la etiqueta </etiqueta>
  3. < tipo de entrada = "texto" clase = "span3" marcador de posición = "Escriba algo…" >
  4. <span class = "help-block" > Ejemplo de texto de ayuda a nivel de bloque aquí. </span>
  5. < clase de etiqueta = "casilla de verificación" >
  6. < tipo de entrada = "casilla de verificación" > Mírame
  7. </etiqueta>
  8. < tipo de botón = "enviar" clase = "btn" > Enviar </botón>
  9. </formulario>

Formulario de búsqueda

Agregar .form-searchal formulario y .search-queryal input.

  1. < clase de formulario = "búsqueda de formulario de pozo" >
  2. < tipo de entrada = "texto" clase = "consulta de búsqueda de medio de entrada" >
  3. < tipo de botón = "enviar" clase = "btn" > Buscar </botón>
  4. </formulario>

formulario en línea

Agregue .form-inlinepara refinar la alineación vertical y el espaciado de los controles de formulario.

  1. < clase de formulario = "bueno formulario en línea" >
  2. < tipo de entrada = "texto" clase = "entrada pequeña" marcador de posición = "Correo electrónico" >
  3. < tipo de entrada = "contraseña" clase = "entrada pequeña" marcador de posición = "Contraseña" >
  4. < clase de etiqueta = "casilla de verificación" >
  5. < tipo de entrada = "casilla de verificación" > Recuérdame
  6. </etiqueta>
  7. < tipo de botón = "enviar" clase = "btn" > Iniciar sesión </botón>
  8. </formulario>

formas horizontales

A la derecha se muestran todos los controles de formulario predeterminados que admitimos. Aquí está la lista con viñetas:

  • Entradas de texto (texto, contraseña, correo electrónico, etc.)
  • caja
  • radio
  • Seleccione
  • selección múltiple
  • entrada de archivo
  • área de texto

Además del texto de forma libre, cualquier entrada basada en texto HTML5 aparece así.

marcado de ejemplo

Dado el diseño de formulario de ejemplo anterior, aquí está el marcado asociado con la primera entrada y el grupo de control. Las clases , y son necesarias para el .control-groupestilo .control-label..controls

  1. < clase de formulario = "formulario-horizontal" >
  2. <conjunto de campos>
  3. <leyenda> Texto de la leyenda </leyenda>
  4. <div clase = "grupo de control" >
  5. <label class = "control-label" for = "input01" > Entrada de texto </label>
  6. < clase div = "controles" >
  7. < tipo de entrada = "texto" clase = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Texto de ayuda de apoyo </p>
  9. </div>
  10. </div>
  11. </conjunto de campos>
  12. </formulario>

Estados de control de formulario

disabledBootstrap presenta estilos para estados y enfocados compatibles con el navegador . Eliminamos el Webkit predeterminado outliney aplicamos un box-shadowen su lugar para :focus.


Validación de formulario

También incluye estilos de validación para errores, advertencias y éxito. Para usar, agregue la clase de error al entorno .control-group.

  1. <conjunto de campos
  2. clase = "error de grupo de control" >
  3. </conjunto de campos>
Algo de valor aquí
Algo puede haber salido mal
Por favor, corrija el error.
¡Guau!
¡Guau!

Ampliación de controles de formulario

Anteponer y agregar entradas

Los grupos de entrada, con texto adjunto o antepuesto, brindan una manera fácil de dar más contexto a sus entradas. Grandes ejemplos incluyen el signo @ para nombres de usuario de Twitter o $ para finanzas.


Casillas de verificación y radios

Hasta v1.4, Bootstrap requería marcas adicionales alrededor de las casillas de verificación y las radios para apilarlas. Ahora, es una simple cuestión de repetir el <label class="checkbox">que envuelve el <input type="checkbox">.

También se admiten casillas de verificación y radios en línea. Simplemente agregue .inlinea cualquier .checkboxo .radioy listo.


Formularios en línea y anexar/anteponer

Para usar entradas antepuestas o anexadas en un formulario en línea, asegúrese de colocar .add-ony inputen la misma línea, sin espacios.


Texto de ayuda del formulario

Para agregar texto de ayuda para las entradas de su formulario, incluya texto de ayuda en línea con <span class="help-inline">o un bloque de texto de ayuda con <p class="help-block">después del elemento de entrada.

Utilice las mismas .span*clases del sistema de cuadrícula para los tamaños de entrada.

También puede usar clases estáticas que no se asignan a la cuadrícula, no se adaptan a los estilos CSS receptivos ni tienen en cuenta los distintos tipos de controles (p. ej., inputfrente a select).

@

Aquí hay un texto de ayuda

.00
Aquí hay más texto de ayuda
ps .00

Nota: Las etiquetas rodean todas las opciones para áreas de clic mucho más grandes y un formulario más útil.

Botón clase="" Descripción
btn Botón gris estándar con degradado
btn btn-primary Proporciona peso visual adicional e identifica la acción principal en un conjunto de botones
btn btn-info Se utiliza como alternativa a los estilos predeterminados.
btn btn-success Indica una acción exitosa o positiva.
btn btn-warning Indica que se debe tener precaución con esta acción.
btn btn-danger Indica una acción peligrosa o potencialmente negativa
btn btn-inverse Botón gris oscuro alternativo, no vinculado a una acción o uso semántico

Botones para acciones

Como convención, los botones solo deben usarse para acciones, mientras que los hipervínculos deben usarse para objetos. Por ejemplo, "Descargar" debería ser un botón, mientras que "actividad reciente" debería ser un enlace.

Los estilos de botón se pueden aplicar a cualquier cosa con la .btnclase aplicada. Sin embargo, por lo general querrá aplicarlos solo a elementos <a>y <button>.

Compatibilidad entre navegadores

IE9 no recorta los gradientes de fondo en las esquinas redondeadas, por lo que lo eliminamos. Relacionado, IE9 bloquea los buttonelementos deshabilitados, lo que hace que el texto sea gris con una sombra de texto desagradable que no podemos arreglar.

Múltiples tamaños

¿Te apetece botones más grandes o más pequeños? Agregue .btn-large, .btn-smallo .btn-minipara dos tamaños adicionales.


Estado deshabilitado

Para los botones deshabilitados, agregue la .disabledclase a los enlaces y el disabledatributo a los <button>elementos.

Enlace principal Enlace

¡Aviso! Usamos .disabledcomo una clase de utilidad aquí, similar a la .activeclase común, por lo que no se requiere prefijo.

Una clase, varias etiquetas

Utilice la .btnclase en un elemento <a>, <button>o <input>.

Enlace
  1. <a class = "btn" href = "" > Enlace </a>
  2. < clase de botón = "btn" tipo = "enviar" >
  3. Botón
  4. </botón>
  5. < clase de entrada = "btn" tipo = "botón"
  6. valor = "Entrada" >
  7. < clase de entrada = "btn" tipo = "enviar"
  8. valor = "Enviar" >

Como práctica recomendada, intente hacer coincidir el elemento con su contexto para garantizar que coincida la representación entre navegadores. Si tiene un input, use un <input type="submit">para su botón.

  • icono de vidrio
  • icono-musica
  • icono-búsqueda
  • icono-sobre
  • icono-corazon
  • icono-estrella
  • icono-estrella-vacío
  • icono-usuario
  • icono de la película
  • icono-th-grande
  • icono-th
  • icono-th-list
  • icono-ok
  • icono-eliminar
  • icono-zoom-in
  • icono-zoom-out
  • icono desactivado
  • icono-señal
  • icono-cog
  • icono-basura
  • icono-casa
  • icono-archivo
  • icono-tiempo
  • icono-carretera
  • icono-descargar-alt
  • icono-descargar
  • subir iconos
  • icono-bandeja de entrada
  • icon-play-circle
  • icono-repetir
  • icono-actualizar
  • icono-lista-alt
  • bloqueo de icono
  • icono-bandera
  • icono-auriculares
  • icono-volumen-apagado
  • icono-volumen-abajo
  • icono-volumen-arriba
  • icono-qrcode
  • icono-código de barras
  • etiqueta-icono
  • etiquetas-icono
  • icono-libro
  • icono-marcador
  • icono de impresión
  • icono-camara
  • icono-fuente
  • icono-negrita
  • icono-cursiva
  • icono-texto-altura
  • icono-texto-ancho
  • icono-alinear-izquierda
  • icono-alinear-centro
  • icono-alinear-derecha
  • icono-alinear-justificar
  • lista de iconos
  • icono-sangría-izquierda
  • icono-sangría-derecha
  • icono-facetime-video
  • icono-imagen
  • icono-lapiz
  • icono-mapa-marcador
  • ajuste de icono
  • icono-tinte
  • icono-editar
  • icono-compartir
  • verificación de icono
  • icono-mover
  • icono-paso-hacia atrás
  • icono-retroceso rápido
  • icono-hacia atrás
  • juego de iconos
  • icono-pausa
  • parada de icono
  • icono-adelante
  • icono de avance rápido
  • icono-paso-adelante
  • icono-expulsar
  • icono-chevron-izquierda
  • icono-chevron-derecha
  • icono-más-signo
  • icono-signo-menos
  • icono-eliminar-firmar
  • icono-ok-signo
  • icono-pregunta-signo
  • icono-info-signo
  • icono-captura de pantalla
  • icono-eliminar-círculo
  • icono-ok-círculo
  • icono-prohibición-círculo
  • icono-flecha-izquierda
  • icono-flecha-derecha
  • icono-flecha-arriba
  • icono-flecha-abajo
  • icono-compartir-alt
  • icono-cambiar-tamaño-completo
  • icono-cambiar tamaño-pequeño
  • icono-más
  • icono-menos
  • icono-asterisco
  • icono-signo-de-exclamación
  • icono-regalo
  • icono-hoja
  • icono de fuego
  • icono-ojo-abierto
  • icono-ojo-cerrar
  • icono-señal-de-advertencia
  • icono-plano
  • icono-calendario
  • icono-aleatorio
  • icono-comentario
  • icono-imán
  • icono-chevron-arriba
  • icono-chevron-abajo
  • icono-retweet
  • icono-carrito-de-compras
  • icono-carpeta-cerrar
  • icono-carpeta-abrir
  • icono-cambiar tamaño-vertical
  • icono-redimensionar-horizontal
  • icono-hdd
  • megáfono-icono
  • icono-campana
  • icono-certificado
  • icono-pulgar-hacia arriba
  • icono-pulgar-abajo
  • icono-mano-derecha
  • icono-mano-izquierda
  • icono-mano-arriba
  • icono-mano-abajo
  • icono-círculo-flecha-derecha
  • icono-círculo-flecha-izquierda
  • icono-círculo-flecha arriba
  • icono-círculo-flecha-abajo
  • icono-globo
  • icono-llave
  • icono-tareas
  • icono-filtro
  • icono-maletín
  • icono-pantalla completa

Construido como un sprite

En lugar de hacer que cada ícono sea una solicitud adicional, los compilamos en un sprite: un grupo de imágenes en un archivo que usa CSS para colocar las imágenes con background-position. Este es el mismo método que usamos en Twitter.com y nos ha funcionado bien.

Todas las clases de iconos tienen el prefijo .icon-para el espacio de nombres y el alcance adecuados, al igual que nuestros otros componentes. Esto ayudará a evitar conflictos con otras herramientas.

Glyphicons nos ha otorgado el uso del conjunto Halflings en nuestro kit de herramientas de código abierto siempre que proporcionemos un enlace y crédito aquí en los documentos. Por favor considere hacer lo mismo en sus proyectos.

Cómo utilizar

Bootstrap usa una <i>etiqueta para todos los íconos, pero no tienen una clase de caso, solo un prefijo compartido. Para usarlo, coloque el siguiente código en cualquier lugar:

  1. <i clase = "búsqueda de iconos" ></i>

También hay estilos disponibles para iconos invertidos (blancos), preparados con una clase adicional:

  1. <i class = "icono-búsqueda icono-blanco" ></i>

Hay 140 clases para elegir para sus iconos. Simplemente agregue una <i>etiqueta con las clases correctas y listo. Puede encontrar la lista completa en sprites.less o aquí mismo en este documento.

¡Aviso! Cuando se usa al lado de cadenas de texto, como en botones o enlaces de navegación, asegúrese de dejar un espacio después de la <i>etiqueta para el espacio adecuado.

casos de uso

Los íconos son geniales, pero ¿dónde los usaría uno? Aqui hay algunas ideas:

  • Como elementos visuales para la navegación de la barra lateral
  • Para una navegación puramente basada en iconos
  • Para botones que ayuden a transmitir el significado de una acción
  • Con enlaces para compartir contexto en el destino de un usuario

Esencialmente, en cualquier lugar donde pueda colocar una <i>etiqueta, puede colocar un icono.

Ejemplos

Úselos en botones, grupos de botones para una barra de herramientas, navegación o entradas de formulario antepuestas.