Bootstrap (parte 4): Tipografía.

Redes sociales

En este artículo, vamos a ver algunos elementos HTML cuyo estilo y significado son diferentes en Bootstrap a los valores predeterminados por el navegador.

Logo Bootstrap

Ajustes predeterminados

Por defecto, Bootstrap utiliza un tamaño de fuente (font-size) de 14px, con una altura de línea (line-height) de 1.428. Se aplica al <body> del documento y a todos los párrafos.

Adicionalmente los párrafos <p> disponen de un margen inferior que es igual a la mitad de su line-height computerizada (10px por defecto).

Encabezados <h1> a <h6>

Por defecto, Bootstrap asigna a los elementos de encabezado <h1> a <h6> los siguientes estilos:

Encabezados bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: encabezamiento</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h1>Bootstrap encabezado h1 (36px)</h1>
  <h2>Bootstrap encabezado h2 (30px)</h2>
  <h3>Bootstrap encabezado h3 (24px)</h3>
  <h4>Bootstrap encabezado h4 (18px)</h4>
  <h5>Bootstrap encabezado h5 (14px)</h5>
  <h6>Bootstrap encabezado h6 (12px)</h6>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

 

En bootstrap se utiliza la etiqueta <small> para crear un texto más pequeño y de color más suave en cualquier encabezamiento:

Bootstrap small


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: small</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Encabezamiento h1 <small>Texto secundario</small></h1>
  <h2>Encabezamiento h2 <small>Texto secundario</small></h2>
  <h3>Encabezamiento h3 <small>Texto secundario</small></h3>
  <h4>Encabezamiento h4 <small>Texto secundario</small></h4>
  <h5>Encabezamiento h5 <small>Texto secundario</small></h5>
  <h6>Encabezamiento h6 <small>Texto secundario</small></h6>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>

Resaltar texto <mark>

En Bootstrap se utiliza la etiqueta HTML <mark> para resaltar texto de la siguiente forma:

<p>Use el elemento mark para <mark>resaltar</mark> el texto.</p>

obteniendo:
Use el elemento mark para resaltar el texto.

Marcar abreviaturas o acrónimos <abbr>

El elemento abbr se utiliza para marcar una abreviatura o acrónimo:

<p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr> fue fundada el 24 de octubre de 1945.</p>

Visualizándose lo siguiente en el navegador (coloque el ratón sobre la palabra ONU):

La ONU fue fundada el 24 de octubre de 1945.

Citar textos <blockquote>

La etiqueta <blockquote> se utiliza junto con la etiqueta <footer> para citar texto de una tercera fuente:

<blockquote class="blockquote-reverse">
 <p>La tierra tiene lo suficiente para satisfacer las necesidades de todos,
  pero no las ambiciones de unos cuantos.</p>
 <footer>Mahatma Gandhi</footer>
 </blockquote>

Obteniéndose en el navegador lo siguiente:

Bootdtrap: blockquote

Si deseamos que el texto citado, se muestre alineado a la derecha:

Bootstrap: blockquoue reverse

utilizaremos la clase .blockquote-reverse de la siguiente forma:

<blockquote class="blockquote-reverse">
 <p>La tierra tiene lo suficiente para satisfacer las necesidades de todos,
 pero no las ambiciones de unos cuantos.</p>
 <footer>Mahatma Gandhi</footer>
</blockquote>

Listas de descripción <dl>

Bootstrap implementa la etiqueta HTML <dl> de la siguiente forma:

<dl>
 <dt>Variedades de café</dt>
  <dd>- café arábica</dd>
  <dd>- café robuta</dd>
 <dt>Tipos de té</dt>
  <dd>- té verde</dd>
  <dd>- té blanco</dd>
  <dd>- té rojo</dd>
</dl>

Obteniéndose en el navegador:

Variedades de café
– café arábica
– café robuta
Tipos de té
– té verde
– té blanco
– té rojo

Resaltar textos <code>

Bootstrap permite resaltar partes del texto utilizando la etiqueta code :

<p>Los siguientes elementos HTML: <code>span</code>, <code>section</code>, y <code>div</code> definen secciones en un documento.

obteniéndose en el navegador:

06

Entradas de teclado <kbd>

Bootstrap implementa la etiqueta HTML <kbd> de la siguiente forma:

<p>utilice <kbd>ctrl + s</kbd> para abrir el cuadro de diálogo "Guardar como...".</p>

Visualizándose en el navegador:

Bootstrap: kbd

Múltiples líneas de código <pre>

Bootstrap implementa la etiqueta HTML <pre> de la siguiente forma:

<pre>
 El texto incluido en un elemento pre
 es mostrado con una fuente de ancho
 fijo, y se preservan todos
 los      espacios y saltos
 de línea.
</pre>

el resultado en el navegador sería:

Bootstrap: pre

junto a la etiqueta <pre> se puede utilizar la clase .pre-scrollable, para que el texto se muestre dentro de un cuadro con una altura máxima de 350px y con una barra de desplazamiento vertical para moverse por él:

<pre class="pre-scrollable">
El texto incluido en un elemento pre
 es mostrado con una fuente de ancho
 fijo, y se preservan todos
 los      espacios y saltos
 de línea.
</pre>

que en el navegador se mostraría así:

Bootstrap: .pre-scrollable

Colores y fondo de texto

Bootstrap incluye algunas clases que permiten asignar colores tanto al texto como al fondo del mismo.

Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-warning, y .text-danger.

Estas clases las utilizaríamos de la siguiente forma:

<p class="text-muted">Texto de color muted.</p>
<p class="text-primary">Texto de color important.</p>
<p class="text-success">texto de color success.</p>
<p class="text-info">texto de color information.</p>
<p class="text-warning">Texto de color warning.</p>
<p class="text-danger">texto de color danger.</p>

Visualizándose en el navegador así:

Bootstrap: color texto

Las clase para los colores de fondo son: .bg-primary,  .bg-success, bg-info, bg-warning, y .bg-danger

las utilizaremos así:

<p class="bg-primary">Color de fondo important.</p>
<p class="bg-success">Color de fondo success.</p>
<p class="bg-info">Color de fondo information.</p>
<p class="bg-warning">Color de fondo warning.</p>
<p class="bg-danger">Color de fondo danger.</p>

que en el navegador se mostrarán así:

11

Clase para alinar texto

Bootstrap utiliza las clases: .text-left, .text-center, .text-right y .text-justify, para alinear párrafos a la izquierda, centro, derecha y justificado. Así mismo, utiliza la clase .text-nowrap, para que el texto no salte a la línea siguiente cuando llega al borde derecho de la ventana:

<p class="text-left">Párrfo alineado a la izquierda.</p>
<p class="text-right">Párrafo alineado a la derecha.</p>
<p class="text-center">Párrafo centrado.</p>
<p class="text-justify">Párrafo justificado: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p class="text-nowrap">Clase .text-nowrap: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

el resultado en el navegador:

Bootstrap: aliniear textto

Clases para mayúsculas y minúsculas

Bootstrap implementa las clases .text-lowercase, .text-uppercase y .text-capitalize para mostrar los textos en minúsculas y mayúsculas y capitales (la primera letra de cada palabra en mayúsculas):

<p class="text-lowercase">TEXTO EN minúsculas.</p>
<p class="text-uppercase">texto en MAYÚSCULAS.</p>
<p class="text-capitalize">la primera letra de cada palabra es mayúscula.</p>

que en el navegador veremos así:

texto en minúsculas.
TEXTO EN MAYÚSCULAS.
La Primera Letra De Cada Palabra Es Mayúscula

Referencia completa a la tipografía en Bootstrap

Para una referencia completa de todos los elemento tipográficos y clases contextuales uilizadas en Bootsprap consulte la guía de Bootstrap 

Código de ejemplo

A continuación tiene se detalla el código HTML de todos los elementos tipográficos que aparecen en este artículo.

<!DOCTYPE html>
<html lang="es">

<head>
  <title>Bootstrap: Tipografía</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>
<div class="container">

  <h1>Resaltar texto</h1>
  <p>Use el elemento mark para <mark>resaltar</mark> el texto.</p>

  <h1>Marcar abreviaturas o acrónimos</h1>
  <p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr> fue fundada el 24 de octubre de 1945.</p>

  <h1>Citar textos</h1>
  <h2>Alineado a la izquierda</h2>
  <blockquote>
  <p>La tierra tiene lo suficiente para satisfacer las necesidades de todos, pero no las ambiaciones de unos cuantos.</p>
  <footer>Mahatma Gandhi</footer>
  </blockquote>
  <h2>Alineado a la derecha</h2>
  <blockquote class="blockquote-reverse">
  <p>La tierra tiene lo suficiente para satisfacer las necesidades de todos, pero no las ambiaciones de unos cuantos.</p>
  <footer>Mahatma Gandhi</footer>
  </blockquote>

  <h1>Listas de descripción</h1>
  <dl>
    <dt>Variedades de café</dt>
    <dd>- café arábica</dd>
    <dd>- café robuta</dd>
    <dt>Tipos de té</dt>
    <dd>- té verde</dd>
    <dd>- té blanco</dd>
    <dd>- té rojo</dd>
    <dd>- té azul</dd>
    <dd>- té amarillo</dd>
  </dl> 

  <h1>Marcar texto</h1>
  <p>Los siguientes elementos HTML: <code>span</code>, <code>section</code>, and <code>div</code> definen secciones en un documento.</p>

  <h1>Entradas por teclado</h1>
  <p>utilice <kbd>ctrl + s</kbd> para abrir el cuadro de diálogo "Guardar como...".</p>

  <h1>Múltiples líneas de código</h1>
  <h2>Sin scroll</h2>
  <pre>
El texto incluido en un elemento pre
es mostrado con una fuente de ancho
fijo, y se preservan todos
los      espacios y saltos
de línea.
   </pre>
   <h2>Con scroll</h2>
<pre class="pre-scrollable">
El texto incluido en un elemento pre
es mostrado con una fuente de ancho
fijo, y se preservan todos
los      espacios y saltos
de línea.
   </pre>

   <h1>Colores de texto predefinidos</h1>
   <p class="text-muted">Texto de color muted.</p>
  <p class="text-primary">Texto de color important.</p>
  <p class="text-success">texto de color success.</p>
  <p class="text-info">texto de color information.</p>
  <p class="text-warning">Texto de color warning.</p>
  <p class="text-danger">texto de color danger.</p>

  <h1>Colores de fondo predefinidos</h1>
  <p class="bg-primary">Color de fondo important.</p>
  <p class="bg-success">Color de fondo success.</p>
  <p class="bg-info">Color de fondo information.</p>
  <p class="bg-warning">Color de fondo warning.</p>
  <p class="bg-danger">Color de fondo danger.</p> 

  <h1>Alinear párrafos</h1>
  <p class="text-left">Párrfo alineado a la izquierda.</p>
  <p class="text-right">Párrafo alineado a la derecha.</p>
  <p class="text-center">Párrafo centrado.</p>
  <p class="text-justify">Párrafo justificado: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 

dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 

culpa qui officia deserunt mollit anim id est laborum."</p>
  <p class="text-nowrap">Clase .text-nowrap: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <h1>Mayúsculas y minúsculas</h1>
   <p class="text-lowercase">TEXTO EN minúsculas.</p>
   <p class="text-uppercase">texto en MAYÚSCULAS.</p>
   <p class="text-capitalize">la primera letra de cada palabra es mayúscula.</p>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

</html>
Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.