OpenWebinars

Frameworks

Tutorial de Bootstrap 3: El texto

Aprende a trabajar y dar estilo al texto de tu página web con Bootstrap 3.

Angel Robledano

Angel Robledano

Product Manager

Lectura 3 minutos

Publicado el 3 de junio de 2015

Compartir

    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.

Conviértete en Frontend Developer
Domina las tecnologías más demandadas. Accede a cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.
Comenzar gratis ahora

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.

Mejora la colaboración entre tus equipos de diseño y desarrollo
Cursos, talleres y laboratorios de JavaScript, React, Angular, UX, HTML y CSS para todos los niveles. Incrementa la productividad de tus proyectos en un 45%
Solicitar más información

 

Compartir este post

También te puede interesar