TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Iniziare con Bootstrap

29

Dieci anni fa, avere un sito web era un sogno ed era possibile solo per i fanatici della tecnologia. Al giorno d’oggi ogni uomo comune può avviare un sito o un blog grazie alla popolarità degli strumenti gratuiti per la creazione di siti e dei framework dell’interfaccia utente. Poiché l’industria della costruzione di siti è di natura molto competitiva, ogni azienda deve concentrarsi sull’offerta migliore di altre per attirare gli utenti finali. Bootstrap è uno dei framework più diffusi e ti spiegheremo come puoi iniziare a imparare Bootstrap per creare i tuoi siti web.

Ci sono tre tipi di strumenti per utenti e sviluppatori per iniziare con il loro sito web:

  • Sistemi di gestione dei contenuti open source self-hosted come WordPress.org, Drupal e Joomla.
  • Piattaforme ospitate gratuite come WordPress.com, Weebly e Wix.
  • Framework di interfaccia utente (UI) indipendenti come Bootstrap e Google Material Design.

L’ambito delle piattaforme self-hosted è vasto e non adatto alla maggior parte degli utenti finali che non hanno tempo da investire. Le piattaforme ospitate gratuitamente sono facili da usare ma hanno forti dipendenze che limiteranno le tue capacità solo a quella piattaforma. L’ultima opzione è avere un mix di self-hosting, sviluppo e la libertà di riutilizzare i blocchi di elementi frontend. In questo articolo, esploriamo di più su come iniziare con il framework frontend Bootstrap.

Iniziare con Bootstrap

Impara Bootstrap

Cos’è Bootstrap?

Bootstrap è uno dei framework di interfaccia utente più diffusi disponibili in questo momento. Questo è un framework frontend creato con HTML, CSS e JavaScript senza il coinvolgimento di script lato server come PHP. Inizialmente è stato sviluppato da Twitter con il nome "Twitter Blueprint" per migliorare la visibilità coerente su più dispositivi e strumenti. Successivamente è stato ribattezzato Bootstrap e rilasciato come progetto open source nell’agosto 2011.

Bootstrap è uno dei progetti popolari disponibili su GitHub con oltre 100k stelle. Le informazioni più recenti sulle versioni e sugli aggiornamenti di Bootstrap sono disponibili sul sito Web ufficiale getbootstrap.com. La popolarità di Bootstrap è aumentata nel corso del tempo con l’approccio mobile first e la facile conversione dei temi Bootstrap in temi di gestione dei contenuti popolari come WordPress. Esistono anche famosi costruttori di siti Bootstrap come Mobirise per avviare il tuo sito Web senza competenze di codifica.

Versioni Bootstrap

La tabella seguente mostra l’aggiornamento della versione di Bootstrap, è a V4 alpha 6 quando è stato scritto questo articolo.

Versione Data Principali cambiamenti
Versione 1 19 agosto 2011 Open source
Versione 2 31 gennaio 2012 Importante aggiornamento con layout della griglia a 12 colonne e Glyphicons.
Versione 3 19 agosto 2013 Design piatto e primo approccio mobile.
Versione 4 19 agosto 2015 Importante aggiornamento nelle classi CSS, uso di Sass e rimozione di Glyphicons, tether.js eliminato e aggiunto popper.js.
Versione 5 05 maggio 2021 Libero da jQuery, icone Bootstrap, nuovo logo e supporto RTL.

Uso generale

In questo momento la versione stabile è Bootstrap 5.01 e devi migrare all’ultima versione se stai usando le versioni precedenti 3 o 4. Quindi se stai sviluppando un sito da pubblicare a breve, idealmente dovresti usare la versione 5.01 che è stabile. Gli utenti finali possono scaricare direttamente i file CSS/JS precompilati e utilizzarli sul tuo sito. Scarica la versione 3.4.1 qui, la V4.6 qui e la V5.01 qui. Se stai sviluppando progetti per clienti o per te stesso, puoi scaricare il codice sorgente completo con i file Sass da GitHub.

Nota: l’ installazione di Bootstrap sul tuo PC basato su Windows o macOS è un’attività complicata in quanto ha molte dipendenze. In breve, dovresti avere Node.js e NPM installati sul tuo computer insieme a Grunt per la compilazione. Inoltre è possibile utilizzare Harp.js per generare file di siti statici utilizzando parziali o include.

Licenza

I file Bootstrap sono distribuiti con licenza MIT con un unico requisito in quanto le informazioni sul copyright devono essere conservate in tutti i file sorgente Bootstrap.

Mantieni la licenza e l’avviso di copyright inclusi nei file CSS e JavaScript di Bootstrap quando li usi nei tuoi lavori.

Puoi visualizzare l’intera licenza in GitHub.

Avviare il tuo sito

Hai due modi per iniziare a costruire il tuo sito con Bootstrap. Uno consiste nel scaricare e ospitare file CSS e JS sul server di hosting e l’altro è utilizzare i collegamenti CDN. Ti consigliamo di creare un modello di partenza e poi iniziare a utilizzare tutti i componenti Bootstrap all’interno di un modello di partenza. Puoi ottenere maggiori dettagli nella sezione del modello di avvio Bootstrap 5.

Di seguito sono riportati i collegamenti CDN per l’utilizzo sul tuo sito:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Assicurati di utilizzare Popper e quindi il file Bootstrap JS in sequenza, altrimenti puoi utilizzare un singolo file di script in bundle che include lo script Popper. Allo stesso modo, aggiungi eventuali fogli di stile CSS personalizzati dopo il CSS Bootstrap, in modo che non abbia la precedenza sulle definizioni del framework. Bootstrap 5 utilizza border-box per la proprietà di ridimensionamento della scatola che può influenzare i layout. Puoi cambiarlo in content-box se necessario solo per elementi particolari dichiarando CSS inline.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More