Để biết các bước chi tiết và ví dụ làm việc dưới đây, bạn có thể truy cập
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Các bước rất chi tiết với giải thích thích hợp.
Các bước:
Cài đặt Bootstrap từ NPM
Tiếp theo, chúng ta cần cài đặt Bootstrap. Thay đổi thư mục thành dự án chúng tôi đã tạo (cd angle-bootstrap-example) và thực hiện lệnh sau:
Đối với Bootstrap 3:
npm install bootstrap --save
Đối với Bootstrap 4 (hiện đang trong giai đoạn thử nghiệm):
npm install bootstrap@next --save
HOẶC
Thay thế: CSS Bootstrap cục bộ
Để thay thế, bạn cũng có thể tải xuống CSS Bootstrap và thêm nó cục bộ vào dự án của mình. Tôi đã tải xuống Bootstrap từ trang web và tạo kiểu thư mục (cùng cấp với styles.css):
Lưu ý:
Không đặt tệp CSS cục bộ của bạn trong thư mục nội dung. Khi chúng tôi thực hiện phiên bản sản xuất với Angular CLI, các tệp CSS được khai báo trong .angular-cli.json sẽ được thu nhỏ và tất cả các kiểu sẽ được gộp vào một styles.css duy nhất. Thư mục tài sản được sao chép vào thư mục dist trong quá trình xây dựng (mã CSS sẽ được sao chép). Chỉ đặt các tệp CSS cục bộ của bạn dưới nội dung trong trường hợp bạn đang nhập trực tiếp chúng vào index.html.
Nhập CSS
1. Chúng tôi có hai tùy chọn để nhập CSS từ Bootstrap đã được cài đặt từ NPM:
văn bản mạnh 1: Định cấu hình .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Nhập trực tiếp trong src / style.css hoặc src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Cá nhân tôi thích nhập tất cả các kiểu của mình trong src / style.css vì nó đã được khai báo trong .angular-cli.json rồi.
3.1 Thay thế: Local Bootstrap CSS
Nếu bạn đã thêm tệp Bootstrap CSS cục bộ, chỉ cần nhập nó vào .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
hoặc
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Thành phần JavaScript Bootstrap với ngx-bootstrap (Tùy chọn 1)
Trong trường hợp bạn không cần sử dụng các thành phần Bootstrap JavaScript (yêu cầu JQuery), đây là tất cả những thiết lập bạn cần. Nhưng nếu bạn cần sử dụng modals, accordion, datepicker, tooltip hoặc bất kỳ thành phần nào khác, làm thế nào chúng ta có thể sử dụng các thành phần này mà không cần cài đặt jQuery?
Có một thư viện trình bao bọc Angular cho Bootstrap được gọi là ngx-bootstrap mà chúng tôi cũng có thể cài đặt từ NPM:
npm install ngx-bootstrap --save
Ghi chú ng2-bootstrap và ngx-bootstrap là cùng một gói. ng2-bootstrap đã được đổi tên thành ngx-bootstrap sau #itsJustAngular.
Trong trường hợp bạn muốn cài đặt Bootstrap và ngx-bootstrap cùng lúc khi tạo dự án Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Thêm các mô-đun Bootstrap cần thiết trong app.module.ts
Đi qua ngx-bootstrap và thêm các mô-đun cần thiết vào app.module.ts của bạn. Ví dụ: giả sử chúng ta muốn sử dụng các thành phần Dropdown, Tooltip và 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 {}
Vì chúng tôi gọi phương thức .forRoot () cho mỗi mô-đun (do các nhà cung cấp mô-đun ngx-bootstrap), các chức năng sẽ có sẵn trong tất cả các thành phần và mô-đun của dự án của bạn (phạm vi toàn cầu).
Thay vào đó, nếu bạn muốn tổ chức ngx-bootstrap trong một mô-đun khác (chỉ dành cho mục đích tổ chức trong trường hợp bạn cần nhập nhiều mô-đun bs và không muốn làm lộn xộn app.module của mình), bạn có thể tạo một mô-đun app-bootstrap.module.ts, nhập các mô-đun Bootstrap (sử dụng forRoot ()) và cũng khai báo chúng trong phần xuất (để chúng cũng có sẵn cho các mô-đun khác).
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 {}
Cuối cùng, đừng quên nhập mô-đun bootstrap của bạn trong app.module.ts của bạn.
nhập {AppBootstrapModule} từ './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap hoạt động với Bootstrap 3 và 4. Và tôi cũng đã thực hiện một số thử nghiệm và hầu hết các chức năng cũng hoạt động với Bootstrap 2.x (vâng, tôi vẫn còn một số mã kế thừa cần duy trì).
Hy vọng điều này sẽ giúp ai đó!
