Tutorial Bootstrap 3: Introducción e instalación
Si estás metido en el mundo del desarrollo Web, habrás oído hablar de Bootstrap, para los que no, Bootstrap es un framework...
Aprende a trabajar y dar estilo al texto de tu página web con Bootstrap 3.
Tabla de contenidos
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.
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.
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.
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
Las listas se utilizan para agrupar elementos relacionados, dentro de las listas hay varios tipos de listas.
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.
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.
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.
Par alinear el texto tenemos definidos 3 estilos, izquierda, derecha y centrado . Para conseguir que nuestro texto, esté donde queremos es tan fácil como:
Cuando queremos resaltar una parte del texto siempre lo ponemos en negrita, con Bootstrap tenemos también esta opción. Para ponerla en negrita, utilizamos la etiqueta strong.
Por ejemplo:
El texto también lo podemos tener en cursiva:
Y subrayarlo también:
Ya tenemos los conocimientos básicos para trabajar el texto en nuestra web, Bootstrap tiene mucho más estilos predefinidos para el texto, los puedes ver en la documentación oficial.
También te puede interesar
Si estás metido en el mundo del desarrollo Web, habrás oído hablar de Bootstrap, para los que no, Bootstrap es un framework...
Aprende a maquetar sitios web responsive usando el framework Bootstrap 4.