Ir al contenido principal

Buscar este blog

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.

Comentarios

Publicar un comentario