Come installare Bootstrap in Angular? 5 semplici modi

Una pagina web funziona meglio quando è interattiva. Tuttavia, non sembra possibile sviluppare una nuova pagina web dall'oggi al domani.

Questo è il momento in cui potresti sentire la necessità di avere accesso a una pagina web che potrebbe essere comune ma potrebbe essere facilmente modificata tramite codici personalizzati. È qui che entra in gioco Bootstrap.

Cominciamo col capire come installare Bootstrap in Angular per creare applicazioni web reattive e vivide su Angular!

Capire Bootstrap: una guida iniziale

Bootstrap è un framework front-end che offre una combinazione di strumenti e componenti di CSS, HTML e JavaScript per creare pagine web dinamiche. Bootstrap è open source oltre che gratuito. Mentre Angular, di per sé, è un framework capace per la creazione di potenti siti Web a pagina singola, combinandolo con Bootstrap alimenta ulteriormente la sua potenza per creare pagine Web reattive e dinamiche.

Bootstrap ha acquisito un'enorme popolarità e circa il 25,8% di tutti i siti Web basati su JavaScript utilizza Bootstrap, il che implica ulteriormente la sua importanza nel mercato.

Bootstrap: uno sguardo alla sua storia

Inizialmente creato come strumento interno per il popolare sito di social networking Twitter, gli ingegneri Jacob Thornton e Mark Otto hanno deciso di pubblicare Bootstrap per l'uso da parte del pubblico nell'agosto 2011 sul repository open source GitHub.

A seguito della sua convenienza e popolarità tra il pubblico, i creatori continuano a lavorare per generare versioni più fresche di Bootstrap, dotandolo di componenti dell'interfaccia utente migliorati e un migliore supporto.

I creatori Mark e Jacob hanno rilasciato l'ultima versione di Bootstrap- Bootstrap 5.3.0 nell'anno 2023.

Dai un'occhiata ai nostricorsi di tecnologia gratuitiper avere un vantaggio sulla concorrenza.

Dovresti usare Bootstrap?

Puoi arrivare a una risposta alla domanda comprendendo la serie di vantaggi offerti da questo progetto. Per cominciare, offre CSS super reattivi. Questo lo rende adattabile su desktop, schede e telefoni. Ha anche la computabilità attraverso la maggior parte dei principali browser.

Aggiungete a questo il vantaggio dei minimi requisiti di configurazione e potrete progettare un layout entro un'ora, se non meno. Bootstrap è favorevole all'uso perché non richiede che un utente sia esperto di CASS o persino di HTML, a meno che non sia necessario avviare modifiche basate sull'interfaccia utente.

Le funzionalità più amichevoli che rendono Bootstrap una scelta popolare per l'incorporamento in Angular o per l'aggiuntadell'installazione di Angular Bootstrap sono-

Aspetto componente

Dalle barre di navigazione ai moduli, Bootstrap fornisce un registro dei componenti per le applicazioni quando decidi come aggiungere Bootstrap in Angular.Con l'aiuto di questi componenti, progettare un sito o un'app in modo creativo diventa molto semplice. Questa funzionalità con Bootstrap in Angular è molto popolare tra gli sviluppatori.

Dai un'occhiataai corsi di sviluppo software di upGrad per migliorare te stesso.

Aspetto di personalizzazione

Quando eseguil'installazione di Bootstrap in Angular, puoi progettare punti di interruzione personalizzati anche per una colonna e inserire anche interruzioni nelle dimensioni secondo le tue necessità.Semplifica ulteriormente la personalizzazione basata sulla griglia reattiva del framework.

Risparmio di tempo

Il framework di Bootstrap, se incorporato in Angular, porta a un notevole risparmio di tempo sulla sequenza temporale. Grazie ai blocchi già pronti in Bootstrap, non è necessario iniziare dall'inizio quando installiBootstrap 5 in angular .Riallineare semplicemente gli elementi integrati e renderli utilizzabili con i tuoi input fa il trucco e aggiunge persino unicità al tuo prodotto finale.

Prerequisiti per l'installazione di Bootstrap in Angular

Ecco un elenco di controllo dei prerequisiti per l'aggiunta di Bootstrap ad Angular. Assicurati di configurare gli strumenti elencati dopo aver installato gli stessi per creare l'applicazione Angular.

• Git : questa è una configurazione dell'unità di controllo della versione distribuita da utilizzare per la sincronizzazione del repository.
• IDE : l'utilizzo di un ambiente di sviluppo integrato con un'interfaccia grafica è vitale per lo sviluppo di applicazioni, incluso Angular.
• Node.js e npm : il primo è un software di codice JavaScript per il runtime.Mentre quest'ultimo, npm, si presenta come un gestore di pacchetti utilizzato per Node.js. Tutte le applicazioni Angular vengono eseguite in base ai due, mentre queste aiutano anche nell'installazione della libreria.
• Angular CLI: questo strumento di utilità si basa sulla riga di comando per la creazione della struttura di base di Angular.

Prendi spunto dai vari corsi di ingegneria del software disponibili da docenti esperti di upGrad, come il Master of Science in Computer Science , e migliora le tue capacità di sviluppo in modo esponenziale.

Metodo 1: installazione di Bootstrap tramite CDN

Segui i passaggi pertinenti per installare Bootstrap su Angular tramite CDN.

• Individua la cartella "src" e apri il file di progetto angolare " index.html ".
• Incorpora i seguenti link nella sezione ' <head> '.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

• I file JavaScript e CSS per Bootstrap sono inclusi in queste righe di codice dagli URL CDN designati.
• Salva le modifiche finali nel file " index.html ".

Il tuo progetto Angular utilizzerà gli stili Bootstrap e le funzionalità JavaScript offerte dal CDN dopo aver incluso questi collegamenti CDN. Ora sei pronto per sfruttare i componenti Bootstrap all'interno dei tuoi progetti Angular!

Metodo 2: installazione di Bootstrap tramite il gestore di pacchetti npm

L'installazione di Bootstrap utilizzando npm manager può essere eseguita seguendo i semplici passaggi indicati.

• Apri il prompt dei comandi o il terminale.
• Naviga nella directory principale del tuo progetto Angular.
• Installa Bootstrap e le relative dipendenze eseguendo il comando " npm install bootstrap" .Il comando pertinente scaricherà Bootstrap e le relative dipendenze nella tua directory etichettata come'node_modules'.
• Dopo l'installazione, è necessario incorporare gli stili Bootstrap e Javascript aprendo il file "angular.json" dalla directory principale e aggiungendo la seguente voce all'interno dell'array "styles".

"node_modules/bootstrap/dist/css/bootstrap.min.css"

• Inoltre, aggiungi il seguente comando all'interno dell'array 'scripts' .

"node_modules/bootstrap/dist/js/bootstrap.min.js"

• Salva tutte le modifiche apportate al file " angular.json" .

Ora sei pronto per utilizzare le classi JavaScript e CSS di Bootstrap nei tuoi componenti e modelli Angular.

Esplora i nostri famosi corsi di ingegneria del software

Metodo 3: installazione di Bootstrap tramite la CLI di Angular

Ecco una guida facile da seguire per aiutarti a installare Bootstrap tramite Angular CLI.

• Apri il prompt dei comandi.
• Esegui il comando 'ng new my-app' per utilizzare la CLI Angular e creare un nuovo progetto Angular.Puoi sostituire'my-app' con un nome a tua scelta.
• Passare alla directory del progetto.

cd mia-app

• Ripeti il ​​processo di installazione di Bootstrap usando npm, come menzionato sopra.

Ora hai creato un nuovo progetto Angular utilizzando la CLI e hai installato Bootstrap per il tuo progetto!

Metodo 4: installazione di Bootstrap tramite il gestore di pacchetti Bower

• Assicurati di installare sia npm che bower a livello globale.
• Esegui il comando specificato nel prompt dei comandi: npm install -g bower
• Una volta installato Bower, vai alla cartella del tuo progetto e digita

Bower installa il bootstrap

bower installa jquery

I passaggi precedenti installeranno i file di installazione Bootstrap pertinenti nella cartella "bower_components" appena creata .

• Il passaggio finale consiste nell'includere i file per Bootstrap e jquery nel file di progetto.

Sebbene questi siano tutti i passaggi per installare Bootstrap in Angular, tieni presente che non è più consigliabile utilizzare bower per l'installazione di Bootstrap.

Esplora i nostri corsi gratuiti di sviluppo software

Metodo 5: installazione di Bootstrap tramite una build personalizzata

Ecco i semplici passaggi per installare Bootstrap tramite una build personalizzata

• Scarica la versione di Bootstrap che preferisci dal sito Web ufficiale insieme ai suoi file Javascript e CSS.
• Estrai il file zip e copia 'bootstrap.min.css ' da esso .
• Nel tuo progetto Angular, vai alla directory ' src ' e creane una nuova chiamata ' assets'. Assicurati di creare un'altra directory all'interno delle 'risorse' chiamata ' css'.
• Incolla"bootstrap.min.css " nella directory " css".
• Ancora una volta, nella directory 'assets ', crea una nuova directory chiamata ' js' e incolla il file 'bootstrap.min.js' estratto dalla cartella zip all'interno di questa nuova directory.
• Apri 'angular.json ' nella directory principale e naviga nell'array ' styles'seguendo il segmentoarchitect > build > options.
• Aggiungi i file CSS Bootstrap utilizzando il seguente comando:

"src/assets/css/bootstrap.min.css"

• Trova l' array 'scripts' nello stesso e incolla il seguente comando-

"src/assets/js/bootstrap.min.js"

• Salva le modifiche al file ' angular.json '.

Best practice da seguire durante l'installazione di Bootstrap

Sebbene esistano diversi modi per installare Bootstrap in Angular, conoscere le best practice può semplificare ulteriormente il processo.

• Assicurati di importare i file CSS Bootstrap corretti all'interno dei file e delle cartelle corretti nel tuo progetto Angular.
• Mentre Bootstrap offre un ampio catalogo di classi e componenti CSS, scegli solo quelli rilevanti per il tuo progetto.
• Evita componenti non necessari per ottimizzare le prestazioni.
• Rimani aggiornato con l'ultima versione di Bootstrap.
• Sebbene i componenti Javascript siano disponibili, usali solo con parsimonia. Prova a sfruttare le librerie specifiche di Angular.

D'altra parte, se riesci a gestire il tempo e sperare di diventare uno sviluppatore migliore, niente può andare meglio dell'Executive Post Graduate Program di upGrad in Software Development- Full Stack, alimentato da IIIT-B.

Conclusione

Qui si conclude il nostro elenco di alcuni dei modi migliori per installare Bootstrap in Angular per lo sviluppo avanzato di pagine Web. Dal design reattivo ottimizzato all'incorporazione di nuove funzionalità dinamiche, sapere come sfruttare i giusti componenti Bootstrap con pratiche coerenti ti aiuterà a prendere il sopravvento nel settore!

Partecipare al Full Stack Software Development Bootcamp di Grad è un altro modo per ampliare la tua carriera di sviluppatore con competenze richieste e una guida esperta.

Iscriviti ora per espandere i tuoi orizzonti!