Bootstrap - Template di partenza Demo

Ciao a tutti, aspiranti sviluppatori web! Oggi esploreremo il meraviglioso mondo di Bootstrap e analizzeremo il suo template di partenza. Come il vostro amico insegnante di scienze informatiche, sono entusiasta di guidarvi in questo viaggio. Allora, prendete la vostra bevanda preferita, fatevi comodi e iniziamo!

Bootstrap-Starter template Demo

Cos'è un template di partenza?

Prima di addentrarci nei dettagli del template di partenza di Bootstrap, cerchiamo di capire cos'è esattamente un template di partenza. Immaginatelo come una ricetta preconfezionata per la struttura del vostro sito web. Proprio come una ricetta vi fornisce gli ingredienti di base e le istruzioni per creare un piatto delizioso, un template di partenza vi fornisce l'HTML, il CSS e il JavaScript essenziale per avviare il vostro progetto web.

Nel contesto di Bootstrap, un template di partenza è un file HTML di base che include tutti i componenti e le dipendenze necessarie di Bootstrap. È come avere una tela bianca con tutti gli strumenti di pittura già impostati e pronti all'uso!

Perché usare un template di partenza?

Forse vi state chiedendo: "Perché dovrei preoccuparmi di un template di partenza? Non posso scrivere tutto da zero?" Beh, potreste farlo, ma permettetemi di condividere una piccola storia dai miei primi giorni di insegnamento.

Una volta ho avuto uno studente che insisteva nel costruire tutto da zero. Sebbene fosse un'idea lodevole, ha passato settimane a lottare con problemi di layout di base che Bootstrap avrebbe risolto in minuti. Non siate come quello studente - lavorate intelligentemente, non faticosamente!

Usare un template di partenza:

Fa risparmiare tempo
garantisce che tutte le dipendenze necessarie siano incluse
fornisce un punto di partenza consistente
vi aiuta a concentrarvi sul contenuto e la funzionalità effettiva

Ora che abbiamo capito il "perché", esploriamo il "come"!

Il Template di Partenza di Bootstrap

Ecco come appare un template di partenza di Bootstrap di base:

<!doctype html>
<html lang="it">
<head>
<!-- Meta tag richiesti -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS di Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Ciao, mondo!</title>
</head>
<body>
<h1>Ciao, mondo!</h1>

<!-- JavaScript opzionale; scegliete uno dei due! -->

<!-- Opzione 1: Pacchetto Bootstrap con Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Opzione 2: Popper e Bootstrap JS separati -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

Analizziamo questo codice pezzo per pezzo:

Dichiarazione del Tipo di Documento

<!doctype html>

Questa linea informa il browser che questo è un documento HTML5. È come presentarsi prima di iniziare una conversazione - stabilisce il tono per tutto ciò che segue.

Tag HTML

<html lang="it">

Questo apre il nostro documento HTML e specifica che la lingua è italiana. È come aprire un libro e vedere che è scritto in italiano.

Sezione Head

<head>
<!-- Meta tag richiesti -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS di Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Ciao, mondo!</title>
</head>

La sezione <head> contiene metadati sul nostro documento. Ecco una spiegazione dettagliata:

<meta charset="utf-8">: Questo specifica la codifica dei caratteri per il documento HTML. UTF-8 è una codifica universale che può rappresentare qualsiasi carattere.
<meta name="viewport" content="width=device-width, initial-scale=1">: Questo garantisce che la pagina web sia reattiva e sembri bene su tutti i dispositivi.
Il tag <link> importa il file CSS di Bootstrap da un Content Delivery Network (CDN). È come importare un manuale di stili per la vostra pagina web.
<title>: Questo imposta il titolo della vostra pagina web, che appare nella scheda del browser.

Sezione Body

<body>
<h1>Ciao, mondo!</h1>

<!-- JavaScript opzionale; scegliete uno dei due! -->

<!-- Opzione 1: Pacchetto Bootstrap con Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Opzione 2: Popper e Bootstrap JS separati -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

La sezione <body> è dove va il contenuto principale della vostra pagina web. Nel template di partenza, include:

Un semplice "Ciao, mondo!" come intestazione per iniziare.
I file JavaScript per la funzionalità di Bootstrap. Avete due opzioni:

Opzione 1: Un singolo file bundlizzato che include sia Bootstrap che Popper.js (una libreria su cui Bootstrap dipende per alcuni componenti).
Opzione 2: File separati per Popper.js e Bootstrap (commentati di default).

Utilizzo del Template di Partenza

Ora che abbiamo analizzato il nostro template di partenza, mettiamolo in uso! Ecco un semplice esempio di come possiamo costruire sopra questo template:

<!doctype html>
<html lang="it">
<head>
<!-- Meta tag richiesti -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS di Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>La mia prima pagina Bootstrap</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">Benvenuti sul mio sito!</h1>
<p class="lead">Questo è un semplice unità di eroe, un componente di stile jumbotron per chiamare l'attenzione su contenuti o informazioni evidenziati.</p>
<hr class="my-4">
<p>Utilizza classi di utilità per la tipografia e lo spacing per distribuire il contenuto all'interno del contenitore più grande.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Scopri di più</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

In questo esempio, abbiamo aggiunto una semplice unità di eroe (una casella di messaggio prominente) utilizzando le classi di Bootstrap. Ecco cosa abbiamo aggiunto:

<div class="container">: Questo crea un contenitore di larghezza fissa reattiva.
<h1 class="mt-5">: La classe mt-5 aggiunge margine in alto all'intestazione.
<p class="lead">: La classe lead fa risaltare questo paragrafo.
<hr class="my-4">: Questo crea una linea orizzontale con margine sull'asse y.
<a class="btn btn-primary btn-lg">: Questo crea un grande pulsante di colore primario.

Conclusione

Eccoci arrivati, gente! Abbiamo percorso il mondo dei template di partenza di Bootstrap, dalla comprensione di cosa sono a creare una semplice pagina web utilizzandone uno. Ricordate, questo è solo l'inizio. Bootstrap offre una vasta gamma di componenti e utilità che potete usare per creare siti web stupefacenti e reattivi.

Mentre chiudiamo, mi viene in mente un'altra studentessa che avevo. Ha iniziato con questo stesso template e, alla fine del semestre, aveva creato un sito portfolio che le ha permesso di ottenere un tirocinio. Chi lo sa? Forse sarà lei tra pochi mesi!

Continuate a praticare, esplorate e, soprattutto, divertitevi. Lo sviluppo web è tanto un'arte quanto una scienza, quindi lasciate che la vostra creatività brilli. Arrivederci e Grazie per Tutti i Pesci, happy coding!

Credits: Image by storyset

Tutorial precedente:

Demo Bootstrap-Masonry

Prossimo tutorial:

Demo Album Bootstrap RTL