Bootstrap - Configurazione dell'ambiente

È molto facile da configurare e iniziare a utilizzare Bootstrap. Questo capitolo spiegherà come scaricare e configurare Bootstrap. Discuteremo anche della struttura del file Bootstrap e ne dimostreremo l'utilizzo con un esempio.

Scarica Bootstrap

Puoi scaricare l'ultima versione di Bootstrap da https://getbootstrap.com/. Quando fai clic su questo link, vedrai una schermata come di seguito:

Qui puoi vedere due pulsanti:

Download Bootstrap- Facendo clic su questo, è possibile scaricare le versioni precompilate e minimizzate di Bootstrap CSS, JavaScript e caratteri. Nessuna documentazione o file di codice sorgente originale sono inclusi.
Download Source - Facendo clic su questo, puoi ottenere l'ultimo Bootstrap LESS e il codice sorgente JavaScript direttamente da GitHub.

Se lavori con il codice sorgente non compilato di Bootstrap, devi compilare i file LESS per produrre file CSS utilizzabili. Per la compilazione dei file MENO in CSS, Bootstrap supporta ufficialmente solo Recess , che è hinter CSS di Twitter sulla base di less.js .

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. Al momento della stesura di questo tutorial è stata scaricata l'ultima versione (Bootstrap 3).

Struttura dei file

Bootstrap precompilato

Una volta scaricata la versione compilata Bootstrap, 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. *). I caratteri di Glyphicons sono inclusi, poiché è il tema Bootstrap opzionale.

Codice sorgente Bootstrap

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

I file in less / , js / e fonts / sono il codice sorgente per i font Bootstrap CSS, JS e icon (rispettivamente).
La cartella dist / include tutto ciò che è elencato nella sezione di download precompilato sopra.
docs-assets / , examples / e tutti i file * .html sono documentazione Bootstrap.

Modello HTML

Un modello HTML di base che utilizza Bootstrap sarebbe simile a questo:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Qui puoi vedere il file jquery.js, bootstrap.min.js e bootstrap.min.cssfile inclusi per creare un normale file HTM nel modello con avvio automatico. Assicurati solo di includere la libreria jQuery prima di includere la libreria Bootstrap.

Maggiori dettagli su ciascuno degli elementi in questo pezzo di codice sopra saranno discussi nel capitolo Bootstrap CSS Panoramica .

Esempio

Ora proviamo un esempio utilizzando il modello sopra. Prova il seguente esempio utilizzando l'opzione Live Demo disponibile nell'angolo in alto a destra della casella del codice di esempio sottostante sul nostro sito Web -

<h1>Hello, world!</h1>

In tutti i capitoli successivi abbiamo utilizzato un testo fittizio dal sito https://www.lipsum.com/.