29 - Tipografía : abreviaturas e iniciales

Ya se encuentra disponible el nuevo tutorial para aprender Bootstrap 4 que es la última versión estable y recomendada.


Bootstrap redefine estilos para el elemento HTML <abbr> que se emplea para indicar abreviaturas y acrónimos.

Una abreviatura representa una palabra pero solo escribimos una o varias letras de la misma y un acrónimo es una palabra que se forma generalmente con el primer caracter de un conjunto de palabras.

La siguiente página define una abreviatura y un acrónimo:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Prueba de Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body> 
  <div class="container">
    <p>Este es un ejemplo de una abreviatura <abbr title="Señor/a">Sr./a.</abbr></p>
    <hr>
    <p>Este es un ejemplo de un acrónimo <abbr 
    title="Objeto Volador No Identificado" class="initialism">ovni</abbr></p>
  </div>
</body> 
</html> 

Tanto para abreviaturas y acrónimos empleamos el elemento HTML <abbr>.

En la definición de una abreviatura y un acrónimo indicamos la propiedad title con el valor que se mostrará cuando pasemos con la flecha del mouse.

En un acrónimo además especificamos la clase class="initialism" (esto hace que el texto que se muestre siempre aparece en mayúsculas.

En el navegador tenemos la siguiente representación:

abbr bootstrap

Ejecutar Ejemplo

Retornar