Abreviaturas con Bootstrap

El manejo de abreviaturas con Bootstrap no dista mucho del manejo normal de abreviaturas que se realiza con HTML. Si bien podremos dar un poco de estilo a las abreviaturas con Bootstrap.

Cabe recordar que las abreviaturas son representaciones gráficas reducidas de palabras eliminando letras y terminando en un punto. Por ejemplo teléfono podremos abreviarlo en Tel.

Elemento ABBR para abreviaturas

El elemento de HTML que nos sirve para definir las abreviaturas es ABBR:

<abbr>Tel.</abbr>

Si queremos indicar la palabra que hemos abreviado podemos basarnos en el atributo title del elemento ABBR. De esta forma nos quedaría el siguiente código:

<abbr title="teléfono">Tel.</abbr>

Si solo utilizamos el elemento abbr, las abreviaturas con Bootstrap no tendrán una representación visual más allá que la que proporcione el navegador.

Abreviaturas con estilo Bootstrap

Podemos dar estilo a las abreviaturas con Bootstrap mediante la clase “initialism”, la cual podemos asignar al atributo class del elemento abbr.

En este caso Bootstrap va a mostrarnos la abreviatura más compacta para que destaque del resto del texto en el que se encuentra y pueda darnos una pista de que representa a una abreviatura.

El código Bootstrap para la abreviatura es el siguiente:

<abbr class="initialism" title="Teléfono">Tel.</abbr>

¿Qué te parece el estilo que aporta Bootstrap a las abreviaturas?