Thursday, October 15, 2020

Cài đặt Bootstrap 4 trong Angular 9 | Cách thêm Bootstrap trong Angular 9

Tôi sẽ giải thích cho bạn ví dụ về cách cài đặt bootstrap trong angular 9. chúng tôi sẽ giúp bạn đưa ra ví dụ về cách thêm bootstrap 4 trong angular 9. bạn có thể xem cách sử dụng bootstrap trong angular 9. bạn có thể hiểu khái niệm về Góc 9 cài đặt bootstrap 4. Bạn chỉ cần thực hiện một số bước để thực hiện xong angular 9 thêm bootstrap 4.

Cài đặt Bootstrap 4 trong Angular 9

Như chúng ta biết Bootstrap là khuôn khổ phổ biến nhất trên thế giới để xây dựng các trang web đáp ứng và ưu tiên thiết bị di động. bootstrap cung cấp một số lớp để tạo trang web đáp ứng cho điện thoại di động của bạn. Vì vậy, nếu bạn muốn sử dụng bootstrap với Angular 9 hơn tôi sẽ giúp bạn cách rất đơn giản.

Tôi có hai bootstrap cài đặt và sử dụng nó với Project  Angular 9 của bạn. tôi sẽ cung cấp cho bạn cả hai cách ví dụ dưới đây.

Bạn có thể dễ dàng tạo ứng dụng Angular của mình bằng lệnh dưới đây:

ng new my-new-app

Trong giải pháp này, bạn chỉ cần cài đặt bootstrap trên Angular 9 của mình và nhập tệp css vào tệp style.css. điều này chỉ dành cho việc nhập css. vì vậy bạn có thể chạy lệnh dưới đây:

npm install bootstrap --save

Được rồi, bây giờ bạn cần nhập css bootstrap của mình vào tệp style.css như sau:

@import "~bootstrap/dist/css/bootstrap.css";

Tiếp theo cài thư viện javascript và jQuery

npm install jquery --save

npm install popper.js --save

Bây giờ sau khi chạy thành công lệnh trên. hãy nhập nó vào tệp angular.json.

"styles": [

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

        "src/styles.css"

      ],

      "scripts": [

          "node_modules/jquery/dist/jquery.min.js",

          "node_modules/bootstrap/dist/js/bootstrap.min.js"

      ] 

No comments:

Post a Comment