English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di base Bootstrap

Plugin Bootstrap

Configurazione dell'Ambiente Bootstrap

L'installazione di Bootstrap è molto semplice. Questo capitolo spiega come scaricare e installare Bootstrap, discute la struttura dei file di Bootstrap e dimostra il suo uso attraverso un esempio.

Scarica Bootstrap

Puoi scaricare Bootstrap da https://getbootstrap.com/docs/3.4/ Scarica l'ultima versione di Bootstrap. Quando fai clic su questo link, vedrai la pagina come quella illustrata di seguito:

Clicca sul link "Scarica Bootstrap" per accedere alla pagina seguente:


Vedrai due pulsanti:

  • Scarica Bootstrap：Scarica Bootstrap. Clicca su questo pulsante per scaricare la versione precompilata compressa di Bootstrap CSS, JavaScript e font. Non include documentazione e file di origine sorgente.

  • Scarica Sorgente：Scarica il codice sorgente. Clicca su questo pulsante per ottenere direttamente il codice sorgente LESS e JavaScript più recente di Bootstrap.

Se stai utilizzando il codice sorgente non compilato, devi compilare i file LESS per generare file CSS riutilizzabili. Per compilare i file LESS, Bootstrap ufficiale supporta solo Recess, che è basato su less.js Suggerimento CSS

Per una migliore comprensione e facilità d'uso, utilizzeremo nella guida la versione precompilata di Bootstrap.

Poiché i file sono stati compilati e compressi, non è necessario includere questi file indipendenti ogni volta durante lo sviluppo funzionale autonomo.

Durante la scrittura di questa guida, è stata utilizzata l'ultima versione (Bootstrap 3).

Struttura dei file

Bootstrap precompilato

Quando scarichi la versione precompilata di Bootstrap, dopo aver decompresso il file ZIP, vedrai la seguente struttura di file/directory:

Come mostrato nell'immagine, è possibile vedere i CSS e JS compilati (bootstrap.*), nonché i CSS e JS compressi (bootstrap.min.*). Include anche le font Glyphicons, che è un tema opzionale di Bootstrap.

Codice sorgente Bootstrap

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

  • less/、js/ e fonts/ I file nella directory sotto contengono il codice sorgente del CSS, JS e le font icone di Bootstrap.

  • dist/ Le cartelle contengono i file e le directory elencati nella parte di download precompilato sopra.

  • docs-assets/、examples/ e tutti i *.html Il file è nella documentazione di Bootstrap.

Template HTML

Ecco un esempio di template HTML di base utilizzando Bootstrap:

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<title>Modello Bootstrap</title>
　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　　　<!-- Includere Bootstrap -->
　　　　　　<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　
　　　　　　<!-- HTML5 Shiv e Respond.js sono utilizzati per abilitare il supporto per gli elementi HTML5 e le query di media in IE8 -->
　　　　　　<!-- Attenzione: Se il file Respond.js viene caricato tramite file://, il file non avrà effetto -->
　　　　　　<![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, mondo!</h1>
　
　　　　　　<!-- jQuery (i plugin JavaScript di Bootstrap richiedono l'inclusione di jQuery) -->
　　　　　　<script src="https://code.jquery.com/jquery.js"></script>
　　　　　　<!-- Include tutti i plugin compilati -->
　　　　　　<script src="js/bootstrap.min.js"></script>
　　　</body>
</html>

Ecco dove si può vedere che include jquery.js、bootstrap.min.js e bootstrap.min.css File, utilizzato per trasformare un file HTML standard in un template utilizzando Bootstrap.

I dettagli di ciascun elemento del segmento di codice sopra menzionato saranno trattati in Panoramica del CSS di Bootstrap Spiegazione dettagliata delle sezioni.

Esempio online

Ora proviamo a usare Bootstrap per output "Hello, mondo!":

　<h1>Hello, mondo!</h1>

Staticfile CDN raccomanda

In Cina si consiglia di utilizzare le librerie su Staticfile CDN:

<!-- Il nuovo file CSS di core di Bootstrap -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　
<!-- File jQuery. Assicurarsi di includerlo prima di bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　
<!-- Il più recente file JavaScript di core di Bootstrap -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Inoltre, puoi utilizzare i seguenti servizi CDN:

Introduzione a Bootstrap CSSBootstrap per Principianti