Además del scaffolding, los elementos HTML básicos se diseñan y mejoran con clases extensibles para brindar una apariencia fresca y consistente.
Toda la cuadrícula tipográfica se basa en dos variables Less en nuestro archivo variables.less: @baseFontSize
y @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.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
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 opcional title para texto expandido |
<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> |
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.
Aquí hay dos ejemplos de cómo <address>
se puede usar la etiqueta:
Las abreviaturas se escriben con texto en mayúsculas y un borde inferior de puntos claros. También tienen un cursor de ayuda al pasar el mouse para que los usuarios tengan una indicación adicional de que se mostrará algo al pasar el mouse.
HTML es lo mejor desde el pan rebanado.
Una abreviatura de la palabra atributo es attr .
Elemento | Uso | Opcional |
---|---|---|
<blockquote> |
Elemento a nivel de bloque para citar contenido de otra fuente | Agregar .pull-left y .pull-right clases 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 —
largo antes de él para fines de estilo.
- <cita en bloque>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante venenatis. </p>
- <small> Alguien famoso </small>
- </blockquote>
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
<ul>
<ul class="unstyled">
<ol>
<dl>
Envuelva fragmentos de código en línea con <code>
.
- Por ejemplo , la sección < code> </ code > debe ajustarse como en línea .
Úselo <pre>
para varias líneas de código. Asegúrese de convertir los signos de intercalación en sus caracteres Unicode para una representación adecuada.
<p>Texto de muestra aquí...</p>
- <antes>
- <p>Texto de muestra aquí...</p>
- </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.
Tome el mismo <pre>
elemento y agregue dos clases opcionales para mejorar la representación.
- <p> Texto de muestra aquí... </p>
- <pre clase = "impresión bonita
- linos" >
- <p>Texto de muestra aquí...</p>
- </pre>
Descargue google-code-prettify y vea el archivo Léame para saber cómo usarlo.
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 |
- <tabla>
- <cabeza>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabla>
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 td yth |
Las tablas se diseñan automáticamente con solo unos pocos bordes para garantizar la legibilidad y mantener la estructura. Con 2.0, la .table
clase es obligatoria.
- < clase de tabla = "tabla" >
- …
- </tabla>
# | Primer nombre | Apellido | Idioma |
---|---|---|---|
1 | Marca | Otón | CSS |
2 | jacob | Thornton | JavaScript |
3 | Stu | Mella | HTML |
Ponga un poco de fantasía con sus tablas agregando rayas de cebra, solo agregue la .table-striped
clase.
Nota: las tablas con sprites usan el :nth-child
selector CSS y no están disponibles en IE7-IE8.
- < clase de tabla = "tabla tabla-rayada" >
- …
- </tabla>
# | Primer nombre | Apellido | Idioma |
---|---|---|---|
1 | Marca | Otón | CSS |
2 | jacob | Thornton | JavaScript |
3 | Stu | Mella | HTML |
Agregue bordes alrededor de toda la mesa y esquinas redondeadas por motivos estéticos.
- < clase de tabla = "tabla con borde de tabla" >
- …
- </tabla>
# | Primer nombre | Apellido | Idioma |
---|---|---|---|
1 | Marcos Otto | CSS | |
2 | jacob | Thornton | JavaScript |
3 | Stu | Mella | |
3 | brosef | estalin | HTML |
Haga que sus tablas sean más compactas agregando la .table-condensed
clase para cortar el relleno de las celdas de la tabla a la mitad (de 8 px a 4 px).
- < clase de tabla = "tabla tabla-condensada" >
- …
- </tabla>
# | Primer nombre | Apellido | Idioma |
---|---|---|---|
1 | Marca | Otón | CSS |
2 | jacob | Thornton | JavaScript |
3 | Stu | Mella | HTML |
Siéntase libre de combinar cualquiera de las clases de mesa para lograr diferentes looks utilizando cualquiera de las clases disponibles.
- < clase de tabla = "tabla tabla-rayada tabla-bordeada tabla-condensada" >
- ...
- </tabla>
# | Primer nombre | Apellido | Idioma |
---|---|---|---|
1 | Marca | Otón | CSS |
2 | jacob | Thornton | JavaScript |
3 | Stu | Mella | HTML |
4 | brosef | estalin | HTML |
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.
Bootstrap viene con soporte para cuatro tipos de diseños de formulario:
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.
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.
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 |
Con v2.0, tenemos valores predeterminados más ligeros e inteligentes para los estilos de formulario. Sin marcado adicional, solo controles de formulario.
Reflejando los estilos predeterminados de WebKit, solo agregue .form-search
campos de búsqueda redondeados adicionales.
Las entradas están a nivel de bloque para comenzar. Para .form-inline
y .form-horizontal
, usamos bloque en línea.
A la izquierda se muestran todos los controles de formulario predeterminados que admitimos. Aquí está la lista con viñetas:
Hasta v1.4, los estilos de formulario predeterminados de Bootstrap usaban el diseño horizontal. Con Bootstrap 2, eliminamos esa restricción para tener valores predeterminados más inteligentes y escalables para cualquier formulario.
disabled
Bootstrap presenta estilos para estados y enfocados compatibles con el navegador . Eliminamos el Webkit predeterminado outline
y aplicamos un box-shadow
en su lugar para :focus
.
También incluye estilos de validación para errores, advertencias y éxito. Para usar, agregue la clase de error al entorno .control-group
.
- <conjunto de campos
- clase = "error de grupo de control" >
- …
- </conjunto de campos>
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.
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 .inline
a cualquier .checkbox
o .radio
y listo.
Para usar entradas antepuestas o anexadas en un formulario en línea, asegúrese de colocar .add-on
y input
en la misma línea, sin espacios.
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.
:after
. En los documentos, mostramos un color de fondo rojo claro al pasar el mouse para resaltar el tamaño del ícono.
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.
Con v2.0.0, optamos por usar una <i>
etiqueta para todos nuestros íconos, pero no tienen clase de caso, solo un prefijo compartido. Para usarlo, coloque el siguiente código en cualquier lugar:
- <i clase = "búsqueda de iconos" ></i>
También hay estilos disponibles para iconos invertidos (blancos), preparados con una clase adicional:
- <i class = "icono-búsqueda icono-blanco" ></i>
Hay 120 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.
Los íconos son geniales, pero ¿dónde los usaría uno? Aqui hay algunas ideas:
Esencialmente, en cualquier lugar donde pueda colocar una <i>
etiqueta, puede colocar un icono.
Úselos en botones, grupos de botones para una barra de herramientas, navegación o entradas de formulario antepuestas.