Ir al contenido principal

Buscar este blog

Textos

Indice de contenidos 1. Parrafo 2. Parrafo destacado 3. Texto pequeño (small) 4. Texto negrita 5. Texto cursiva 6. Alineación del texto 7. Color del texto

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.


Comentarios

Publicar un comentario