Jak zainstalować Bootstrap w Angular? 5 łatwych sposobów

Strona internetowa działa najlepiej, gdy jest interaktywna. Nie wydaje się jednak możliwe stworzenie nowej strony internetowej z dnia na dzień.

Wtedy możesz poczuć potrzebę dostępu do strony internetowej, która może być powszechna, ale którą można łatwo modyfikować za pomocą niestandardowych kodów. W tym momencie do gry wkracza Bootstrap.

Zacznijmy od zrozumienia, jak zainstalować Bootstrap w Angular , aby tworzyć responsywne i żywe aplikacje internetowe w Angular!

Zrozumienie Bootstrap: Wstępny przewodnik

Bootstrap to framework front-end, który oferuje kombinację narzędzi i komponentów z CSS, HTML i JavaScript do tworzenia dynamicznych stron internetowych. Bootstrap jest open source, a także darmowy. Podczas gdy Angular sam w sobie jest zdolną platformą do tworzenia potężnych, jednostronicowych stron internetowych, połączenie go z Bootstrapem dodatkowo zwiększa jego siłę tworzenia responsywnych i dynamicznych stron internetowych.

Bootstrap zyskał ogromną popularność, a około 25,8% wszystkich stron internetowych opartych na JavaScript używa Bootstrap, co dodatkowo sugeruje jego znaczenie na rynku.

Bootstrap: Rzut oka na jego historię

Początkowo stworzony jako wewnętrzne narzędzie popularnego serwisu społecznościowego Twitter, inżynierowie Jacob Thornton i Mark Otto postanowili opublikować Bootstrap do użytku publicznego w sierpniu 2011 roku w repozytorium open source GitHub.

Podążając za wygodą i popularnością wśród opinii publicznej, twórcy kontynuują prace nad generowaniem świeższych wersji Bootstrapa, wyposażając go w ulepszone komponenty interfejsu użytkownika i lepszą obsługę.

Twórcy Mark i Jacob porzucili najnowszą wersję Bootstrap – Bootstrap 5.3.0 w roku 2023.

Sprawdź naszebezpłatne kursy technologiczne,aby uzyskać przewagę nad konkurencją.

Czy powinieneś używać Bootstrapa?

Możesz dojść do odpowiedzi na to pytanie, rozumiejąc mnóstwo korzyści, jakie oferuje ten projekt. Na początek oferuje super responsywny CSS. Dzięki temu można go dostosować do komputerów stacjonarnych, kart i telefonów. Ma również obliczalność w większości głównych przeglądarek.

Dodaj do tego zaletę najmniejszych wymagań konfiguracyjnych, a zaprojektujesz układ w ciągu godziny, jeśli nie mniej. Bootstrap sprzyja użyciu, ponieważ nie wymaga od użytkownika biegłości w CASS, a nawet HTML, chyba że trzeba zainicjować zmiany oparte na interfejsie użytkownika.

Najbardziej przyjazne funkcje, które sprawiają, że Bootstrap jest popularnym wyborem do osadzania w Angular lub dodawaniainstalacji Angular Bootstrap, to:

Aspekt komponentu

Od pasków nawigacyjnych po formularze, Bootstrap zapewnia dziennik komponentów dla aplikacji, gdy zdecydujesz, jak dodać Bootstrap w Angular.Dzięki tym komponentom kreatywne zaprojektowanie witryny lub aplikacji staje się bardzo łatwe. Ta funkcjonalność z Bootstrap w Angular jest bardzo popularna wśród programistów.

Sprawdźkursy tworzenia oprogramowania upGrad , aby podnieść swoje umiejętności.

Aspekt dostosowywania

Wykonującinstalację Bootstrap w Angular, możesz zaprojektować niestandardowe punkty przerwania nawet dla kolumny i wstawić również podziały w rozmiarach zgodnych z potrzebami.Ponadto upraszcza dostosowywanie w oparciu o responsywną siatkę frameworka.

Oszczędność czasu

Ramy Bootstrap, gdy są osadzone w Angular, prowadzą do dużych oszczędności czasu na bicie osi czasu. Dzięki blokom, które są gotowe w Bootstrap, nie ma potrzeby zaczynania od samego początku, gdy instalujeszBootstrap 5 w angular .Po prostu wyrównanie wbudowanych elementów i uczynienie ich użytecznymi z twoimi danymi wejściowymi załatwia sprawę, a nawet dodaje wyjątkowości twojemu produktowi końcowemu.

Wymagania wstępne dotyczące instalacji Bootstrap w Angular

Oto lista kontrolna wymagań wstępnych dotyczących dodania Bootstrap do Angular. Upewnij się, że skonfigurowałeś wymienione narzędzia po zainstalowaniu tego samego do tworzenia aplikacji Angular.

• Git : Jest to konfiguracja rozproszonej jednostki kontroli wersji, która służy do synchronizacji repozytorium.
• IDE – Korzystanie ze zintegrowanego środowiska programistycznego z interfejsem graficznym jest niezbędne do tworzenia aplikacji, w tym Angular.
• Node.js i npm : ten pierwszy to oprogramowanie kodu JavaScript do środowiska uruchomieniowego.Podczas gdy ten ostatni, npm, jest menedżerem pakietów używanym dla Node.js. Wszystkie aplikacje Angular działają w oparciu o te dwa, a te pomagają również w instalacji bibliotek.
• Angular CLI: To narzędzie użytkowe jest oparte na wierszu poleceń do tworzenia podstawowej struktury Angulara.

Weź przykład z różnych kursów inżynierii oprogramowania dostępnych na wydziale eksperckim upGrad, takich jak Master of Science in Computer Science , i rozwijaj swoje umiejętności programistyczne wykładniczo.

Metoda 1: Instalowanie Bootstrapa przez CDN

Wykonaj odpowiednie kroki, aby zainstalować Bootstrap na Angular przez CDN.

• Znajdź folder „src” i otwórz plik projektu kątowego „ index.html ”.
• Umieść następujące linki w sekcji „ <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>

• Pliki JavaScript i CSS dla Bootstrap są zawarte w tych wierszach kodu z wyznaczonych adresów URL sieci CDN.
• Zapisz ostatnie zmiany w pliku „ index.html ”.

Twój projekt Angular będzie wykorzystywał style Bootstrap i możliwości JavaScript oferowane przez CDN po dołączeniu tych łączy CDN. Jesteś teraz gotowy do wykorzystania komponentów Bootstrap w swoich projektach Angular!

Metoda 2: Instalowanie Bootstrapa za pomocą menedżera pakietów npm

Instalację Bootstrapa za pomocą menedżera npm można wykonać, wykonując podane proste kroki.

• Otwórz wiersz polecenia lub terminal.
• Poruszaj się po katalogu głównym projektu Angular.
• Zainstaluj Bootstrap i powiązane z nim zależności, uruchamiając polecenie „ npm install bootstrap” .Odpowiednie polecenie pobierze Bootstrap i jego odpowiednie zależności do twojego katalogu oznaczonego jako„moduły_węzłów”.
• Po instalacji musisz włączyć style Bootstrap i Javascript, otwierając plik „angular.json” z katalogu głównego i dodając następujący wpis w tablicy „styles”.

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

• Ponadto dodaj następujące polecenie w tablicy „scripts” .

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

• Zapisz wszystkie zmiany dokonane w pliku „ angular.json” .

Możesz teraz używać klas JavaScript i CSS z Bootstrap w swoich komponentach i szablonach Angular.

Zapoznaj się z naszymi popularnymi kursami inżynierii oprogramowania

Metoda 3: Instalowanie Bootstrapa przez Angular CLI

Oto łatwy do naśladowania przewodnik, który pomoże Ci zainstalować Bootstrap przez Angular CLI.

• Otwórz wiersz polecenia.
• Uruchom polecenie „ng new my-app”, aby użyć Angular CLI i utworzyć nowy projekt Angular.Możesz zastąpić„moja-aplikację” wybraną przez siebie nazwą.
• Przejdź do katalogu projektu.

cd moja-aplikacja

• Powtórz proces instalacji Bootstrap przy użyciu npm, jak wspomniano powyżej.

Utworzyłeś nowy projekt Angular przy użyciu CLI, a także zainstalowałeś Bootstrap dla swojego projektu!

Metoda 4: Instalowanie Bootstrapa za pomocą menedżera pakietów Bower

• Upewnij się, że globalnie zainstalowałeś zarówno npm, jak i bower.
• Uruchom podane polecenie w wierszu polecenia – npm install -g bower
• Po zainstalowaniu altany przejdź do folderu projektu i wpisz

bower zainstaluj bootstrap

altana instaluje jquery

Powyższe kroki spowodują zainstalowanie odpowiednich plików instalacyjnych Bootstrap w świeżo utworzonym folderze „bower_components” .

• Ostatnim krokiem byłoby włączenie plików Bootstrap i jquery do pliku projektu.

Chociaż są to wszystkie kroki, aby zainstalować Bootstrap w Angular, pamiętaj, że altana nie jest już zalecana do instalacji Bootstrap.

Zapoznaj się z naszymi bezpłatnymi kursami tworzenia oprogramowania

Metoda 5: Instalowanie Bootstrapa za pomocą niestandardowej kompilacji

Oto proste kroki, aby zainstalować Bootstrap za pomocą niestandardowej kompilacji

• Pobierz wybraną wersję Bootstrap z oficjalnej strony internetowej wraz z plikami JavaScript i CSS.
• Wyodrębnij plik zip i skopiuj z niego plik „bootstrap.min.css ” .
• W swoim projekcie Angular przejdź do katalogu „ src ” i utwórz nowy o nazwie „ assets”. Upewnij się, że utworzysz inny katalog w „zasobach” o nazwie „ css”.
• Wklej plik„bootstrap.min.css ” w katalogu „ css”.
• Ponownie w katalogu „assets ” utwórz nowy katalog o nazwie „ js” i wklej w nim plik „bootstrap.min.js” wyodrębniony z folderu zip.
• Otwórz „angular.json ” w katalogu głównym i poruszaj się po tablicy „ style”, podążając zaarchitekturą > kompilacja >segment opcji.
• Dodaj pliki CSS Bootstrap za pomocą następującego polecenia –

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

• Znajdź tablicę „scripts” w tym samym i wklej następujące polecenie-

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

• Zapisz zmiany w pliku „ angular.json ”.

Najlepsze praktyki, których należy przestrzegać podczas instalowania Bootstrapa

Chociaż istnieje kilka sposobów instalacji Bootstrap w Angular, znajomość najlepszych praktyk może jeszcze bardziej uprościć ten proces.

• Upewnij się, że importujesz odpowiednie pliki CSS Bootstrap do odpowiednich plików i folderów w swoim projekcie Angular.
• Chociaż Bootstrap oferuje szeroki katalog klas i komponentów CSS, wybierz tylko te, które są odpowiednie dla Twojego projektu.
• Unikaj zbędnych komponentów, aby zoptymalizować wydajność.
• Bądź na bieżąco z najnowszą wersją Bootstrap.
• Chociaż komponenty Javascript są dostępne, używaj ich oszczędnie. Spróbuj wykorzystać biblioteki specyficzne dla Angular.

Z drugiej strony, jeśli potrafisz zarządzać czasem i masz nadzieję, że zostaniesz lepszym programistą, nic nie może być lepsze niż program studiów podyplomowych upGrad w zakresie tworzenia oprogramowania - Full Stack, obsługiwany przez IIIT-B.

Wniosek

Na tym kończy się nasza lista najlepszych sposobów instalacji Bootstrap w Angular w celu ulepszenia tworzenia stron internetowych. Od zoptymalizowanego responsywnego projektu po wprowadzanie świeżych, dynamicznych funkcji, wiedza o tym, jak wykorzystać odpowiednie komponenty Bootstrap przy spójnych praktykach, pomoże Ci zdobyć przewagę w branży!

Dołączenie do programu Full Stack Software Development Bootcamp firmy upGrad to kolejny sposób na rozwinięcie kariery programistycznej dzięki poszukiwanym umiejętnościom i poradom ekspertów.

Zarejestruj się teraz , aby poszerzyć swoje horyzonty!