Pulsa aquí para ver la cláusula informativa
Elementos básicos de HTML
El elemento p genera párrafos. Configura un bloque independiente con un leve margen en la parte superior e inferior del mismo. La etiqueta identifica partes del texto como enlaces de hipertexto.
Además, desde el editor de texto, podemos aplicar a fragmentos de esos párrafos las siguientes clases:
- text-muted
- text-primary
- text-info
- text-success
- text-danger
- text-warning
Etiquetas de texto para realce semántico
Podemos enfatizar fragmentos de texto mediante el elemento em o destacar con mayor importancia aún empleando el elemento strong.
Utilización de Títulos (h1 - h6)
Los siguientes elementos realzan visual y semánticamente bloques de texto completos.
Título de tipo 1 texto secundario
Título de tipo 2 texto secundario
Título de tipo 3 texto secundario
Título de tipo 4 texto secundario
Título de tipo 5 texto secundario
Título de tipo 6 texto secundario
Línea horizontal texto secundario
Línea horizontal con la clase dashed
Texto reducido
El elemento small para leyendas, pies de fotos o aclaraciones.
Texto destacado
Párrafo con clase .lead para texto destacado.
Cita
Utilizando el estilo preformateado blockquote (entresacado o cita literal).
Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui.
Opciones para los bloques de citas
Nombrar fuente utilizando small.
Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui.
El autor Nombre de la fuente
Alinear a la derecha con la clase .pull-right.
Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui.
El autor Nombre de la fuente
Listas desordenadas
- Estilo por defecto
- Lorem ipsum dolor
- Lorem ipsum dolor
- Clase adicional
list-line - Lorem ipsum dolor
- Lorem ipsum dolor
- Clase adicional
list-check - Lorem ipsum dolor
- Lorem ipsum dolor
- Clase adicional
list-arrow - Lorem ipsum dolor
- Lorem ipsum dolor
- Clase adicional
list-circle - Lorem ipsum dolor
- Lorem ipsum dolor
Listas ordenadas
- Estilo por defecto
- Lorem ipsum dolor
- Lorem ipsum dolor
Tablas
Para que los estilos por defecto se apliquen a cualquier tabla, basta con añadir la clase .table.
| Encabezado de tabla | Encabezado de tabla | Encabezado de tabla |
|---|---|---|
| Pie de la tabla | Pie de la tabla | Pie de la tabla |
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
Tablas especiales
Tabla estilo zebra con la clase adicional .table-striped.
| Encabezado de tabla | Encabezado de tabla | Encabezado de tabla |
|---|---|---|
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
Tabla con bordes redondeados con la clase adicional .table-bordered.
| Encabezado de tabla | Encabezado de tabla | Encabezado de tabla |
|---|---|---|
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
Tabla estrecha con la clase adicional .table-condensed.
| Encabezado de tabla | Encabezado de tabla | Encabezado de tabla |
|---|---|---|
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
| Tabla con datos | Tabla con datos | Tabla con datos |
Buttons
Ejemplo botón por defecto Ejemplo botón por defecto background Ejemplo botón primary Ejemplo botón primary background Ejemplo botón secondary Ejemplo botón secondary background Ejemplo botón white Ejemplo botón white background Ejemplo botón inverse Ejemplo botón inverse background Ejemplo botón info Ejemplo botón info background Ejemplo botón success Ejemplo botón success background Ejemplo botón danger Ejemplo botón danger background Ejemplo botón warning Ejemplo botón warning background
Buttons sizes
Ejemplo botón por defecto más pequeño
Ejemplo botón por defecto pequeño
Ejemplo botón por defecto normal
Ejemplo botón por defecto grande
Disabled Buttons
Ejemplo botón por defecto Ejemplo botón por defecto background Ejemplo botón primary Ejemplo botón primary background Ejemplo botón secondary Ejemplo botón secondary background Ejemplo botón white Ejemplo botón inverse Ejemplo botón info Ejemplo botón info background Ejemplo botón success Ejemplo botón success background Ejemplo botón danger Ejemplo botón danger background Ejemplo botón warning Ejemplo botón warning background
