Afficher du code TEXTE:Code CODE:Afficher

Le dossier à télécharger pour tous les exemples de cette section est nommé 4-Typographie-07.

1. L’élément <code>

Pour les pages web nécessitant d’afficher du code dans une ligne, Bootstrap modifie nativement la mise en forme de l’élément <code>.

Voici un exemple d’utilisation de l’élément <code> :

<p>Utilisez la classe <code>.ma-classe</code> pour l'en-tête.</p> 

Voici l’affichage obtenu :

images/C04-012.png

Voici les règles CSS utilisées :

code { 
    font-size: 0.875em; 
    color: #d63384; 
    word-wrap: break-word; 
} 

Bootstrap utilise des fontes à chasse fixe pour afficher le texte du code.

2. L’élément <pre>

Toujours pour les développeurs, Bootstrap propose d’utiliser l’élément <pre> pour afficher du code sur plusieurs lignes.

Voici un exemple d’utilisation de l’élément <pre> :

<p>Utilisez cette syntaxe :</p> 
<pre> 
.ma-classe { 
  color: #efefef; 
  font-size: 90%; 
} 
</pre> 

Voici l’affichage obtenu :

images/C04-013.png

Voici la règle CSS utilisée :

pre { 
    display: block; 
    margin-top: 0; 
    margin-bottom: 1rem; ...
couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Les listes
Suivant
L'objectif