Display Heading

Le Display heading est une des nombreuses nouveautés qui garnira prochainement la sortie de la version 4 de Bootstrap.   Démo Editer dans jsfiddle   À quoi sert-il ? Le Display heading a été mis en place par l’équipe de Bootstrap pour proposer une alternative à la mise en avant d’un contenu titre. En clair, si vous […]

Posté le par Benoît Philibert|1047 vues

Le Display heading est une des nombreuses nouveautés qui garnira prochainement la sortie de la version 4 de Bootstrap.

 

Démo

Editer dans jsfiddle

 

À quoi sert-il ?

Le Display heading a été mis en place par l’équipe de Bootstrap pour proposer une alternative à la mise en avant d’un contenu titre. En clair, si vous désirez garder une structure <h1> à <h6> propre sans rajouter de classes CSS alternatives (en fonction des besoins), le Display heading est la solution.

De plus, le style graphique est différent. On utilise ici une épaisseur de police beaucoup plus fine que la normale et ce n’est pas pour nous déplaire. Personnellement, je trouve que c’est beaucoup plus dans l’air du temps. Qu’en pensez-vous ?

Encore une fois, l’équipe de Bootstrap ne s’y est pas trompée…

 

Comment on l’intègre ?

Il s’utilise dans n’importe quelle balise typographique. Dans l’exemple ci-contre, on l’applique à un <h1> ou <h2> tout comme à une balise <h2>.

<h1 class="display-4">Display 4</h1>
<h2 class="display-4">Display 3</h2>
<p class="display-4">Display 2</p>

Le rendu graphique est similaire malgré l’utilisation de balises différentes.

 

 

Les tailles

Le Display heading propose une alternance de 4 tailles allant de display-4 (la plus haute) à display-1 (la plus basse).

<h1 class="display-4">Display 4</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-1">Display 1</h1>

 

Fusionner son style, oui c’est possible !

En effet, l’exemple type de son intégration est de l’utiliser dans une balise <mark> qui permet de mettre en évidence du texte à la manière d’un stabilo. Cela fusionne les deux rendus CSS et ils deviennent totalement complémentaires.

<mark class="display-4 lead">Display 2</mark>

 

Le Jumbotron l’accueil à bras ouverts

De base, Bootstrap propose une balise <h1> munie d’une classe .display-3 ce qui affirme d’avantage la volonté de différencier les balise titres classique et celles utilisant la classe display-*

<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>


<hr class="m-y-md">

It uses utility classes for typography and spacing to space content out within the larger container.
<p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

</div>

 

Démo

Editer dans jsfiddle

 


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.