Etiquetas
Parece que Bootstrap incluye por defecto decenas de estilos predefinidos para las etiquetas así como para los textos.
A continuación podemos ver la lista de etiquetas con su relación de tamaños.
| Tipo | Tamaño |
|---|---|
| h1 | 36px |
| h2 | 30px |
| h3 | 24px |
| h4 | 18px |
| h5 | 14px |
| h6 | 12px |
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Etiquetas Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- librerÃas opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>h1. Etiqueta nivel 1</h1>
<h2>h2. Etiqueta nivel 2</h2>
<h3>h3. Etiqueta nivel 3</h3>
<h4>h4. Etiqueta nivel 4</h4>
<h5>h5. Etiqueta nivel 5</h5>
<h6>h6. Etiqueta nivel 6</h6>
<!-- LibrerÃa jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap (también puedes
incluir archivos JavaScript individuales de los únicos
plugins que utilices) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
También podemos añadir elementos de tipo secundarios de tipo <small> dentro de las etiquetas. Podemos ver un ejemplo de código y ver como quedaría lo mencionado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Etiquetas Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- librerÃas opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>h1. Etiqueta nivel 1 <small>Elemento secundario nivel 1</small></h1>
<h2>h2. Etiqueta nivel 2 <small>Elemento secundario nivel 2</small></h2>
<h3>h3. Etiqueta nivel 3 <small>Elemento secundario nivel 3</small></h3>
<h4>h4. Etiqueta nivel 4 <small>Elemento secundario nivel 4</small></h4>
<h5>h5. Etiqueta nivel 5 <small>Elemento secundario nivel 5</small></h5>
<h6>h6. Etiqueta nivel 6 <small>Elemento secundario nivel 6</small></h6>
<!-- LibrerÃa jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap (también puedes
incluir archivos JavaScript individuales de los únicos
plugins que utilices) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Textos
Parrafo
El tamaño de letra (font-size) por defecto de Bootstrap 3 es de 14px y el interlineado (line-height) es de 1.428. Estos valores se aplican tanto al (body) como a todos los párrafos. Estos últimos también incluyen un margen inferior cuyo valor es la mitad que su interlineado (10px por defecto).
Un ejemplo puede ser algo como lo siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Textos Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<!-- Libreria jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Parrafo destacado:
Podemos destacar un parrafo sobre los demás aplicandole la clase «lead», vemos un ejemplo de la implementación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Texto destacado Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="lead">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<!-- Libreria jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Texto pequeño (small):
Para marcar una parte del texto o todo un bloque de texto como poco importante, utiliza la etiqueta (small). Bootstrap muestra ese contenido con un tamaño de letra igual al 85% del tamaño de letra de su elemento padre. En el caso de las etiquetas (h1,…,h6) el tamaño de los elementos (small) se ajusta de otra forma para que tengan un mejor aspecto.
Veamos un ejemplo de la implementación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Texto pequeño Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>Empezamos a escribir un texto y <small>incluimos una linea de texto menos importante.</small> Seguimos escribiendo...</p>
<!-- Libreria jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Texto negrita:
Podemos aplicarle a un trozo de texto un estilo negrita utilizando la etiqueta (strong) o bien usando la etiqueta nativa en HTML5 (b).
Veamos un ejemplo de la implementación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Texto negrita Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>Probamos el estilo <strong>negrita</strong> dentro de un parrafo.</p>
<!-- Etiqueta nativa de HTML5 -->
<p>Probamos el estilo <b>negrita</b> dentro de un parrafo.</p>
<!-- Libreria jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Texto cursiva:
Podemos aplicarle a un trozo de texto un estilo cursiva utilizando la etiqueta (em) o bien usando la etiqueta nativa en HTML5 (i).
Veamos un ejemplo de la implementación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Texto cursiva Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>El siguiente trozo de texto <em>se muestra en cursiva</em>.</p>
<!-- Etiqueta nativa de HTML5 -->
<p>El siguiente trozo de texto <i>se muestra en cursiva</i>.</p>
<!-- Libreria jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Alineación del texto:
Bootstrap nos ofrece clases para alinear el texto dentro de un contenedor, las alineaciones disponibles son las siguientes:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alineación texto Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p class="text-left">Alineación a la izquierda.</p>
<p class="text-center">Alineación al centro.</p>
<p class="text-right">Alineación a la derecha.</p>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Color del texto:
También disponemos de estilos para indicar el tipo del texto que vamos a mostrar. Depende del tipo que indiquemos veremos la etiqueta de un color o otro. Veamos un ejemplo de la implementación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Color texto Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p class="text-muted">Texto mutable.</p>
<p class="text-primary">Texto primario.</p>
<p class="text-success">Texto Success.</p>
<p class="text-info">Texto información.</p>
<p class="text-warning">Texto de alerta.</p>
<p class="text-danger">Texto de peligro.</p>
<!-- LibrerÃa jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Abreviaturas
Las abreviaturas son interesantes en momentos ocasionales, tenemos la posibilidad de poder utilizar acrónimos utilizando la etiqueta <abbr> el diseño que le aplica Bootstrap es una pequeña linea punteada y al pasar el ratón se mostrará la definición siempre y cuando se le haya aplicado la propiedad title.
Vemos un ejemplo de la implementación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Abreviaturas Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>Probando un texto con abreviaturas <abbr title="Señor">Sr.</abbr> y <abbr title="Señora">Sra.</abbr></p>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Iniciales
Bootstrap tiene una clase denominada .initialism (la palabra proviene del ingles que significa iniciales), cuando se aplica esta clase a un elemento de tipo <abbr> reduce ligeramente el tamaño de la letra y así hace que el texto pueda leerse mejor.
Ejemplo de implementación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iniciales Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>Esta página está escrita con <abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
<!-- LibrerÃa jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Direcciones
Utiliza la etiqueta <address> para mostrar la información de contacto de tu sitio o página. No olvides añadir <br> al final de cada línea para mantener el texto de la dirección bien formateado.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direcciones Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<address>
<strong>Empresa S.A.</strong><br>
Avenida Principal 123<br>
Ciudad, Provincia 00000<br>
<abbr title="Teléfono">Tel:</abbr> 9XX 123 456
</address>
<address>
<strong>Nombre Apellido</strong><br>
<a href="mailto:#">nombre.apellido@ejemplo.com</a>
</address>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Blockquotes
Estos elementos se emplean para incluir en tus página trozos de contenidos de otras fuentes.
Utiliza el elemento <blockquote> para encerrar el contenido que se va a incluir en la página. También se recomienda utilizar el elemento <p> para encerrar el texto dentro del <blockquote>.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BlockQuote Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<br/>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<!-- LibrerÃa jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Podemos usar el elemento <small> para mostrar la fuente original del contenido como podría ser una persona, sitio web, etc, este inclúyelo dentro de un elemento <cite>. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BlockQuote con fuente Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<br/>
<blockquote>
<p>La imaginación es el ojo del alma. El tiempo, el pensamiento de las mentes necias.</p>
<small>Frase célebre de <cite title="Anónimo">Anónimo</cite></small>
</blockquote>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
Bootstrap también ofrece la posibilidad de modificar la alineación del elemento <blockquote> para ello tenemos que añadir al elemento la clase .pull-right.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alineación BlockQuote Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Librerias opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<br/>
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Frase célebre de <cite title="Nombre Apellidos">Nombre Apellidos</cite></small>
</blockquote>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Todos los plugins JavaScript de Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Puede ver este ejemplo en pantalla completa.
