Bootstrap 4 - Typographie

La description

La fonction de typographie crée des en-têtes, des paragraphes, des listes et d'autres éléments en ligne. Il spécifie comment les éléments de texte doivent être rendus sur la page Web.

Voyons chacune des caractéristiques de la typographie dans les sections suivantes.

Titres

Bootstrap 4 fournit des en-têtes HTML de h1 à h6, comme indiqué dans l'exemple ci-dessous -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h1>h1 - Tutorialspoint</h1>
         <h2>h2 - Tutorialspoint</h2>
         <h3>h3 - Tutorialspoint</h3>
         <h4>h4 - Tutorialspoint</h4>
         <h5>h5 - Tutorialspoint</h5>
         <h6>h6 - Tutorialspoint</h6>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

Afficher les titres

Les en-têtes d'affichage sont utilisés pour afficher le texte avec une taille de police et un poids de police plus grands que les en-têtes normaux en utilisant 4 classes d'en-tête d'affichage telles que .display-1 , .display-2 , .display-3 et .display-4 .

L'exemple suivant illustre l'utilisation des classes d'en-tête d'affichage ci-dessus -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h1 class = "display-1">Tutorialspoint</h1>
         <h1 class = "display-2">Tutorialspoint</h1>
         <h1 class = "display-3">Tutorialspoint</h1>
         <h1 class = "display-4">Tutorialspoint</h1>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

Lead, abréviations, blockquote et texte marqué

  • Ajoutez de l'emphase à un paragraphe en utilisant la classe .lead .

  • L'élément HTML <abbr> fournit un balisage pour les abréviations ou les acronymes, comme WWW ou HTTP. Il utilise l' attribut de titre et s'affiche avec une bordure en pointillé clair en bas et révèle le texte intégral en survol.

  • Vous pouvez citer le bloc de contenu dans le document en utilisant la classe .blockquote dans l'élément <blockquote>.

  • Utilisez l'élément <mark> pour rendre le texte marqué ou mis en surbrillance.

L'exemple suivant montre chacun des types ci-dessus -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Lead</h2>
         <p class = "lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
            commodo consequat. 
         </p>
         
         <h2>Abbreviations</h2>
         <p><abbr title = "World Wide Web">WWW</abbr></p>
         <h2>Blockquote</h2>
         <blockquote class = "blockquote">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
            commodo consequat. 
         </blockquote>
         
         <h2>Marked Text</h2>
         <p>Welcome to <mark>tutorialspoint</mark></p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

Listes

Bootstrap 4 fournit divers styles tels que les listes d'alignement de liste Non stylisé, Inline et Description.

  • Unstyled- Vous pouvez afficher la liste en supprimant le style de liste par défaut et la marge gauche.

  • Inline- Vous pouvez également placer tous les éléments de liste sur une seule ligne à l'aide des classes .list-inline et .list-inline-item .

  • Description list alignment- Vous pouvez afficher les termes et descriptions horizontalement en utilisant la classe .row vers la balise <dl>.

L'exemple suivant illustre l'utilisation des types de liste ci-dessus -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Unstyled List</h2>
         <ul class = "list-unstyled">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
         </ul>
         
         <h2>Inline List</h2>
         <ul class = "list-inline">
            <li class = "list-inline-item">HTML</li>
            <li class = "list-inline-item">CSS</li>
            <li class = "list-inline-item">JavaScript</li>
         </ul>
         
         <h2>Description list alignment</h2>
         <dl class = "row">
            <dt class = "col-sm-3">HTML</dt>
            <dd class = "col-sm-9">To define the content of web pages</dd>
            <dt class = "col-sm-3">CSS</dt>
            <dd class = "col-sm-9">To specify the layout of web pages</dd>
            <dt class = "col-sm-3">JavaScript</dt>
            <dd class = "col-sm-9">To program the behavior of web pages</dd>
         </dl>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production