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: @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.
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 .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> |
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 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 .
| Elemento | Uso | Opcional |
|---|---|---|
<blockquote> |
Elemento a nivel de bloque para citar contenido de otra fuente | Agregar .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 —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>
<dl class="dl-horizontal">
¡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.
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 escapar de los corchetes angulares en el código 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.
Opcionalmente, puede agregar la .pre-scrollableclase que establecerá una altura máxima de 350 px y proporcionará una barra de desplazamiento del eje y.
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 tdyth |
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.
- < clase de tabla = "tabla" >
- …
- </tabla>
| # | Primer nombre | Apellido | Nombre de usuario |
|---|---|---|---|
| 1 | Marca | Otón | @mdo |
| 2 | jacob | Thornton | @grasa |
| 3 | larry | el pájaro | @gorjeo |
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.
- < clase de tabla = "tabla tabla-rayada" >
- …
- </tabla>
| # | Primer nombre | Apellido | Nombre de usuario |
|---|---|---|---|
| 1 | Marca | Otón | @mdo |
| 2 | jacob | Thornton | @grasa |
| 3 | larry | el pájaro | @gorjeo |
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 | Nombre de usuario |
|---|---|---|---|
| 1 | Marca | Otón | @mdo |
| Marca | Otón | @getbootstrap | |
| 2 | jacob | Thornton | @grasa |
| 3 | larry el pájaro | @gorjeo | |
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).
- < clase de tabla = "tabla tabla-condensada" >
- …
- </tabla>
| # | Primer nombre | Apellido | Nombre de usuario |
|---|---|---|---|
| 1 | Marca | Otón | @mdo |
| 2 | jacob | Thornton | @grasa |
| 3 | larry el pájaro | @gorjeo | |
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>
| Nombre completo | |||
|---|---|---|---|
| # | Primer nombre | Apellido | Nombre de usuario |
| 1 | Marca | Otón | @mdo |
| 2 | jacob | Thornton | @grasa |
| 3 | larry el pájaro | @gorjeo | |
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 |
Valores predeterminados inteligentes y livianos sin marcado adicional.
- < clase de formulario = "bien" >
- <etiqueta> Nombre de la etiqueta </etiqueta>
- < tipo de entrada = "texto" clase = "span3" marcador de posición = "Escriba algo…" >
- <span class = "help-block" > Ejemplo de texto de ayuda a nivel de bloque aquí. </span>
- < clase de etiqueta = "casilla de verificación" >
- < tipo de entrada = "casilla de verificación" > Mírame
- </etiqueta>
- < tipo de botón = "enviar" clase = "btn" > Enviar </botón>
- </formulario>
Agregar .form-searchal formulario y .search-queryal input.
- < clase de formulario = "búsqueda de formulario de pozo" >
- < tipo de entrada = "texto" clase = "consulta de búsqueda de medio de entrada" >
- < tipo de botón = "enviar" clase = "btn" > Buscar </botón>
- </formulario>
Agregue .form-inlinepara refinar la alineación vertical y el espaciado de los controles de formulario.
- < clase de formulario = "bueno formulario en línea" >
- < tipo de entrada = "texto" clase = "entrada pequeña" marcador de posición = "Correo electrónico" >
- < tipo de entrada = "contraseña" clase = "entrada pequeña" marcador de posición = "Contraseña" >
- < clase de etiqueta = "casilla de verificación" >
- < tipo de entrada = "casilla de verificación" > Recuérdame
- </etiqueta>
- < tipo de botón = "enviar" clase = "btn" > Iniciar sesión </botón>
- </formulario>
A la derecha se muestran todos los controles de formulario predeterminados que admitimos. Aquí está la lista con viñetas:
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
- < clase de formulario = "formulario-horizontal" >
- <conjunto de campos>
- <leyenda> Texto de la leyenda </leyenda>
- <div clase = "grupo de control" >
- <label class = "control-label" for = "input01" > Entrada de texto </label>
- < clase div = "controles" >
- < tipo de entrada = "texto" clase = "input-xlarge" id = "input01" >
- <p class = "help-block" > Texto de ayuda de apoyo </p>
- </div>
- </div>
- </conjunto de campos>
- </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.
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 .inlinea cualquier .checkboxo .radioy listo.
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.
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.
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.
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:
- <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.
¡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.
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.