Как установить Bootstrap в Angular? 5 простых способов

Веб-страница работает лучше всего, когда она интерактивна. Однако создать новую веб-страницу за одну ночь не представляется возможным.

Это когда вы можете почувствовать необходимость иметь доступ к веб-странице, которая может быть обычной, но может быть легко изменена с помощью настраиваемых кодов. Вот здесь и приходит на помощь Bootstrap.

Давайте начнем с понимания того, как установить Bootstrap в Angular , чтобы создавать отзывчивые и яркие веб-приложения на Angular!

Понимание Bootstrap: начальное руководство

Bootstrap — это интерфейсная среда, которая предлагает комбинацию инструментов и компонентов из CSS, HTML и JavaScript для создания динамических веб-страниц. Bootstrap является открытым исходным кодом, а также бесплатным. В то время как Angular сам по себе является подходящей структурой для создания мощных одностраничных веб-сайтов, его сочетание с Bootstrap еще больше усиливает его потенциал для создания адаптивных и динамических веб-страниц.

Bootstrap приобрел огромную популярность, и около 25,8% всех веб-сайтов, основанных на JavaScript, используют Bootstrap, что еще больше подчеркивает его значимость на рынке.

Bootstrap: взгляд на его историю

Первоначально созданный как внутренний инструмент для популярной социальной сети Twitter, инженеры Джейкоб Торнтон и Марк Отто решили опубликовать Bootstrap для общего пользования в августе 2011 года в репозитории GitHub с открытым исходным кодом.

Следуя его удобству и популярности среди публики, создатели продолжают работать над созданием более свежих версий Bootstrap, оснащая его улучшенными компонентами пользовательского интерфейса и лучшей поддержкой.

Создатели Марк и Джейкоб выпустили последнюю версию Bootstrap — Bootstrap 5.3.0 в 2023 году.

Ознакомьтесь с нашимибесплатными технологическими курсами, чтобы получить преимущество над конкурентами.

Стоит ли использовать Bootstrap?

Вы можете получить ответ на этот вопрос, поняв множество преимуществ, которые предлагает этот проект. Начнем с того, что он предлагает супер отзывчивый CSS. Это делает его адаптируемым на настольных компьютерах, вкладках и телефонах. Он также имеет вычисляемость в большинстве основных браузеров.

Добавьте к этому преимущество минимальных требований к настройке, и вы получите макет в течение часа, если не меньше. Bootstrap удобен для использования, потому что он не требует от пользователя знания CASS или даже HTML, если вам не нужно инициировать изменения на основе пользовательского интерфейса.

Самые удобные функции, которые делают Bootstrap популярным выбором для встраивания в Angular или для добавленияустановки Angular Bootstrap :

Компонентный аспект

От панелей навигации до форм, Bootstrap предоставляет журнал компонентов для приложений, когда вы решаете, как добавить Bootstrap в Angular.С помощью этих компонентов творческое проектирование сайта или приложения становится очень простым. Эта функциональность Bootstrap в Angular очень популярна среди разработчиков.

Посетитекурсы по разработке программного обеспечения upGrad , чтобы повысить свою квалификацию.

Аспект настройки

Когда вы выполняетеустановку Bootstrap в Angular, вы можете создавать собственные точки останова даже для столбца и вставлять разрывы в размерах в соответствии с вашими потребностями.Это еще больше упрощает настройку на основе адаптивной сетки фреймворка.

Экономия времени

Фреймворк Bootstrap, встроенный в Angular, приводит к значительной экономии времени на временной шкале. Благодаря готовым блокам в Bootstrap нет необходимости начинать с самого начала при установкеBootstrap 5 в angular .Простое выравнивание встроенных элементов и использование их с вашими входными данными делает свое дело и даже добавляет уникальности вашему конечному продукту.

Предварительные условия для установки Bootstrap в Angular

Вот контрольный список предварительных условий для добавления Bootstrap в Angular. Убедитесь, что вы настроили перечисленные инструменты после их установки для создания приложения Angular.

• Git : это распределенная установка модуля управления версиями, используемая для синхронизации репозитория.
• IDE — использование интегрированной среды разработки с графическим интерфейсом жизненно важно для разработки приложений, включая Angular.
• Node.js и npm : первый представляет собой программное обеспечение кода JavaScript для среды выполнения.В то время как последний, npm, поставляется как менеджер пакетов, используемый для Node.js. Все приложения Angular работают на основе этих двух, а также помогают в установке библиотеки.
• Angular CLI: этот служебный инструмент основан на командной строке для создания базовой структуры Angular.

Воспользуйтесь различными курсами по разработке программного обеспечения, доступными на опытных факультетах upGrad, такими как магистра наук в области компьютерных наук , и экспоненциально улучшите свои навыки разработки.

Способ 1: установка Bootstrap через CDN

Выполните соответствующие шаги, чтобы установить Bootstrap на Angular через CDN.

• Найдите папку «src» и откройте файл проекта « index.html » Angular.
• Вставьте следующие ссылки в раздел ' <head> '.

<ссылка rel="таблица стилей" 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>

• Файлы JavaScript и CSS для Bootstrap включены в эти строки кода с указанных URL-адресов CDN.
• Сохраните окончательные изменения в файле index.html .

Ваш проект Angular будет использовать стили Bootstrap и возможности JavaScript, предлагаемые CDN, как только вы включите эти ссылки CDN. Теперь вы готовы использовать компоненты Bootstrap в своих проектах Angular!

Способ 2: установка Bootstrap через менеджер пакетов npm

Установку Bootstrap с помощью менеджера npm можно выполнить, выполнив указанные простые шаги.

• Откройте командную строку или терминал.
• Перейдите в корневой каталог вашего проекта Angular.
• Установите Bootstrap и связанные с ним зависимости, выполнив команду « npm install bootstrap» .Соответствующая команда загрузит Bootstrap и его соответствующие зависимости в ваш каталог, помеченный как«node_modules».
• После установки вам необходимо включить стили Bootstrap и Javascript, открыв файл «angular.json» из корневого каталога и добавив следующую запись в массив «styles».

«node_modules/bootstrap/dist/css/bootstrap.min.css»

• Кроме того, добавьте следующую команду в массив «скрипты» .

«node_modules/bootstrap/dist/js/bootstrap.min.js»

• Сохраните все изменения, внесенные в файл angular.json .

Теперь вы готовы использовать классы JavaScript и CSS из Bootstrap в своих компонентах и ​​шаблонах Angular.

Изучите наши популярные курсы по программной инженерии

Способ 3: установка Bootstrap через Angular CLI

Вот простое руководство, которое поможет вам установить Bootstrap через Angular CLI.

• Откройте командную строку.
• Запустите команду «ng new my-app» , чтобы использовать Angular CLI и создать новый проект Angular.Вы можете заменить'my-app' именем по вашему выбору.
• Перейдите в каталог проекта.

cd мое приложение

• Повторите процесс установки Bootstrap с помощью npm, как указано выше.

Теперь вы создали новый проект Angular с помощью CLI, а также установили Bootstrap для своего проекта!

Способ 4: установка Bootstrap через менеджер пакетов Bower

• Убедитесь, что вы установили и npm, и bower глобально.
• Запустите данную команду в командной строке — npm install -g bower
• Как только Bower будет установлен, перейдите в папку проекта и введите

Bower установить бутстрап

беседка установить jquery

Вышеуказанные шаги установят соответствующие установочные файлы Bootstrap в только что созданную папку «bower_components» .

• Последним шагом будет включение файлов Bootstrap и jquery в файл вашего проекта.

Хотя это все шаги по установке Bootstrap в Angular, имейте в виду, что Bower больше не рекомендуется использовать для установки Bootstrap.

Изучите наши бесплатные курсы по разработке программного обеспечения

Способ 5: установка Bootstrap через пользовательскую сборку

Вот простые шаги по установке Bootstrap с помощью пользовательской сборки.

• Загрузите выбранную вами версию Bootstrap с официального сайта вместе с ее файлами Javascript и CSS.
• Распакуйте zip-файл и скопируйте из него 'bootstrap.min.css ' .
• В своем проекте Angular перейдите в каталог « src » и создайте новый с именем « assets». Убедитесь, что в «активах» создан другой каталог с именем « css».
• Вставьте«bootstrap.min.css » в каталог « css».
• Опять же, в каталоге «assets » создайте новый каталог с именем « js» и вставьте «bootstrap.min.js», извлеченный из папки zip, в этот новый каталог.
• Откройте «angular.json » в корневом каталоге и перейдите к массиву « styles», следуя сегменту«архитектура»> «сборка»> «опции».
• Добавьте CSS-файлы Bootstrap с помощью следующей команды:

«src/assets/css/bootstrap.min.css»

• Найдите в нем массив «скрипты» и вставьте следующую команду:

«src/assets/js/bootstrap.min.js»

• Сохраните изменения в файле angular.json .

Рекомендации по установке Bootstrap

Хотя есть несколько способов установить Bootstrap в Angular, знание лучших практик может еще больше упростить этот процесс.

• Убедитесь, что вы импортируете правильные CSS-файлы Bootstrap в нужные файлы и папки в вашем проекте Angular.
• Хотя Bootstrap предлагает широкий каталог классов и компонентов CSS, выбирайте только те, которые имеют отношение к вашему проекту.
• Избегайте ненужных компонентов для оптимизации производительности.
• Будьте в курсе последней версии Bootstrap.
• Хотя компоненты Javascript доступны, используйте их экономно. Попробуйте использовать библиотеки, специфичные для Angular.

С другой стороны, если вы можете управлять временем и надеетесь стать лучшим разработчиком, ничто не может быть лучше, чем программа повышения квалификации руководителей высшего звена upGrad в области разработки программного обеспечения - полный стек, основанная на IIIT-B.

Заключение

На этом завершается наш список лучших способов установки Bootstrap в Angular для расширенной разработки веб-страниц. От оптимизированного адаптивного дизайна до включения новых динамических функций — знание того, как использовать правильные компоненты Bootstrap с последовательными практиками, поможет вам одержать верх в отрасли!

Участие в учебном лагере по разработке программного обеспечения с полным стеком upGrad — это еще один способ улучшить свою карьеру в области разработки благодаря востребованным навыкам и экспертному руководству.

Зарегистрируйтесь сейчас , чтобы расширить свой кругозор!