Il framework CSS chiamato Bootstrap è uno dei framework ampiamente utilizzati per la creazione e la progettazione di applicazioni Web. Ha HTML, stili CSS e alcuni componenti di design JavaScript per forme, pulsanti, navigazione e altri moduli di interfaccia. Prima di utilizzare Bootstrap, è necessario aggiungere i collegamenti CSS, JavaScript e JQuery richiesti.

Questo articolo descriverà i metodi su come aggiungere bootstrap a un progetto.

Come aggiungere bootstrap a un progetto?

Esistono due modi per aggiungere bootstrap a un progetto:

• • Scarica bootstrap
  • Aggiunta di bootstrap da una CDN

Metodo 1: scarica bootstrap

Se vuoi ospitare Bootstrap sul tuo sito Web, scarica Bootstrap dal suo sito Web ufficiale e segui le istruzioni.

Metodo 2: aggiunta bootstrap da una CDN

Una rete globale chiamata CDN o Content Delivery Network cache la risorsa statica per un sito Web in tutto il mondo. Le risorse includono immagini, video, CSS e altro ancora. Rende il tempo di caricamento del sito Web più veloce caricando i file statici dal server CDN relativamente vicino. Maxcdn offre il supporto CDN per JavaScript e CSS di Bootstrap. JQuery deve anche essere incluso.

Implettiamo un esempio per creare una pagina Web utilizzando Bootstrap.

Esempio: crea una pagina Web utilizzando bootstrap

Per creare una pagina Web con bootstrap, prova i seguenti passaggi:

Passaggio 1: creare un file HTML

Innanzitutto, crea un file HTML e nominalo con l'estensione ".html". Nel nostro caso, abbiamo chiamato il file HTML "indice.html". Dopo averlo creato, aggiungi gli elementi richiesti come mostrato di seguito:

Passaggio 2: aggiungi il collegamento CSS bootstrap richiesto

Ora aggiungi il collegamento CSS bootstrap richiesto all'interno dell'elemento "":

Supponiamo che stiamo usando Bootstrap 4, quindi visita il sito ufficiale di Bootstrap 4 e copia il link CSS nella sezione HTML Head.

Bootstrap CSS

Passaggio 3: aggiungi i tag di script richiesti

Esistono diversi componenti di bootstrap che richiedono javascript per funzionare correttamente. Più specificamente, hanno bisogno di plugin jquery, popper e javascript. Per aggiungerli al tuo progetto, usa ""Tag, proprio prima del""Tag di chiusura:

Nota importante: La sequenza dei tag "" non deve essere modificata, come JQuery deve essere posizionata per primo, JS e Terzo Popper.js.

Suggerimento bonus

C'è un modo semplice e semplice per includere bootstrap nel tuo progetto. Il modello di avviamento può essere copiato dal sito ufficiale di Bootstrap e incollato nel tuo progetto.

Passaggio 4: Aggiungi elementi HTML

Abbiamo aggiunto con successo i collegamenti bootstrap necessari. Ora aggiungi gli elementi HTML per creare una pagina Web. Ad esempio, nell'esempio in corso aggiungi gli elementi HTML all'interno del ""Elemento come menzionato di seguito:

• • Innanzitutto, aggiungi un ""Elemento per creare un'area per gli elementi. Assegnalo il "centro di testo" E "BG-Info" classi.
  • All'interno del "", aggiungi il "

    Tag con la classe "Warning di testo"Per specificare un'intestazione di colore giallo.

  • Quindi, includi alcuni contenuti di testo utilizzando "

    "Elemento.

Html

Linuxhint

Linuxhint fornisce i migliori articoli e video per scopi educativi!

Le classi bootstrap utilizzate nell'esempio sopra menzionato sono spiegate di seguito:

• • IL "centro di testo"Class Center allinea il testo.
  • "BG-Info"Aggiunge un colore blu.
  • "BG-Warning"Applica il colore giallo al testo.

Salva il codice e avvialo nel browser. La pagina web sarà così:

Ecco come puoi aggiungere bootstrap al tuo progetto.

Conclusione

Per aggiungere bootstrap al tuo progetto, "Scarica Bootstrap" O "Usa bootstrap cdn"Sono le due opzioni. Per scaricare Bootstrap, visitare il sito Web ufficiale e seguire la guida e se non si desidera scaricarlo, quindi usalo tramite CDN. Per fare ciò, aggiungi il collegamento CSS all'interno del ""Sezione dell'HTML e aggiungi i tag di jQuery, JavaScript e Popper.js vicino alla chiusura ""Tag. Quindi, includi gli elementi HTML dopo il tag iniziale di ""Elemento. Questo articolo ha spiegato come aggiungere bootstrap a un progetto con un esempio.