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: 87.5%; 
        color: #e83e8c; 
        word-break: break-word; 
} 
code, kbd, pre, samp { 
        font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier 
New",monospace; 
} 

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 les règles CSS utilisées :

pre { 
        display: block; ...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les listes
Suivant
L'objectif