Bootstrap 4 - Tipografia

Descrizione

La funzione tipografia crea intestazioni, paragrafi, elenchi e altri elementi in linea. Specifica come devono essere visualizzati gli elementi di testo sulla pagina web.

Vediamo ciascuna delle caratteristiche della tipografia nelle sezioni seguenti.

Titoli

Bootstrap 4 fornisce intestazioni HTML da h1 a h6 come mostrato nell'esempio seguente:

Esempio

<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>

Produrrà il seguente risultato:

Produzione

Visualizza intestazioni

Le intestazioni del display vengono utilizzate per visualizzare il testo con dimensioni e spessore del carattere maggiori rispetto alle intestazioni normali utilizzando 4 classi di intestazioni del display come .display-1 , .display-2 , .display-3 e .display-4 .

L'esempio seguente mostra l'utilizzo delle classi di intestazione del display sopra riportate

Esempio

<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>

Produrrà il seguente risultato:

Produzione

Lead, Abbreviazioni, Blockquote e Marked Text

  • Aggiungi un po 'di enfasi a un paragrafo usando .lead class.

  • L'elemento HTML <abbr> fornisce markup per abbreviazioni o acronimi, come WWW o HTTP. Utilizza l' attributo del titolo e il display con un bordo punteggiato chiaro lungo la parte inferiore e rivela il testo completo al passaggio del mouse.

  • Puoi citare il blocco di contenuto nel documento usando la classe .blockquote nell'elemento <blockquote>.

  • Utilizza l'elemento <mark> per rendere il testo contrassegnato o evidenziato.

L'esempio seguente mostra ciascuno dei tipi precedenti:

Esempio

<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>

Produrrà il seguente risultato:

Produzione

Liste

Bootstrap 4 fornisce vari stili come gli elenchi di allineamento dell'elenco Non stilato, In linea e Descrizione.

  • Unstyled- È possibile visualizzare l'elenco rimuovendo lo stile elenco predefinito e il margine sinistro.

  • Inline- Puoi anche inserire tutti gli elementi dell'elenco su una singola riga utilizzando le classi .list-inline e .list-inline-item .

  • Description list alignment- È possibile visualizzare i termini e le descrizioni orizzontalmente utilizzando la classe .row nel tag <dl>.

Il seguente esempio dimostra l'utilizzo dei tipi di elenco precedenti:

Esempio

<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>

Produrrà il seguente risultato:

Produzione