Tutorial de Bootstrap 3: El texto

Lo más importante en una web es el contenido, y para ello Bootstrap tiene una gran cantidad de estilos predefinidos para los titulares y textos . Tenemos a nuestra disposición muchos estilos, nosotros en este tutorial vamos a verlos más interesantes, en la documentación oficial los tenéis todos y acompañados de ejemplos.

Titulares

Para crear títulos en nuestra web, utilizaremos las etiquetas h1 hasta h6 , estas etiquetas sirven para describir el contenido de nuestra web. Hay que tener en cuenta que la etiqueta h1 es la más importante y solo debe usarse una vez por cada página web , luego h2 sería la siguiente más importante y se utiliza para indicar los títulos de subsecciones, el h2 puede ser utilizado varias veces, así hasta el h6, que es la etiqueta de encabezado que menor importancia tiene de entre las demás.

Después de esta pequeña introducción a los encabezados, vamos a ver como usarlos con Bootstrap. Es muy fácil de utilizar, como ya tenemos los estilos predefinidos, lo único que haremos es poner la etiqueta que queramos usar y automáticamente coge el estilo.

Como el h1 es la etiqueta más importante es la que más destaca de todas y como h6 es la que menos importancia tiene de todas, es la más pequeña, como puedes ver en el resultado de arriba.

Además, a los titulares le podemos añadir un subtexto añadiendo una etiqueta small , la etiqueta debe de ir antes de cerrar el encabezado, si no tendrá otro efecto.

Si quieres puedes utilizar una etiqueta span , puedes hacerlo pero debes de asignarle la clase small, el resultado debe ser el mismo.

Más adelante, veremos como personalizar para cambiar tamaños y colores a la fuente.

Párrafos

El tamaño predeterminado de fuente es de 14 px, para insertar textos hay que utilizar las etiquetas p , cada párrafo tiene que ir dentro de ellas.

Si queremos destacar uno de los párrafos, le añadimos la clase predefinida .lead.

Como podréis observar, el primer párrafo destaca sobre los otros dos.

Bloque de citas

En Bootstrap también tenemos estilos predefinidos para poder citar frases o párrafos. Simplemente hay que utilizar la etiqueta blockquote.

Y lo ideal es que cuando citemos a una persona, pongamos su autor o fuente.

Si queremos alinear a la derecha el bloque de citas , le añadimos a la etiqueta de blockquote la clase .blockquote-reverse

Listas

Las listas se utilizan para agrupar elementos relacionados, dentro de las listas hay varios tipos de listas.

Listas Ordenadas

Utiliza este tipo de listas para crear listas ordenadas si el orden es importante. Utilizamos la etiqueta ol para decir que es una lista ordenada y la etiqueta li para decir que es un elemento de la lista.

Listas desordenadas

Si el orden de los elemento no es importante y no es necesario ordenarlas, utilizamos la etiqueta ul , y dentro una etiqueta li para cada elemento de la lista.

Listas en una linea

Si queremos tener un listado en una misma línea , y no debajo un elemento de otro, le añadiremos a la etiqueta ul la clase list-inline.