Se non hai mai sentito parlare di Bootstrap, un framework sviluppato da Twitter per creare bellissimi siti Web, ti stai perdendo! Bootstrap rende abbastanza veloce e facile la progettazione di un sito Web senza molta conoscenza dei CSS (Cascading Style Sheets). Se non conosci la programmazione per il Web, non devi sapere nulla di CSS per iniziare a imparare come funziona Bootstrap; tutto ciò di cui hai bisogno è un singolo documento HTML. Daremo un'occhiata a Bootstrap, mostrandoti di cosa si tratta, come funziona e se è una buona opzione per ogni sito web che costruisci.
Inserimento dell'API Bootstrap nel file HTML
Hai alcune opzioni per inserire Bootstrap nel tuo file di progetto principale. La prima opzione è quella di inserire tutti i file Bootstrap necessari nel progetto. Puoi farlo scaricando il pacchetto e caricandolo nella cartella del tuo progetto. Ovviamente dovrai collegare il file CSS Bootstrap primario al tuo documento. Il sito Web ufficiale di Bootstrap ha una guida dettagliata su come eseguire questa operazione.
L'altra opzione è saltare il download del pacchetto e utilizzare una rete di distribuzione di contenuti (CDN). Un CDN consente di collegare i file Bootstrap primari al documento HTML senza mai scaricarlo. Questo, ovviamente, non è sempre una buona cosa per i siti Web professionali, dal momento che non sarei troppo veloce a lasciare la mia pagina di business o portfolio al destino se quel server dovesse mai andare giù. È meglio avere i file nel tuo progetto, ma ai fini dell'apprendimento, la CDN andrà bene.
Per inserire Bootstrap nel tuo documento HTML, devi solo inserire il seguente codice all'interno di
tag nel documento HTML:Una volta inseriti quei collegamenti nel tag head, dovresti essere pronto per iniziare a usare le classi Bootstrap. Il tuo documento dovrebbe assomigliare a questo:
Bootstrap e classi
Gli elementi Bootstrap sono suddivisi in classi, che sono solo un gruppo di CSS pre-scritti che puoi inserire nel tuo markup. Inserire le classi nel tuo markup è facile, devi solo conoscere il nome della classe che vuoi usare e quindi applicarlo a uno dei tuoi elementi HTML usando il valore class = "classname", come discusso in un precedente articolo.
La parte difficile è capire come tutto ciò funzioni insieme per creare qualcosa di bello. Puoi controllare tutte le diverse classi disponibili in Bootstrap direttamente dalla documentazione ufficiale. Ora, padroneggiare Bootstrap è un'altra storia. Non è qualcosa che noi o chiunque altro possiamo insegnarti. Puoi guardare tutorial dopo tutorial, ma per diventare bravo a usare il framework, che viene fornito con un sacco di tentativi ed errori. E ciò richiede di metterti alla prova nei tuoi progetti.
Con questo in mente, ti imploro di iniziare il tuo progetto HTML sul tuo computer usando Atom o qualche altro editor di testo, rivedere quali sono le classi HTML e CSS e quindi iniziare a giocare con Bootstrap. E se conosci abbastanza markup, potresti persino creare il tuo sito Web di portfolio come esercizio di test.
Bootstrap è un'opzione praticabile per ogni sito Web?
Bootstrap è un ottimo framework, ma è un'opzione praticabile per ogni sito Web che crei? Dipende veramente dallo sviluppatore e dai requisiti del progetto. In molti ambienti professionali, non avrai davvero la scelta di quali tecnologie stai usando, poiché dipenderà in gran parte dal Project Manager. Se detto Project Manager sceglie di utilizzare Bootstrap, lo combinerai anche con un sacco di CSS personalizzati. Questo è ciò che generalmente rende il tuo sito Web unico e diverso da altri siti Web utilizzando Bootstrap.
Personalmente, non vedo Bootstrap come un'ottima opzione per ogni sito Web. Certo, può aiutare e fornire alcune scorciatoie, ma alla fine ho scoperto che progettare da zero con CSS è il percorso migliore in gran parte a causa del controllo che hai su di esso. Ma ancora una volta, se hai appena iniziato a programmare Web, non è affatto una cosa negativa utilizzare Bootstrap, ma non fare affidamento su di esso per la tua carriera.
Vale la pena notare che se sei uno sviluppatore principiante, non dovresti usare Bootstrap per tutti i progetti nel tuo portafoglio. Si può scoprire che potresti essere esperto con l'API, ma non conosci completamente il tuo modo di aggirare i CSS. Detto questo, è bene avere una buona combinazione di entrambi sul tuo portfolio (o anche esclusivamente CSS, in quanto è facile raccogliere Bootstrap).
Chiusura
Questo è tutto ciò che Bootstrap è in breve. Come ho accennato in precedenza, ti incoraggio ad iniziare il tuo progetto HTML e ad aggiungere alcune delle diverse classi agli elementi per iniziare a giocare con il framework. Puoi trovare tutti i diversi componenti offerti da Bootstrap con spiegazioni ed esempi di codice qui.
Bootstrap è davvero uno strumento pulito, ma ricorda di non fare affidamento solo su di esso! È utile conoscerlo e conoscere il modo in cui si inquadra il framework, ma assicurarsi anche di immergersi nel CSS per capire veramente cosa sta succedendo dietro le quinte. Non solo, ma una solida conoscenza dei CSS complimenta molto Bootstrap, permettendoti di creare davvero alcuni siti Web unici e belli con la tua personalizzazione.
