Подробные инструкции и рабочий пример ниже вы можете найти на
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Очень подробные шаги с правильным объяснением.
Шаги:
установка Bootstrap из NPM
Далее нам нужно установить Bootstrap. Измените каталог на созданный нами проект (cd angular-bootstrap-example) и выполните следующую команду:
Для Bootstrap 3:
npm install bootstrap --save
Для Bootstrap 4 (в настоящее время бета-версия):
npm install bootstrap@next --save
ИЛИ
Альтернатива: Local Bootstrap CSS
В качестве альтернативы вы также можете загрузить Bootstrap CSS и добавить его локально в свой проект. Я загрузил Bootstrap с веб-сайта и создал папку styles (на том же уровне, что и styles.css):
Примечание.
Не помещайте локальные файлы CSS в папку с ресурсами. Когда мы делаем производственную сборку с Angular CLI, файлы CSS, объявленные в .angular-cli.json, будут уменьшены, и все стили будут объединены в один файл styles.css. Папка с ресурсами копируется в папку dist в процессе сборки (код CSS будет продублирован). Размещайте локальные файлы CSS под активами только в том случае, если вы импортируете их непосредственно в index.html.
Импорт CSS
1. У нас есть два варианта импорта CSS из Bootstrap, установленного из NPM:
сильный текст 1: настройте .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Импортируйте напрямую в src / style.css или src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Лично я предпочитаю импортировать все свои стили в src / style.css, поскольку он уже объявлен в .angular-cli.json.
3.1 Альтернатива: Local Bootstrap CSS
Если вы добавили файл Bootstrap CSS локально, просто импортируйте его в .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
или
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4. Компоненты Bootstrap JavaScript с ngx-bootstrap (вариант 1).
Если вам не нужно использовать компоненты JavaScript для Bootstrap (для которых требуется JQuery), это все, что вам нужно. Но если вам нужно использовать модальные окна, аккордеон, средство выбора даты, всплывающие подсказки или любой другой компонент, как мы можем использовать эти компоненты без установки jQuery?
Существует библиотека-оболочка Angular для Bootstrap под названием ngx-bootstrap, которую мы также можем установить из NPM:
npm install ngx-bootstrap --save
Обратите внимание, что ng2-bootstrap и ngx-bootstrap - это один и тот же пакет. ng2-bootstrap был переименован в ngx-bootstrap после #itsJustAngular.
Если вы хотите установить Bootstrap и ngx-bootstrap одновременно при создании проекта Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Добавление необходимых модулей Bootstrap в app.module.ts
Пройдите через ngx-bootstrap и добавьте необходимые модули в свой app.module.ts. Например, предположим, что мы хотим использовать компоненты Dropdown, Tooltip и Modal:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Поскольку мы вызываем метод .forRoot () для каждого модуля (из-за поставщиков модуля ngx-bootstrap), функциональные возможности будут доступны во всех компонентах и модулях вашего проекта (глобальная область видимости).
В качестве альтернативы, если вы хотите организовать ngx-bootstrap в другом модуле (просто для организационных целей, если вам нужно импортировать много модулей bs и вы не хотите загромождать свой app.module), вы можете создать модуль app-bootstrap.module.ts, импортируйте модули Bootstrap (используя forRoot ()), а также объявите их в разделе экспорта (чтобы они стали доступными и для других модулей).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Наконец, не забудьте импортировать модуль начальной загрузки в app.module.ts.
импортировать {AppBootstrapModule} из './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap работает с Bootstrap 3 и 4. Я также провел несколько тестов, и большинство функций также работают с Bootstrap 2.x (да, у меня все еще есть устаревший код, который нужно поддерживать).
Надеюсь, это кому-то поможет!
