Bootstrap 4 - Guida rapida

Cos'è Bootstrap 4?

Bootstrap 4 è un potente e popolare framework front-end mobile first per la creazione di siti mobile first reattivi sul web. È l'ultima versione di Bootstrap , che utilizza HTML, CSS e JavaScript.

Storia

L'ultima versione stabile di Bootstrap v3.3.7 è stata nel luglio 2016 e nell'agosto 2017 è stata rilasciata la versione beta di Bootstrap 4.0.0.

Perché usare Bootstrap?

  • Contiene i primi stili mobili in tutta la libreria, invece di utilizzarli in file separati.

  • Con la sola conoscenza di HTML e CSS chiunque può iniziare con Bootstrap. Anche il sito ufficiale di Bootstrap ha una buona documentazione.

  • È supportato da tutti i browser più diffusi e il suo CSS reattivo si adatta a desktop, tablet e cellulari.

  • Fornisce una soluzione pulita e uniforme per la creazione di un'interfaccia per gli sviluppatori.

  • Contiene componenti incorporati belli e funzionali che sono facili da personalizzare.

  • È un open source e fornisce personalizzazione basata sul web.

Bootstrap 3 v / s Bootstrap 4

Bootstrap 4 è l'ultima versione di Bootstrap 3, i cui file CSS di origine vengono convertiti in SCSS. Utilizza il modale flessibile per il sistema a griglia e supporta tutti i browser più recenti. Tuttavia, supporta Internet Explorer 9+ e iOS 7+ e ha abbandonato il supporto per IE 8 e versioni inferiori, iOS 6 e versioni inferiori. Per ulteriori informazioni sulla differenza tra Bootstrap 3 e Bootstrap 4, consulta questo capitolo .

Puoi iniziare a utilizzare Bootstrap 4 nel tuo sito web includendolo da CDN (Content Delivery Network) o scaricandolo da getbootstrap.com .

Utilizzando CDN

Bootstrap 4 può essere utilizzato nel sito Web includendolo da Content Delivery Network .

Usa il CDN di CSS e JS di Bootstrap compilato di seguito nel tuo progetto.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Includere le versioni CDN di jQuery e Popper.js (Bootstrap 4 utilizza jQuery e Popper.js per utilizzare componenti JavaScript come modals, tooltips, popover ecc.) Prima del JavaScript Bootstrap minimizzato , se si utilizza la versione compilata di JavaScript.

Di seguito sono riportati alcuni componenti, che richiedono jQuery -

  • Utilizzato per avvisi chiudibili

  • Cambia gli stati usando i pulsanti e le caselle di controllo / pulsanti di opzione e comprimi per alternare il contenuto

  • Carosello per diapositive, controlli e indicatori

  • Dropdown (utilizza Popper.js per un posizionamento perfetto)

  • Apri e chiudi i Modals

  • Per far crollare la barra di navigazione

  • Descrizioni comandi e popover (utilizza Popper.js per un posizionamento perfetto)

Download di Bootstrap 4

Puoi scaricare Bootstrap 4 da https://getbootstrap.com/docs/4.1/getting-started/download/. Quando fai clic su questo link, vedrai una schermata come mostrato di seguito:

Qui puoi vedere due pulsanti:

  • Download- Facendo clic su questo, è possibile scaricare le versioni precompilate e minimizzate di CSS e JavaScript di Bootstrap. Non è inclusa alcuna documentazione o file di codice sorgente originale.

  • Download Source - Facendo clic su questo, è possibile ottenere l'ultimo Bootstrap SCSS, il codice sorgente JavaScript e i file di documentazione.

Per una migliore comprensione e facilità d'uso, utilizzeremo la versione precompilata di Bootstrap durante il tutorial. Poiché i file vengono rispettati e minimizzati, non devi preoccuparti ogni volta di includere file separati per funzionalità individuali.

Struttura dei file

Bootstrap precompilato 4

Una volta scaricata la versione compilata Bootstrap 4, estrai il file ZIP e vedrai la seguente struttura di file / directory:

Come puoi vedere, ci sono CSS e JS compilati (bootstrap. *), Così come CSS e JS compilati e minimizzati (bootstrap.min. *).

Codice sorgente Bootstrap 4

Se hai scaricato il codice sorgente Bootstrap 4, la struttura del file sarà la seguente:

  • I file sotto js / e scss / sono il codice sorgente per Bootstrap CSS e JavaScript.

  • La cartella dist / include tutto ciò che è elencato nella sezione di download precompilato sopra.

  • La documentazione / esempi / include il codice sorgente per la documentazione di Bootstrap ed esempi di utilizzo di Bootstrap.

Creazione della prima pagina Web con Bootstrap 4

L'esempio seguente specifica una semplice pagina web di Bootstrap 4 -

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>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- 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

Bootstrap 4 utilizza classi container per avvolgere il contenuto della pagina. Contiene due classi contenitore:

  • .container - Rappresenta un contenitore a larghezza fissa.

  • .container-fluid - Rappresenta un contenitore a larghezza intera.

Contenitore

La classe .container viene utilizzata per avvolgere il contenuto della pagina con larghezza fissa e il contenuto può essere posizionato facilmente al centro utilizzando la classe .container come mostrato di seguito.

<div class = "container">
   ...
</div>

Esempio

L'esempio seguente specifica una semplice pagina web con un contenitore a larghezza fissa -

<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>
      <style>
         .container {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fixed Width Container</h2>
         This is a simple web page with fixed width container by using 
         <code>.container</code> class.
      </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

Contenitore per liquidi

È possibile creare un contenitore a larghezza intera utilizzando la classe .container-fluid come mostrato di seguito.

<div class = "container-fluid">
   ...
</div>

L'esempio seguente specifica una semplice pagina web con un contenitore a larghezza intera:

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>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using 
         <code>.container-fluid</code> class.
      </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

Descrizione

Sistema a griglia Bootstrap 4 costruito con flexbox che è completamente reattivo e scala fino a 12 colonne (in base alle dimensioni del dispositivo) creando layout con righe e colonne sulla pagina. Fornisce un sistema a griglia fluida mobile first reattivo che ridimensiona le colonne all'aumentare delle dimensioni del dispositivo o della finestra.

Funzionamento del sistema a griglia

  • Le righe devono essere posizionate all'interno di una classe .container per un corretto allineamento e riempimento.

  • Per una larghezza reattiva, usa la classe .container e per una larghezza fissa su tutto il viewport, usa la classe .container-fluid .

  • Usa le righe per creare gruppi di colonne orizzontali.

  • Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere le figlie immediate delle righe.

  • Le colonne contengono un riempimento per controllare lo spazio tra di loro.

  • Se metti più di 12 colonne in una riga, le colonne verranno posizionate in una nuova riga.

  • Le colonne creano spazi tra il contenuto delle colonne tramite riempimento. Pertanto, puoi rimuovere il margine dalle righe e il riempimento dalle colonne con la classe .no-gutters sulla riga.

  • È possibile rendere reattivo il sistema di rete utilizzando cinque punti di interruzione della griglia come extra piccolo, piccolo, medio, grande ed extra grande.

  • Sono disponibili classi di griglia predefinite come .col-4 per creare rapidamente layout di griglia. LESS mixin possono essere utilizzati anche per layout più semantici.

Opzioni griglia

La tabella seguente riassume gli aspetti di come il sistema a griglia Bootstrap 4 funziona su più dispositivi:

Dispositivi extra piccoli (<576 px) Piccoli dispositivi (≥576px) Dispositivi medi (≥768px) Dispositivi di grandi dimensioni (≥992 px) Dispositivi extra large (≥1200px)
Comportamento della griglia Sempre orizzontale Compresso all'inizio, orizzontale sopra i punti di interruzione Compresso all'inizio, orizzontale sopra i punti di interruzione Compresso all'inizio, orizzontale sopra i punti di interruzione Compresso all'inizio, orizzontale sopra i punti di interruzione
Larghezza massima del contenitore Nessuno (automatico) 540px 720px 960px 1140px
Classi di classe .col- .col-sm- .col-md- .col-lg- .col-xl-
# di colonne 12 12 12 12 12
Larghezza grondaia

30px

(15px su ogni lato di una colonna)

30px

(15px su ogni lato di una colonna)

30px

(15px su ogni lato di una colonna)

30px

(15px su ogni lato di una colonna)

30px

(15px su ogni lato di una colonna)

Inseribile
Ordinamento delle colonne

Struttura a griglia di base

Di seguito è riportata la struttura di base della griglia Bootstrap 4:

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>	  
   </div>
   
   <div class = "row">...</div>
</div>

Esempio di sistema a rete

Di seguito è riportato un esempio di sistema a griglia Bootstrap 4:

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>
      </style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            background: #e4dcdc;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
      </style>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class =" col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-5">.col-sm-5</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-12">.col-sm-12</div>
         </div>
      </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

Creazione di due layout di colonna

L'esempio seguente descrive la creazione di due layout di colonna per dispositivi piccoli, medi e grandi. Su piccoli dispositivi come i telefoni cellulari, le colonne diventeranno automaticamente orizzontali per impostazione predefinita.

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 = "grid_system">
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-7">.col-sm-7</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-8">.col-sm-8</div>
         </div>
		 
         <div class = "row">
            <div class = "col-sm-9">.col-sm-9</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
      </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

Creazione di layout a tre colonne

L'esempio seguente descrive la creazione di layout a tre colonne per dispositivi di medie e grandi dimensioni. Se la risoluzione dello schermo è maggiore o uguale a 992 pixel, verrà visualizzato in modalità orizzontale nei tablet e, come al solito, verrà visualizzato in modalità verticale.

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 = "grid_system">
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-8">.col-sm-8</div>
            <div class = "col-sm-2">.col-sm-2</div>
         </div>
		
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
      </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

Descrizione

Bootstrap 4 utilizza la raccolta di metodi di contenuto per visualizzare il testo, blocchi di codice, immagini reattive, dati in un formato tabulare ecc. Sulla pagina web.

La seguente tabella elenca i metodi di contenuto che puoi usare per manipolare Bootstrap 4 -

S.No. Metodi e descrizione
1

Tipografia

La funzione tipografia crea intestazioni, paragrafi, elenchi e altri elementi in linea.

2

Codice

Viene utilizzato per visualizzare blocchi di codice in linea e multilinea nel documento.

3

immagini

Bootstrap 4 fornisce il supporto per le immagini utilizzando il tag <img>.

4

Tabelle

Le tabelle vengono utilizzate per visualizzare i dati in formato tabulare.

5

Figure

L'elemento figure specifica il contenuto insieme alle immagini correlate con una didascalia opzionale.

Descrizione

Bootstrap 4 utilizza la raccolta di metodi di contenuto per visualizzare il testo, blocchi di codice, immagini reattive, dati in un formato tabulare ecc. Sulla pagina web.

La seguente tabella elenca i metodi di contenuto che puoi usare per manipolare Bootstrap 4 -

S.No. Metodi e descrizione
1

Avvisi

Il componente di avviso specifica il messaggio predefinito per le azioni dell'utente.

2

Distintivi

I badge vengono utilizzati per evidenziare le informazioni aggiuntive al contenuto.

3

Percorso di navigazione

Viene utilizzato per mostrare le informazioni basate sulla gerarchia per un sito.

4

Bottoni

Bootstrap fornisce un pulsante cliccabile per inserire contenuti come testo e immagini.

5

Gruppo di pulsanti

I gruppi di pulsanti consentono di impilare più pulsanti insieme su una singola riga.

6

Carte

La scheda è un contenitore di contenuti che mostra una scatola delimitata con un po 'di imbottitura intorno.

7

Giostra

Carousel è un modo flessibile e reattivo per aggiungere un dispositivo di scorrimento al tuo sito.

8

Crollo

Viene utilizzato per mostrare o nascondere il contenuto.

9

Menu a discesa

I menu a discesa possono essere utilizzati per visualizzare i collegamenti in un formato elenco.

10

Forme

L'elemento form viene utilizzato per raccogliere input dall'utente.

11

Gruppo di input

Utilizzando i gruppi di input è possibile anteporre e aggiungere facilmente testo o pulsanti agli input basati su testo.

12

Jumbotron

Aumenta la dimensione delle intestazioni e aggiunge molto margine per il contenuto della pagina di destinazione.

13

Modale

Modal è una finestra figlia che è sovrapposta alla sua finestra genitore.

14

Navs

Bootstrap fornisce elementi di navigazione per il tuo sito in un menu orizzontale.

15

Navbar

Navbar fornisce le intestazioni di navigazione per la tua applicazione o sito.

16

Impaginazione

L'impaginazione viene utilizzata per dividere il contenuto correlato su più pagine.

17

Popovers

Il popover è simile al suggerimento, offrendo una vista estesa completa di un'intestazione.

18

Progresso

La barra di avanzamento mostra l'avanzamento di un processo con barre in pila, sfondi animati ed etichette di testo.

19

Scrollspy

Scrollspy viene utilizzato per indicare il collegamento attualmente attivo nel menu in base alla posizione di scorrimento.

20

Descrizioni comandi

I suggerimenti sono utili quando è necessario descrivere un collegamento.

Descrizione

Bootstrap 4 utilizza una raccolta di utilità per la visualizzazione dei bordi, il colore del testo, l'incorporamento di video ecc. Sulla pagina web.

La tabella seguente elenca i tipi di utilità che è possibile utilizzare per manipolare Bootstrap 4 -

S.No. Metodi e descrizione
1

frontiere

L'utilità Border fornisce lo stile, il colore e il raggio del bordo di un elemento.

2

Clearfix e icona di chiusura

Clearfix viene utilizzato per cancellare il contenuto flottato e chiudere l'icona per eliminare il contenuto.

3

Colori

Utilizza le classi contestuali per modificare il colore del testo, del collegamento e del colore di sfondo di un elemento.

4

Incorporare

Viene utilizzato per incorporare il video in una pagina utilizzando l'elemento <iframe>.

5

Galleggiante

Viene utilizzato per far fluttuare un elemento a sinistra oa destra.

6

Ombre e spaziatura

L'utilità ombra aggiunge ombra agli elementi e l'utilità spaziatura fornisce valori di margine o riempimento a un elemento.

7

Dimensionamento

È possibile rendere le dimensioni di un elemento larghe o alte utilizzando le utilità di larghezza e altezza.

8

Testo

Bootstrap fornisce utilità di testo per controllare l'allineamento, la trasformazione, il peso e altro ancora.

9

Flettere

L'utilità Flex può essere utilizzata per gestire il layout, l'allineamento, le colonne della griglia, la navigazione e altri componenti della pagina.

Descrizione

Bootstrap è un potente e popolare framework front-end mobile first per la creazione di siti mobile first reattivi sul web utilizzando framework HTML, CSS e JS.

La tabella seguente mostra le differenze in Bootstrap 3 e Bootstrap 4 -

S.No. Componente Bootstrap 3 Bootstrap 4
1 File sorgente CSS DI MENO SCSS
2 Sistema a griglia Sistema a griglia a 4 livelli (xs, sm, md, lg) Sistema a griglia a 5 livelli (xs, sm, md, lg, xl)
3 Unità CSS px rem
4 Dimensione del font 14px 16px
5 Struttura a discesa Creato con <ul> e <li> Creato con <ul> o <div>
6 Colonne di offset col-md-offset-4 offset-md-4
7 immagini .img-responsive class .img-fluid class
8 Tabelle Aggiungi la classe .table-responsive all'elemento genitore <div> Aggiungi la classe .table-responsive all'elemento <table>
9 Glyphicons Supportato Non supportato
10 Oggetti multimediali Utilizza classi per oggetti multimediali, come .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list e .media-body Utilizza solo la classe .media per gli oggetti multimediali.
11 Tabelle scure / inverse Non supportato Utilizza la classe .table-dark per creare tabelle scure / inverse
12 Caselle di controllo e pulsanti di opzione Consente di visualizzare le caselle di controllo e pulsanti di opzione utilizzando .radio , .radio-linea , .checkbox o .checkbox-inline classi Visualizza le caselle di controllo e pulsanti di opzione utilizzando .Form-controllo , .Form-check-label , .Form-check-ingresso , o .Form-check-in linea classi
13 Dimensione controllo modulo Aumentare o diminuire dimensione di un controllo di input utilizzando .input-lg e .input-sm classi Aumentare o diminuire dimensioni di un controllo di input utilizzando .Form-control-lg e .Form-control-sm classi
14 Testo guida Visualizza il testo della guida utilizzando la classe .help-block Visualizza il testo della guida utilizzando la classe .form-text
15 Stili Utilizza le classi .btn-default e .btn-info sui pulsanti Utilizza le classi .btn-secondary , .btn-light e .btn-dark sui pulsanti e rilascia la classe .btn-default .
16 Pulsanti di contorno Non supportato Dai uno stile ai pulsanti con il colore del contorno utilizzando .btn-outline- * class
17 Dimensioni dei pulsanti La classe .btn-xs è disponibile Disponibile solo per le classi .btn-sm e .btn-lg e abbandonata la classe .btn-xs
18 Intestazioni di menu Usa la classe .dropdown-header per il tag li Usa la classe .dropdown-header per i tag h1 - h2
19 Divisori Usa la classe .divider nell'elemento li Utilizza la classe .dropdown-divider nell'elemento div
20 Navbar fisse Fissare la barra di navigazione in alto o in basso utilizzando .navbar-fisso-top e -bottom-.navbar fisso classi Fissare la barra di navigazione in alto o in basso utilizzando .fixed-top e .fixed-bottom classi
21 Cercapersone Allineare le pagine utilizzando .previous e .Next classi Non supportato
22 Jumbotron a tutta larghezza Non utilizza la classe .jumbotron-fluid su jumbotron a larghezza intera Utilizza la classe .jumbotron-fluid per jumbotron a tutta larghezza
23 Elemento carosello Utilizza la classe .item per gli elementi del carosello. Utilizza la classe .carousel-item per gli elementi del carousel.
24 Pozzetti, pannelli e miniature Supportato Non supportato. Usa invece le carte
25 Nav in linea Non include la classe .nav-inline Visualizza i nav come in linea utilizzando la classe .nav-inline