Cum se instalează Bootstrap în Angular? 5 moduri ușoare

O pagină web funcționează cel mai bine atunci când este interactivă. Cu toate acestea, nu pare posibilă dezvoltarea unei noi pagini web peste noapte.

Acesta este momentul în care s-ar putea să simți nevoia de a avea acces la o pagină web care ar putea fi comună, dar care ar putea fi modificată cu ușurință prin coduri personalizate. Aici intervine Bootstrap.

Să începem prin a înțelege cum să instalăm Bootstrap în Angular pentru a crea aplicații web receptive și vii pe Angular!

Înțelegerea Bootstrap: un ghid inițial

Bootstrap este un cadru front-end care oferă o combinație de instrumente și componente din CSS, HTML și JavaScript pentru a crea pagini web dinamice. Bootstrap este open source și gratuit. În timp ce Angular, în sine, este un cadru capabil pentru a construi site-uri web puternice, cu o singură pagină, combinarea acestuia cu Bootstrap îi alimentează și mai mult potența de a crea pagini web receptive și dinamice.

Bootstrap a câștigat o popularitate uriașă și aproximativ 25,8% din toate site-urile web bazate pe JavaScript folosesc Bootstrap, ceea ce implică și mai mult importanța sa pe piață.

Bootstrap: O privire asupra istoriei sale

Creați inițial ca instrument intern pentru popularul site de socializare Twitter, inginerii Jacob Thornton și Mark Otto au decis să publice Bootstrap pentru uzul publicului în august 2011 pe depozitul open-source GitHub.

Ca urmare a confortului și a popularității sale în rândul publicului, creatorii continuă să lucreze la generarea de versiuni mai noi de Bootstrap, echipându-l cu componente îmbunătățite de UI și un suport mai bun.

Creatorii Mark și Jacob au renunțat la cea mai recentă versiune a Bootstrap- Bootstrap 5.3.0 în anul 2023.

Consultațicursurile noastre gratuite de tehnologiepentru a obține un avantaj față de concurență.

Ar trebui să utilizați Bootstrap?

Puteți ajunge la un răspuns la întrebare înțelegând multitudinea de beneficii oferite de acest proiect. Pentru început, oferă CSS super receptiv. Acest lucru îl face adaptabil pe desktop-uri, file, precum și pe telefoane. De asemenea, are capacitate de calcul în majoritatea browserelor majore.

Adăugați la aceasta avantajul celor mai puține cerințe de configurare și veți putea proiecta un aspect într-o oră, dacă nu mai puțin. Bootstrap este propice pentru utilizare, deoarece nu are nevoie de un utilizator pentru a fi competent cu CASS sau chiar cu HTML, decât dacă trebuie să inițiezi modificări bazate pe UI.

Cele mai prietenoase caracteristici care fac din Bootstrap o alegere populară pentru încorporarea în Angular sau pentru adăugareainstalării Angular Bootstrap sunt:

Aspect component

De la bare de navigare la formulare, Bootstrap oferă un jurnal de componente pentru aplicații atunci când decideți cum să adăugați Bootstrap în Angular.Cu ajutorul acestor componente, proiectarea unui site sau a unei aplicații în mod creativ devine foarte ușoară. Această funcționalitate cu Bootstrap în Angular este foarte populară printre dezvoltatori.

Consultațicursurile de dezvoltare software upGrad pentru a vă îmbunătăți abilitățile.

Aspect de personalizare

Când efectuațiinstalarea Bootstrap în Angular, puteți proiecta puncte de întrerupere personalizate chiar și pentru o coloană și puteți introduce pauze, de asemenea, în dimensiuni conform nevoilor dvs.Simplifică și mai mult personalizarea bazată pe grila receptivă a cadrului.

Economisirea de timp

Cadrul Bootstrap, atunci când este încorporat în Angular, duce la economii mari de timp pe bitul cronologiei. Datorită blocurilor care sunt gata făcute în Bootstrap, nu este nevoie să începeți chiar de la început când instalațiBootstrap 5 în unghi .Pur și simplu realiniați elementele încorporate și le faceți utilizabile cu intrările dvs. face truc și chiar adaugă unicitate produsului final.

Cerințe preliminare pentru instalarea Bootstrap în Angular

Iată o listă de verificare a cerințelor preliminare pentru adăugarea Bootstrap la Angular. Asigurați-vă că configurați instrumentele enumerate după ce le instalați pentru a crea aplicația Angular.

• Git : Aceasta este o configurație distribuită pentru unitatea de control al versiunii de utilizat pentru sincronizarea depozitului.
• IDE – Utilizarea unui mediu de dezvoltare integrat cu o interfață grafică este vitală pentru dezvoltarea aplicațiilor, inclusiv Angular.
• Node.js și npm : Primul este un software de cod JavaScript pentru runtime.În timp ce acesta din urmă, npm, vine ca un manager de pachete folosit pentru Node.js. Toate aplicațiile Angular rulează pe baza celor două, în timp ce acestea ajută și la instalarea bibliotecii.
• Angular CLI: Acest instrument utilitar se bazează pe linia de comandă pentru stabilirea structurii de bază a Angular.

Urmăriți-vă de la diferitele cursuri de inginerie software disponibile de la facultatea de experți de la upGrad, cum ar fi Masterul în Științe în Informatică și îmbunătățiți-vă exponențial abilitățile de dezvoltare.

Metoda 1: Instalarea Bootstrap prin CDN

Urmați pașii relevanți pentru a instala Bootstrap pe Angular prin CDN.

• Găsiți folderul „src” și deschideți fișierul proiect Angular „ index.html ”.
• Încorporați următoarele linkuri în secțiunea „ <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>

• Fișierele JavaScript și CSS pentru Bootstrap sunt incluse în aceste linii de cod de la adresele URL CDN desemnate.
• Salvați modificările finale în fișierul dvs. „ index.html ”.

Proiectul dvs. Angular va utiliza stilurile Bootstrap și capacitățile JavaScript oferite de CDN după ce ați inclus aceste linkuri CDN. Acum sunteți gata să utilizați componentele Bootstrap în cadrul proiectelor dvs. Angular!

Metoda 2: Instalarea Bootstrap prin intermediul managerului de pachete npm

Instalarea Bootstrap folosind managerul npm se poate face urmând pașii simpli dați.

• Deschideți promptul de comandă sau terminalul.
• Navigați în directorul rădăcină al proiectului dvs. Angular.
• Instalați Bootstrap și dependențele sale aferente rulând comanda „ npm install bootstrap” .Comanda relevantă va descărca Bootstrap și dependențele sale relevante în directorul dvs. etichetat ca„node_modules”.
• După instalare, trebuie să încorporați stiluri Bootstrap și Javascript deschizând fișierul „angular.json” din directorul rădăcină și adăugând următoarea intrare în matricea „stiluri”.

„node_modules/bootstrap/dist/css/bootstrap.min.css”

• În plus, adăugați următoarea comandă în matricea „scripturi” .

„node_modules/bootstrap/dist/js/bootstrap.min.js”

• Salvați toate modificările făcute în fișierul „ angular.json” .

Acum sunteți gata să utilizați clasele JavaScript și CSS din Bootstrap în componentele și șabloanele dvs. Angular.

Explorați cursurile noastre populare de inginerie software

Metoda 3: Instalarea Bootstrap prin intermediul CLI Angular

Iată un ghid ușor de urmat pentru a vă ajuta să instalați Bootstrap prin Angular CLI.

• Deschideți promptul de comandă.
• Rulați comanda „ng new my-app” pentru a utiliza Angular CLI și creați un nou proiect Angular.Puteți înlocui„aplicația mea” cu un nume la alegere.
• Schimbați în directorul de proiect.

cd aplicația mea

• Repetați procesul de instalare Bootstrap folosind npm, așa cum s-a menționat mai sus.

Acum ați creat un nou proiect Angular folosind CLI, precum și ați instalat Bootstrap pentru proiectul dvs.!

Metoda 4: Instalarea Bootstrap prin managerul de pachete Bower

• Asigurați-vă că instalați atât npm, cât și bower la nivel global.
• Rulați comanda dată în linia de comandă – npm install -g bower
• Odată ce bower este instalat, accesați folderul de proiect și tastați

bower install bootstrap

bower instalează jquery

Pașii de mai sus vor instala fișierele de instalare Bootstrap relevante în folderul „bower_components” proaspăt creat .

• Pasul final ar fi să includeți fișierele pentru Bootstrap și jquery în fișierul dvs. de proiect.

Deși aceștia sunt toți pașii pentru a instala Bootstrap în Angular, rețineți că bower nu mai este recomandat să fie utilizat pentru instalarea Bootstrap.

Explorați cursurile noastre gratuite de dezvoltare software

Metoda 5: Instalarea Bootstrap printr-o versiune personalizată

Iată pașii simpli pentru a instala Bootstrap printr-o versiune personalizată

• Descărcați versiunea Bootstrap aleasă de pe site-ul oficial împreună cu fișierele Javascript și CSS.
• Extrageți fișierul zip și copiați „bootstrap.min.css ” de pe acesta .
• În proiectul dvs. Angular, navigați la directorul „ src ” și creați unul nou numit „ assets”. Asigurați-vă că ați creat un alt director în „active” numit „ css”.
• Lipiți„bootstrap.min.css ” în directorul „ css”.
• Din nou, în directorul „assets ”, creați un nou director numit „ js” și inserați „bootstrap.min.js” extras din folderul zip în acest nou director.
• Deschideți „angular.json ” în directorul rădăcină și navigați în matricea „ stiluri”urmând segmentularhitect > build > opțiuni.
• Adăugați fișiere CSS Bootstrap utilizând următoarea comandă -

„src/assets/css/bootstrap.min.css”

• Găsiți matricea „scripturi” în același și lipiți următoarea comandă-

„src/assets/js/bootstrap.min.js”

• Salvați modificările în fișierul „ angular.json ”.

Cele mai bune practici de urmat la instalarea Bootstrap

Deși există mai multe moduri de a instala Bootstrap în Angular, cunoașterea celor mai bune practici poate simplifica și mai mult procesul.

• Asigurați-vă că importați fișierele Bootstrap CSS corecte în fișierele și folderele potrivite din proiectul dvs. Angular.
• În timp ce Bootstrap oferă un catalog larg de clase și componente CSS, alegeți numai pe cele care sunt relevante pentru proiectul dvs.
• Evitați componentele inutile pentru a optimiza performanța.
• Rămâneți la curent cu cea mai recentă versiune Bootstrap.
• În timp ce componentele Javascript sunt disponibile, utilizați-le doar cu moderație. Încercați să utilizați bibliotecile specifice Angular.

Pe de altă parte, dacă poți gestiona timpul și spera să devii un dezvoltator mai bun, nimic nu poate deveni mai bun decât programul executiv post-universitar de la upGrad în dezvoltarea software-ului Full Stack, alimentat de IIIT-B.

Concluzie

Aici se încheie lista noastră cu unele dintre cele mai bune modalități de a instala Bootstrap în Angular pentru o dezvoltare îmbunătățită a paginii web. De la design responsive optimizat până la încorporarea de caracteristici proaspete, dinamice, știind cum să utilizați componentele Bootstrap potrivite cu practici consecvente vă va ajuta să câștigați avantajul în industrie!

În timp ce vă alăturați campului upGrad de dezvoltare software Full Stack, este o altă modalitate de a vă îmbunătăți cariera de dezvoltare cu abilități solicitate și îndrumări de specialitate.

Înscrie-te acum pentru a-ți extinde orizontul!