Chúng tôi muốn sử dụng bootstrap 4 (4.0.0-alpha.2) trong ứng dụng của chúng tôi được tạo bằng angular-cli 1.0.0-beta.5 (w / node v6.1.0).

Sau khi nhận được bootstrap và các phụ thuộc của nó với npm, cách tiếp cận đầu tiên của chúng tôi bao gồm thêm chúng vào angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

và nhập chúng vào index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Điều này hoạt động tốt với ng servenhưng ngay khi chúng tôi tạo ra một bản dựng với -prodcờ, tất cả các phụ thuộc này biến mất khỏi dist/vendor(bất ngờ!).

Làm thế nào chúng ta có ý định xử lý kịch bản như vậy (tức là tải các kịch bản bootstrap) trong một dự án được tạo bằng angular-cli?

Chúng tôi đã có những suy nghĩ sau đây nhưng chúng tôi thực sự không biết đường nào để đi ...

• sử dụng CDN? nhưng chúng tôi muốn phục vụ các tệp này để đảm bảo rằng chúng sẽ có sẵn

• sao chép phụ thuộc vào dist/vendorsau của chúng tôi ng build -prod? Nhưng có vẻ như một cái gì đó góc cạnh nên cung cấp vì nó 'chăm sóc' phần xây dựng?

• thêm jquery, bootstrap và tether vào src/system-config.tsvà bằng cách nào đó kéo chúng vào gói của chúng tôi trong main.ts? Nhưng điều đó có vẻ sai khi xem xét rằng chúng tôi sẽ không sử dụng chúng một cách rõ ràng trong mã ứng dụng của chúng tôi (ví dụ như không phải là flash.js hoặc một cái gì đó như lodash chẳng hạn).

CẬP NHẬT QUAN TRỌNG: ng2-bootstrap hiện được thay thế bằng ngx-bootstrap

ngx-bootstrap hỗ trợ cả Angular 3 và 4.

Cập nhật: 1.0.0-beta.11-webpack hoặc các phiên bản cao hơn

Trước hết hãy kiểm tra phiên bản angular-cli của bạn bằng lệnh sau trong terminal:

ng -v

Nếu phiên bản angular-cli của bạn lớn hơn 1.0.0-beta.11-webpack , thì bạn nên làm theo các bước sau:

1. Cài đặt ngx-bootstrap và bootstrap :

   npm install ngx-bootstrap bootstrap --save

Dòng này cài đặt Bootstrap 3 ngày nay, nhưng có thể cài đặt Bootstrap 4 trong tương lai. Hãy nhớ rằng ngx-bootstrap hỗ trợ cả hai phiên bản.

2. Mở src / app / app.module.ts và thêm:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. Mở angular-cli.json (đối với angular6 và tên tệp sau này đã đổi thành angular.json ) và chèn một mục mới vào stylesmảng:

   "styles": [
   "styles.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],

4. Mở src / app / app.component.html và thêm:

   <alert type="success">hello</alert>

Phiên bản 1.0.0-beta.10 trở xuống:

Và, nếu phiên bản angular-cli của bạn là 1.0.0-beta.10 trở xuống, thì bạn có thể sử dụng các bước dưới đây.

Đầu tiên, vào thư mục dự án và gõ:

npm install ngx-bootstrap --save

Sau đó, mở angular-cli-build.js của bạn và thêm dòng này:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Bây giờ, mở của bạn src / system-config.ts rồi viết:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

... và:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Tìm kiếm từ khóa> Cài đặt thư viện toàn cầu trên https://github.com/angular/angular-cli giúp bạn tìm câu trả lời.

Theo tài liệu của họ, bạn có thể thực hiện các bước sau để thêm thư viện Bootstrap.

Lần đầu tiên cài đặt Bootstrap từ npm:

npm install bootstrap@next

Sau đó thêm các tệp tập lệnh cần thiết vào ứng dụng [0] .scripts trong tệp angular-cli.json:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

Cuối cùng, thêm CSS Bootstrap vào mảng ứng dụng [0] .ststyle:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],

Khởi động lại phục vụ nếu bạn đang chạy nó và Bootstrap 4 sẽ hoạt động trên ứng dụng của bạn.

Đây là giải pháp tốt nhất. Nhưng nếu bạn không khởi động lại thì nó không bao giờ hoạt động. Nó được khuyến khích để làm hành động cuối cùng này.

Làm như sau:

npm i bootstrap@next --save

Điều này sẽ thêm bootstrap 4 vào dự án của bạn.

Tiếp theo, đi đến tệp src/style.scsshoặc src/style.csstệp của bạn (chọn bất kỳ bạn đang sử dụng) và nhập bootstrap ở đó:

Dành cho style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Dành cho style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Đối với tập lệnh, bạn vẫn sẽ phải thêm tệp trong tệp angular-cli.json như vậy ( Trong phiên bản Angular 6, chỉnh sửa này cần phải được thực hiện trong tệp angular.json ) :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Đầu tiên, bạn phải cài đặt tether, jquery và bootstrap với các lệnh này

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Sau khi thêm các dòng này vào tệp angular-cli.json (angular.json từ phiên bản 6 trở đi)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Vì không ai đề cập đến câu chuyện chính thức (nhóm angular-cli) về cách bao gồm Bootstrap chưa: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Bao gồm Bootstrap

Bootstrap là một khung CSS phổ biến có thể được sử dụng trong một dự án Angular. Hướng dẫn này sẽ hướng dẫn bạn cách thêm bootstrap vào dự án Angular CLI của bạn và định cấu hình nó để sử dụng bootstrap.

Sử dụng CSS

Bắt đầu

Tạo một dự án mới và điều hướng vào dự án

ng new my-app
cd my-app

Cài đặt Bootstrap

Với dự án mới được tạo và sẵn sàng, tiếp theo bạn sẽ cần cài đặt bootstrap cho dự án của mình như một phần phụ thuộc. Sử dụng --savetùy chọn, phần phụ thuộc sẽ được lưu trong pack.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Cấu hình dự án

Bây giờ dự án đã được thiết lập, nó phải được cấu hình để bao gồm CSS bootstrap.

• Mở tệp .angular-cli.jsontừ gốc của dự án của bạn.
• Trong thuộc tính apps, mục đầu tiên trong mảng đó là ứng dụng mặc định.
• Có một tài sản styles cho phép các kiểu toàn cầu bên ngoài được áp dụng cho ứng dụng của bạn.
• Chỉ định đường dẫn đến bootstrap.min.css

Nó sẽ trông giống như sau khi bạn hoàn thành:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Lưu ý: Khi bạn thực hiện thay đổi, .angular-cli.jsonbạn sẽ cần phải bắt đầu lạing serve lại để nhận thay đổi cấu hình.

Dự án thử nghiệm

Mở app.component.htmlvà thêm đánh dấu sau:

<button class="btn btn-primary">Test Button</button>

Với ứng dụng được cấu hình, hãy chạy ng serveđể chạy ứng dụng của bạn ở chế độ phát triển. Trong trình duyệt của bạn điều hướng đến ứng dụnglocalhost:4200 . Xác nhận nút kiểu bootstrap xuất hiện.

Sử dụng SASS

Bắt đầu

Tạo một dự án mới và điều hướng vào dự án

ng new my-app --style=scss
cd my-app

Cài đặt Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Cấu hình dự án

Tạo một tập tin trống _variables.scsstrong src/.

Nếu bạn đang sử dụng bootstrap-sass, hãy thêm vào như sau _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

Trong styles.scssthêm những điều sau đây:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Dự án thử nghiệm

Mở app.component.htmlvà thêm đánh dấu sau:

<button class="btn btn-primary">Test Button</button>

Với ứng dụng được cấu hình, hãy chạy ng serveđể chạy ứng dụng của bạn ở chế độ phát triển. Trong trình duyệt của bạn điều hướng đến ứng dụng localhost:4200. Xác nhận nút kiểu bootstrap xuất hiện. Để đảm bảo các biến của bạn được sử dụng mở _variables.scssvà thêm vào như sau:

$brand-primary: red;

Quay trở lại trình duyệt để xem màu chữ thay đổi.

Cập nhật v1.0.0-beta.26

Bạn có thể xem trên tài liệu về cách mới để nhập bootstrap tại đây

Nếu nó vẫn không hoạt động, khởi động lại với lệnh ng phục vụ

Phiên bản 1.0.0 hoặc thấp hơn:

Trong tệp index.html của bạn, bạn chỉ cần liên kết css bootstrap (không cần tập lệnh js)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Và

npm install ng2-bootstrap --save
npm install moment --save

Sau khi đã cài đặt ng2-bootstrap trong my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

Và trong my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Đừng quên lệnh này để đặt mô-đun của bạn vào nhà cung cấp:

ng build

để nhập từ một mô-đun khác đó là cùng một nguyên tắc.

Tôi đoán các phương pháp trên đã thay đổi sau khi phát hành, hãy kiểm tra liên kết này

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

khởi xướng dự án

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

cài đặt ng-bootstrap và bootstrap

npm install ng2-bootstrap bootstrap --save

mở src / app / app.module.ts và thêm

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

mở angular-cli.json và chèn một mục mới vào mảng kiểu

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

mở src / app / app.component.html và kiểm tra tất cả các công việc bằng cách thêm

<alert type="success">hello</alert>

Các bước cho Bootstrap 4 trong Angular 5

1. Tạo dự án Angular 5

   ng AngularBootstrapTest mới

2. Di chuyển đến thư mục dự án

   cd AngularBootstrapTest

3. Tải xuống bootstrap

   npm cài đặt bootstrap

4. Thêm Bootstrap vào dự án

   4.1 mở .angular-cli.json

   4.2 tìm phần "kiểu" trong json

   4.3 thêm đường dẫn css bootstrap như dưới đây

   .

   "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
   ],

Bây giờ bạn đã thêm thành công css bootstrap trong dự án angular 5

Kiểm tra bootstrap

5. mở src/app/app.component.html
6. thêm thành phần nút bootstrap

.

<button type="button" class="btn btn-primary">Primary</button>

bạn có thể tham khảo các kiểu nút tại đây ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. lưu các tập tin

8. chạy dự án

   ng phục vụ -

Bây giờ bạn sẽ thấy nút kiểu bootstrap trong trang

Lưu ý: nếu bạn đã thêm đường dẫn bootstrap sau khi ng phục vụ , bạn phải dừng và chạy lại phục vụ ng để phản ánh các thay đổi

Vì điều này trở nên rất khó hiểu và các câu trả lời ở đây hoàn toàn lẫn lộn, tôi sẽ chỉ đề nghị đi với đội ui chính thức cho repo BS4 (vâng, có rất nhiều repos cho NG-Bootstrap.

Chỉ cần làm theo các hướng dẫn ở đây https://github.com/ng-bootstrap/ng-bootstrap để nhận BS4.

Trích dẫn từ lib:

Thư viện này đang được xây dựng từ đầu bởi nhóm ui-bootstrap. Chúng tôi đang sử dụng TypeScript và nhắm mục tiêu khung CSS Bootstrap 4.

Cũng như Bootstrap 4, thư viện này đang trong quá trình hoàn thiện. Vui lòng kiểm tra danh sách các vấn đề của chúng tôi để xem tất cả những điều chúng tôi đang thực hiện. Hãy bình luận ở đó.

Chỉ cần sao chép dán những gì có vì lợi ích của nó:

npm install --save @ng-bootstrap/ng-bootstrap

Sau khi cài đặt, bạn cần nhập mô-đun chính của chúng tôi:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Phần duy nhất còn lại là liệt kê mô-đun đã nhập trong mô-đun ứng dụng của bạn. Phương thức chính xác sẽ hơi khác nhau đối với mô-đun gốc (cấp cao nhất) mà bạn sẽ kết thúc với mã tương tự (chú ý NgbModule.forRoot ()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Các mô-đun khác trong ứng dụng của bạn có thể chỉ cần nhập NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Đây dường như là hành vi nhất quán nhất cho đến nay

1. Cài đặt bootstrap

   npm install bootstrap@next

2. Thêm mã vào .angular-cli.json:

   "styles": [
     "styles.css",
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ],
   "scripts": [
     "../node_modules/jquery/dist/jquery.js",
     "../node_modules/tether/dist/js/tether.js",
     "../node_modules/bootstrap/dist/js/bootstrap.js"
   ],

3. Lần cuối thêm bootstrap.css vào mã style.scss của bạn

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

4. Khởi động lại máy chủ cục bộ của bạn

Thực hiện các bước sau:

1. npm install --save bootstrap

2. Và trong .angular-cli.json của bạn, hãy thêm vào phần kiểu:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]

Sau đó, bạn phải khởi động lại phục vụ ng của bạn

Thưởng thức

1. Cài đặt Bootstrap bằng npm

   npm install bootstrap

2. Cài đặt Popper.js

npm install --save popper.js

3.Goto angular.json trong dự án Angular 6 / .angular-cli.json trong Angular 5 và thêm danh sách:

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Thử cái này

npm install bootstrap@next

https://github.com/angular/angular-cli#global-l Library-install

Bạn cũng có thể xem video này của Mike Brocchi có thông tin hữu ích về cách thêm bootstrap vào dự án Angular-Cli của bạn. https://www.youtube.com/watch?v=obbdFFbjLIU (khoảng phút 13:00)

1. Chạy trong bash npm install ng2-bootstrap bootstrap --save
2. Thêm / Thay đổi các mục sau trong angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Mở Terminal / dấu nhắc lệnh trong thư mục dự án tương ứng và gõ lệnh sau.

npm install --save bootstrap

Sau đó mở tệp .angular-cli.json, Tìm kiếm

"styles": [ "styles.css" ],

thay đổi nó thành

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

Tất cả đã được làm xong.

Giờ đây, với phiên bản ng-bootstrap 1.0.0-beta.5 mới hỗ trợ hầu hết các chỉ thị Angular gốc dựa trên đánh dấu và CSS của Bootstrap.

Sự phụ thuộc duy nhất cần thiết để làm việc với điều này là bootstrap. Không cần sử dụng các phụ thuộc jquery và popper.js .

ng-bootstrap là để thay thế hoàn toàn việc triển khai JavaScript cho các thành phần. Vì vậy, bạn không cần phải bao gồmbootstrap.min.js vào phần tập lệnh trong .angular-cli.json.

hãy làm theo các bước sau khi bạn đang tích hợp bootstrap với dự án được tạo với phiên bản mới nhất angular-cli.

• Inculde bootstrap.min.css trong phần .angular-cli.json, kiểu của bạn.

  "styles": [
     "styles.scss",
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

• Tải về ng-bootstrap phụ thuộc .

  npm install --save @ng-bootstrap/ng-bootstrap

• Thêm phần này vào lớp mô-đun chính của bạn.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

• Bao gồm những điều sau đây trong phần nhập khẩu mô-đun chính của bạn.

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• Thực hiện như sau trong (các) mô-đun phụ của bạn nếu bạn sẽ sử dụng các thành phần ng-bootstrap bên trong các lớp mô-đun đó.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• Bây giờ dự án của bạn đã sẵn sàng để sử dụng các thành phần ng-bootstrap có sẵn.

1. Cài đặt bootstrap, popper.js

npm install --save bootstrap npm install --save popper.js

3. Trong src / style.css , nhập kiểu bootstrap

@import '~bootstrap/dist/css/bootstrap.min.css';

Bước 1:
npm install bootstrap@latest --save-dev Điều này sẽ cài đặt phiên bản mới nhất của bootstrap, tuy nhiên, phiên bản được chỉ định có thể được cài đặt bằng cách thêm số phiên bản

Bước2: Mở style.css và thêm vào như sau @import "~bootstrap/dist/css/bootstrap.css"

Để thêm Bootstrap và Jquery cả

npm install bootstrap@3 jquery --save

Sau khi chạy lệnh này, vui lòng tiếp tục và kiểm tra thư mục node_modules của bạn, bạn sẽ có thể thấy bootstrap và jquery được thêm vào nó.

angular-clibây giờ có một trang wiki chuyên dụng nơi bạn có thể tìm thấy mọi thứ bạn cần. TLDR, cài đặt bootstrapqua npmvà thêm liên kết kiểu vào phần "kiểu" trong .angular-cli.jsontệp của bạn

Ví dụ hoạt động trong trường hợp sử dụng angular-cli và css:

1. cài đặt bootstrap

npm cài đặt bootstrap tether jquery --save

2. thêm vào .angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

cài đặt boostrap bằng npm

npm install boostrap@next --save

sau đó kiểm tra thư mục node_modules của bạn để biết tệp boostrap.css (trong dist) thông thường đường dẫn là

"../node_modules/bootstrap/dist/css/bootstrap.css",

thêm đường dẫn này | nhập boostrap trong style.css hoặc style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

đó là nó.

Chạy lệnh sau trong dự án

npm install --save @bootsrap@4

và nếu bạn nhận được một xác nhận như thế này

+ bootstrap@4.1.3
updated 1 package in 8.245s

Nó có nghĩa là boostrap 4 được cài đặt thành công. Tuy nhiên, để sử dụng nó, bạn cần cập nhật mảng "style" trong tệp angular.json.

Cập nhật nó theo cách sau để bootstrap có thể ghi đè lên các kiểu hiện có

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
           "src/styles.css"
          ],

Để đảm bảo mọi thứ được thiết lập chính xác, hãy chạy ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, sau đó bạn nên sử dụng boostrap.

Không thấy cái này ở đây:

@import 'bootstrap/scss/bootstrap.scss';

Tôi vừa thêm dòng này trong style.scss Trong trường hợp của tôi, tôi cũng muốn ghi đè các biến bootstrap.

Nếu bạn mới bắt đầu với angular và bootstrap thì câu trả lời đơn giản sẽ là các bước dưới đây: 1. Thêm gói nút của bootstrap là phụ thuộc dev

npm install --save bootstrap

2. nhập biểu mẫu bootstrap trong tệp angular.json.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. và bạn đã sẵn sàng sử dụng bootstrap để tạo kiểu, lưới, v.v.

   <div class="container">My first bootstrap div</div>

Phần tốt nhất của điều này mà tôi tìm thấy là chúng tôi đang chỉ đạo sử dụng bootstrap mà không có sự phụ thuộc mô-đun của bên thứ ba. Chúng tôi có thể nâng cấp bootstrap bất cứ lúc nào bằng cách cập nhật lệnh, npm install --save bootstrap@4.4v.v.

Bạn có nhiều cách để thêm Bootstrap 4 trong dự án Angular của mình :

• Bao gồm các tệp CSS và JavaScript Bootstrap trong phần tệp index.html của dự án Angular của bạn với một thẻ và,

• Nhập tệp CSS Bootstrap trong tệp global.css của dự án Angular của bạn với từ khóa @import.

• Thêm các tệp CSS và JavaScript Bootstrap trong các mảng kiểu và tập lệnh của tệp angular.json trong dự án của bạn

Chạy lệnh này

npm install bootstrap@3

Angular.json của bạn

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

bạn có thể cài đặt bootstrap trong angular bằng npm install bootstraplệnh.

và thiết lập đường dẫn bootstrap tiếp theo trong angular.jsontệp và style.csstệp.

bạn có thể đọc một blog đầy đủ về cách cài đặt và thiết lập bootstrap trong góc, bấm vào đây để đọc blog đầy đủ về điều này

Một ví dụ hoạt động trong trường hợp sử dụng angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Hoạt động cho css và scss. Bootstrap v3 và v4 có sẵn.

Thông tin thêm về sơ đồ bootstrap xin vui lòng tìm ở đây .