Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Tutorial de Bootstrap 3: El texto

Ángel Robledano
  • Escrito por Ángel Robledano el 03 de Junio de 2015
  • 3 min de lectura | Mobile
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 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.

Alineación y formato de texto

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.


Descargar Tutorial en PDF de Bootstrap

Compártelo con los botones sociales que aparecen a continuación y podrás descargar el tutorial de Bootstrap

¡Gracias! Ya tienes tu tutorial, déjanos tu email para enviártelo.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars