Нижче наведено детальні кроки та робочий приклад, який ви можете відвідати
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Дуже детально описані кроки з належним поясненням.
Етапи:
Встановлення завантажувальної програми з 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.css):
Примітка.
Не розміщуйте локальні файли CSS у папці активів. Коли ми будуємо виробництво за допомогою Angular CLI, файли 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 Альтернатива: локальний завантажувальний CSS
Якщо ви додали файл CSS Bootstrap локально, просто імпортуйте його у .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)
Якщо вам не потрібно використовувати компоненти Bootstrap JavaScript (для яких потрібен JQuery), це все, що вам потрібно. Але якщо вам потрібно використовувати модалі, акордеон, датчик, підказки чи будь-який інший компонент, то як ми можемо використовувати ці компоненти без встановлення jQuery?
Існує бібліотека кутових обгортків для 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: Додавання необхідних модулів завантаження в app.module.ts
Перейдіть через ngx-bootstrap і додайте необхідні модулі у вашому app.module.ts. Наприклад, припустимо, що ми хочемо використовувати компоненти спадного, підказкового та модального:
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 (так, у мене є ще якийсь застарілий код для підтримки).
Сподіваюся, це допоможе комусь!
