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

Modello di avvio Bootstrap 5

1

Bootstrap 5 è ​​stato rilasciato come versione pubblica finale. Ciò significa essenzialmente che dovresti preparare la migrazione dalla versione precedente e utilizzare la nuova versione per creare nuovi siti Web. Sia che tu stia migrando o iniziando un nuovo sito, dovresti prima imparare il minimo indispensabile o il modello di partenza. In questo tutorial spiegheremo come creare un modello di avvio Bootstrap 5 di base per avviare i tuoi progetti con semplici esempi.

Utilizzo del modello di avvio Bootstrap 5

  1. Download dei file sorgente di Bootstrap
  2. Hosting di file Bootstrap 5 sul tuo server
  3. Utilizzo del modello di avvio Bootstrap 5 con collegamenti CDN
  4. Personalizzazione dei componenti Bootstrap 5
  5. Prendendo ulteriormente il modello di partenza
  6. Utilizzo del file di script in bundle nella versione 5
  7. Comprese le icone Bootstrap
  8. Utilizzo di generatori di siti statici

1 Download di Bootstrap 5 File sorgente

Come utente finale, ci sono due modi per utilizzare i file CSS e JavaScript di Bootstrap. Uno è scaricare i file precompilati e includerli nei tuoi progetti e il secondo è utilizzare i collegamenti CDN.

Puoi saperne di più su come ottenere i file Bootstrap nell’articolo Iniziare con Bootstrap.

2 Utilizzo di file Bootstrap sul proprio server

Puoi scaricare i file CSS e JavaScript precompilati dal repository GitHub. Il file zip dovrebbe avere le cartelle CSS e JS. Di seguito sono riportati i file disponibili all’interno delle cartelle CSS:

Modello di avvio Bootstrap 5

File Bootstrap 5

Sono disponibili più versioni CSS nel file sorgente scaricato:

  • File CSS predefiniti e minimizzati che puoi usare con qualsiasi progetto
  • File delle utilità
  • Versione solo griglia
  • Riavvia solo la versione

Su un server di produzione, puoi utilizzare la versione minificata "bootstrap.min.css" per tutte le tue esigenze. I file di mappa di origine aiutano a mappare tra le versioni minificate di origine e precompilate. Non è necessario utilizzare reboot, grid e file di mappa per l’utilizzo regolare sui siti.

Nota: quando utilizzi solo il file "bootstrap.min.css" sul tuo sito, alcuni browser come Safari mostreranno un errore o un avviso nella console degli sviluppatori che manca il file della mappa di origine. Per correggere l’errore, apri il file CSS Bootstrap e rimuovi l’ultima riga "/ # sourceMappingURL=bootstrap.min.css.map /".

Simile ai file CSS, la cartella JS avrà "bootstrap.js" e "bootstrap.bundle.js". Il file "bootstrap.js" non include lo script Popper ma la versione bundle include lo script Popper. Con la versione precedente di Bootstrap 4, è necessario includere jQuery separatamente affinché i componenti JavaScript funzionino correttamente. Tuttavia, Bootstrap 5 non ha bisogno di jQuery come parte del framework e progettato per funzionare senza jQuery.

Modello di avvio Bootstrap 5

Bootstrap 5 file JS

Con la comprensione di cui sopra, i file sorgente avranno la seguente struttura contenente molti file CSS e JS.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Il modello di base di partenza dovrebbe apparire come di seguito quando ospiti i file di cui sopra sul tuo server:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Ricorda, se non stai utilizzando il file JS in bundle, devi includere file di script JS e popper separati. Se hai notato correttamente, ci sono molti tag e script aggiuntivi nel modello di partenza.

  • Bootstrap utilizza DOCTYPE HTML5 per i modelli. Quindi, assicurati di includere <!DOCTYPE HTML> all’inizio del tuo modello HTML per evitare comportamenti imprevisti.
  • Devi utilizzare il meta tag viewport per garantire la reattività del modello in base al dispositivo di rendering.
  • Nel caso in cui aggiungi jQuery, assicurati di aggiungere prima gli script "popper.min.js" e "bootstrap.min.js".
  • Puoi anche scaricare lo script Popper dal sito Popper e caricarlo nella cartella "assets/js/" del tuo sito.
  • Ricorda che lo script Popper è essenziale per il corretto funzionamento dei plugin Bootstrap. Popper è una libreria JavaScript utilizzata principalmente per posizionare elementi mobili come il componente tooltip in Bootstrap.

Nota che abbiamo usato "assets/css/bootstrap.min.css" e "assets/js/bootstrap.bundle.min.js" come percorsi di file. È una buona abitudine tenere tutti i file CSS e JS in una cartella separata in modo che sia facile da gestire. Ciò significa essenzialmente che dovresti creare le cartelle corrispondenti sul tuo server e caricare manualmente i file CSS e JS di Bootstrap. Conserva anche le immagini in una cartella "immagini" separata e in file HTML nella radice del tuo sito. Quindi l’intera struttura dovrebbe apparire come di seguito sul tuo server:

Modello di avvio Bootstrap 5

Struttura del file del tema Bootstrap 5

La "Cartella dei temi" nell’esempio sopra è la cartella principale del tuo sito che dovrebbe essere il tuo dominio o sottodominio o sottodirectory.

3 Utilizzo del modello di partenza con CDN

L’hosting di tutti i file necessari sul tuo server è il modo corretto, ma influirà sulla velocità di caricamento e sulla capacità di hosting. Pertanto, ti consigliamo di utilizzare i collegamenti CDN per i file CSS e JS invece di ospitarli sul tuo server. Ciò garantirà la consegna rapida di quei file statici e migliorerà la velocità di caricamento della pagina. Di seguito è riportato un modello di avvio Bootstrap 5 con collegamenti CDN per CSS e script. Puoi semplicemente aggiungere contenuti nella sezione del corpo per iniziare a costruire il tuo sito o tema. In precedenza, la versione Bootstrap 4 proveniva dalla rete CDN Bootstrap e l’ultima versione 5 proviene da jsDelivr.

<!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>

4 Personalizzazione dei file sorgente Bootstrap

L’utilizzo dei file modello completi non è richiesto in tutti i casi. Ad esempio, quando si desidera utilizzare solo i pulsanti Bootstrap, è possibile utilizzare solo gli stili appropriati per i pulsanti. Bootstrap offre un personalizzatore per la versione precedente 3.4 in cui è possibile scegliere quali componenti sono necessari e generare i file precompilati.

Modello di avvio Bootstrap 5

Personalizzazione dei file bootstrap

Al momento non è disponibile alcun personalizzatore dettagliato per la versione Bootstrap 5. Tuttavia, puoi fare riferimento al sito della documentazione ufficiale per ottenere maggiori dettagli sulla personalizzazione di Bootstrap 5.

5 Proseguire con il modello di base

Ora che hai il tuo modello di partenza finale ospitato sul tuo server o utilizzando i collegamenti CDN. Il prossimo passo è aggiungere contenuti e iniziare a costruire il tuo sito. Di seguito è riportato un semplice esempio in cui abbiamo creato diversi pulsanti contestuali utilizzando le classi di pulsanti Bootstrap predefinite.

<!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> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <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>

L’output dovrebbe apparire come di seguito sul browser:

Modello di avvio Bootstrap 5

Idealmente non è necessario utilizzare file di script jQuery, popper e Bootstrap per creare semplici pulsanti controllati tramite CSS. Abbiamo mostrato l’esempio per completezza del modello di partenza. Inoltre, quando si aggiungono più componenti, dovrebbe essere incluso il file di script in bundle.

6 Utilizzo della versione di script in bundle Bootstrap

Come spiegato sopra, Bootstrap 5 ha un file di script in bundle che combina "bootstrap.min.js" e "popper.min.js". Quindi, se si desidera utilizzare la versione in bundle, modificare il modello di partenza come di seguito utilizzando il file "bootstrap.bundle.min.js".

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7 Incluse le icone Bootstrap nel modello

Bootstrap versione 5 include oltre 1300 icone SVG gratuite che puoi facilmente includere nei tuoi siti web. Aiuta ad eliminare la dipendenza da icone esterne come le icone Font Awesome. Esistono diversi modi per includere le icone nel modello di partenza e l’opzione migliore è utilizzare CDN CSS come di seguito. Abbiamo mostrato un’icona di esempio nella sezione del corpo con il componente di avviso. Puoi ottenere l’elenco completo delle classi CSS per le icone qui.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <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> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Utilizzo di generatori di siti statici

È facile creare un sito Web statico utilizzando il modello di avvio Bootstrap, ma la modifica di più file statici su un sito più grande richiederà molto tempo. Una singola pagina web contiene diverse sezioni come intestazione, contenuto principale, piè di pagina e barra laterale. Tutte le sezioni diverse dal contenuto principale vengono utilizzate in tutto il sito con le stesse informazioni. I generatori statici utilizzano il concetto di parziali avendo i modelli di base per ciascuna delle sezioni come intestazione, piè di pagina e barra laterale. Infine tutti questi modelli di base sono assemblati con il contenuto del corpo principale su ciascuna pagina separatamente.

Ogni volta che è necessario modificare l’intestazione, il piè di pagina e la barra laterale, è possibile modificare i modelli di base invece di modificare singolarmente ogni pagina. Quando il sito è pronto puoi generare i file HTML, CSS e JavaScript per caricarli sul tuo server. Uno dei più popolari generatori di siti statici è Harp.js che puoi installare sul tuo computer locale per un ulteriore sviluppo del modello di partenza. Ricorda che Harp.js ha bisogno di Node.js/NPM come dipendenza, quindi dovresti aver installato questi componenti in anticipo. In alternativa, puoi utilizzare app generator come Mobirise per utilizzare il framework Bootstrap senza la necessità di comprendere la codifica.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: 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