Bootstrap 4 - Configurazione dell'ambiente

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. Nessuna documentazione o file di codice sorgente originale sono inclusi.
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

↰ Previous page Next page ↱