Che cos’è Bootstrap? A cosa serve e come si usa?
In questo articolo introduttivo a Bootstrap ti darò tutte le informazioni di cui hai bisogno per iniziare questo nuovo ed interessante percorso alla scoperta del framework per lo sviluppo web più utilizzato al mondo. Capirai presto perché Bootstrap è una delle prime scelte degli sviluppatori per la realizzazione dei siti web e perché dovresti usarlo anche tu.
Questa è la prima parte del nostro corso a Bootstrap, se vuoi maggiori informazioni a riguardo, consulta il programma completo qui.
Introduzione a Bootstrap
Bootstrap è il più popolare e utilizzato framework front-end per lo sviluppo web al mondo, grazie alla sua struttura facile e rapida da imparare.
In breve tempo dalla sua nascita si è rivelato un utilissimo strumento che, chiunque anche con una minima conoscenza di HTML e CSS, può essere utilizzato per realizzare fantastici siti web ottimizzati e responsivi.
Per iniziare a creare siti in Bootstrap non si ha bisogno di sapere molto, basta appunto conoscere un minimo l’HTML e il CSS per riuscire ad impostare le pagine in modo adeguato; questo perché il framework è pensato per accelerare i tempi di sviluppo senza badare troppo ai dettagli, ma di questo parleremo meglio più avanti.
Dalla versione 3 in poi (ora versione 4), Bootstrap è stato migliorato per l’uso sui dispositivi mobili, con un’ottica “mobile-first” e l’ausilio di numerose caratteristiche con design responsivo.
Tutto questo significa che chiunque ha la possibilità di creare siti web molto facilmente senza particolari vincoli, ti basterebbe seguire i nostri corsi gratuiti di HTML e CSS e nel giro di pochi giorni avere il tuo bel sito moderno e “responsive“.
Il vero successo di Bootstrap sta proprio nell’automatizzazione di molti passaggi fondamentali nello sviluppo di siti, ovvero la creazione del layout delle pagine e l’ottimizzazione mobile, nonché nella creazione dello stile di base delle pagine e degli elementi primari (header, menu, sidebar, footer e altro).
Insomma, non ti resta che provarlo per scoprire tutte le funzionalità.
Come usare Bootstrap
Bootstrap è ad uso gratuito, puoi usarlo quando vuoi e per qualsiasi sito web. Il framework è composto da file in formato .js e un foglio di stile specifico, tutti da integrare all’interno delle pagine del tuo sito.
Leggi come integrare i file CSS, e come fare per quelli JavaScript.
Per fare questo hai a disposizione due modi:
- Scaricare i file dal sito ufficiale, estrarli ed inserirli nel tuo sito web. Da qui poi puoi integrarli nelle pagine HTML;
- Includere i file forniti dal CDN (server di Bootstrap). Questo ti permette di evitare il download dei file.
Per semplificare la comprensione del corso, qui di seguito vedremo come includere Bootstrap in un progetto con il secondo metodo:
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
Requisiti minimi per la versione 4.
Per usare Bootstrap è necessario indicare il tag <!DOCTYPE html> per HTML5.
Un altro step importante per la creazione delle pagine con Bootstrap è l’impostazione del tag meta viewport per la corretta visualizzazione del contenuto nei dispositivi mobili.
Incolla questo codice nel tag head delle tue pagine:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Quando non va usato
Come già detto, il vantaggio Bootstrap è di accelerare i tempi di creazione dei siti e delle pagine web, senza dover badare troppo ai dettagli e al comportamento degli elementi di base. Inoltre consente di definire un layout bello e funzionale in breve tempo.
Questo però comporta una ridotta personalizzazione da parte del webmaster, e una più complessa procedura di modifica dello stile. Molti considerano l’avvento di Bootstrap come “la fine del web design“, proprio perché migliaia e migliaia di siti web condividono il 90% dello stile e delle funzioni.
Quindi, se ritieni di aver bisogno di un sito totalmente differente dagli altri e non vuoi spegnere la tua creatività con l’uso di template già definiti, non dovresti usare Bootstrap.
Bootstrap o CMS?
Bootstrap è un framework, da non confondere con un CMS (content management system).
Detto in modo semplice, un framework potrebbe essere considerato come una libreria esterna di funzioni e strumenti, già programmata e subito pronta all’uso. Molti elementi con un framework sono già esistenti e possono essere integrati in un software facilmente, accelerando i tempi per lo sviluppo.
Un CMS invece (come WordPress) è un sistema/software già pronto per essere usato dagli utenti per la creazione di siti web; non richiede conoscenze tecniche da parte degli utilizzatori ma è provvisto di interfaccia grafica semplificata.
Un framework come Bootstrap aiuta a programmare; un CMS è già programmato.
Quindi se desideri avere un sito in poche ore, usa un CMS.
Se stai seguendo il nostro corso, nei successivi articoli ti mostreremo i primi codici per il reale utilizzo per la creazione delle pagine web.
Studia altri argomenti con i nostri corsi gratuiti. Qui la lista completa.
Continua con: Layout e struttura delle pagine Bootstrap.
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
- Come Risolvere i Problemi di Connessione Bluetooth al PC
- Guida alla Cybersecurity: Come proteggerti da minacce informatiche
- Come Aggiungere un Dizionario su App Kindle
