Hướng dẫn how do i add bootstrap 4 to angularjs 11? - làm cách nào để thêm bootstrap 4 vào anglejs 11?

Vì không có 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

Bao gồm bootstrap

Bootstrap là một khung CSS phổ biến có thể được sử dụng trong một dự án góc. Hướng dẫn này sẽ hướng dẫn bạn thêm Bootstrap vào Dự án CLI góc 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, bạn sẽ cần cài đặt Bootstrap vào dự án của mình như một sự phụ thuộc. Sử dụng tùy chọn

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

# 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

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

  2 từ gốc của dự án của bạn.
• Theo thuộc tính

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

  3 Mục đầu tiên trong mảng đó là ứng dụng mặc định.
• Có một thuộc tính

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

  4 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

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

  5

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 các thay đổi thành

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

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

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

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

Dự án thử nghiệm

Mở

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

Test Button

Với ứng dụng được định cấu hình, hãy chạy

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

Test Button

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

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

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

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

Theo thuộc tính

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

// 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ở

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

Test Button

Với ứng dụng được định cấu hình, hãy chạy

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

Test Button

$brand-primary: red;

Sử dụng Sass

Bootstrap là gì?

Bootstrap là một khung phía trước nguồn mở để xây dựng và thiết kế các trang web đáp ứng khác nhau. Nó bao gồm nhiều mẫu dựa trên CSS và JavaScript, lưới đáp ứng, các thành phần được xây dựng, biểu mẫu, nút, công cụ điều hướng, băng chuyền và các giao diện khác. & nbsp;

Angular là một ứng dụng web phổ biến, một khung nguồn mở dựa trên TypeScript. Angular là một ngôn ngữ độc lập với nền tảng được sử dụng trên các hệ thống khác nhau như máy tính để bàn, thiết bị di động, máy tính xách tay, v.v. & NBSP;

Hơn nữa, Angular có vô số tính năng như hiệu suất cao, tốc độ, khung được xây dựng và các thành phần. Bootstrap tương thích với các khung JavaScript, Angular và React. Ngoài ra, nó có một số công cụ phát triển hữu ích giúp các nhà phát triển tạo các trang web với các thiết kế và mẫu sáng tạo. Bạn có thể chọn các mẫu ưa thích và tùy chỉnh chúng theo cách thủ công bằng cách thêm các thành phần khác nhau. & nbsp;

Với Bootstrap, bạn phải thoải mái với HTML, CSS và JavaScript để chọn các mẫu và thiết kế tốt nhất. Thêm các chức năng bổ sung ngoài thiết kế hiện tại là một nhiệm vụ dễ dàng. Tất cả những gì bạn cần làm là viết mã, kiểm tra các thiết kế, viết thêm mã và bạn tốt để đi. Nghe có vẻ khá thú vị, phải không? Nó là. Đi qua khóa học tốt nhất để học Angular và tìm các khóa học có liên quan theo sở thích của bạn. & nbsp;

5 cách để bao gồm Bootstrap 4 trong Dự án Angular & NBSP của bạn;

Ở đây, chúng tôi sẽ học cách cài đặt Bootstrap trong Angular. Bootstrap giúp bạn tạo kiểu cho ứng dụng của mình theo một triệu chủ đề khác nhau. Bạn có thể thêm bootstrap vào dự án góc của mình theo một vài cách để làm cho dự án của bạn hấp dẫn và thú vị hơn đồng thời. Ghé thăm khóa đào tạo phát triển web và học phát triển từ đầu. & nbsp;

Ở đây, chúng tôi sẽ sử dụng Angular CLI 13 để tạo một dự án từ đầu. Quá trình liên quan đến các bước sau. Trước tiên chúng ta hãy liệt kê chúng xuống. & NBSP;

1. Cài đặt Angular CLI 13 trên hệ thống của bạn để tạo Dự án & NBSP;
2. Cài đặt Bootstrap 4 trong Dự án Angular của bạn & NBSP;
3. Thêm bootstrap vào các tệp dự án & nbsp;

Bước 1- Cài đặt góc CLI 13

Bước đầu tiên là cài đặt Angular CLI 13 trên giao diện của bạn nếu nó không được cài đặt. Bạn cần cài đặt phiên bản mới nhất của Angular CLI trong giao diện dòng lệnh mới và mới. & nbsp;

Chạy lệnh dưới đây để cài đặt nó- & nbsp;

# version 3.x
npm install bootstrap --save

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

Nếu bạn là người dùng MacOS hoặc Linux, bạn phải sử dụng sudo trước lệnh trên. Ngoài ra, bạn có thể sử dụng dấu nhắc lệnh với quyền truy cập vào quản trị viên để cài đặt Angular CLI 13 trên máy của bạn với phạm vi toàn cầu. & NBSP;

Khi quá trình cài đặt kết thúc, nó sẽ được lưu trữ trong việc xử lý tiện ích NG. Bây giờ, hãy để tạo ra một dự án Angular 13. & nbsp;

Tại đây, mã mà bạn phải sử dụng để bắt đầu một dự án & nbsp;

# version 3.x
npm install bootstrap --save

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

Bạn sẽ gặp một số câu hỏi mà bạn cần trả lời phù hợp. Bạn cần chọn định dạng bảng kiểu CSS thích hợp. Điều này là do chúng tôi sẽ sử dụng phần CSS Bootstrap để đưa vào dự án của chúng tôi. & NBSP;

Khi bạn đã sử dụng các lệnh trên, hãy nhấn Enter. Ngay sau đó, dự án của bạn sẽ được tạo ra. Nó cài đặt tất cả các tệp và gói cần thiết để tạo dự án của bạn. Bạn sẽ nhận được một tin nhắn. & Nbsp;

Bây giờ, bạn cần nhập thư mục gốc. Bạn có thể làm điều này bằng cách sử dụng lệnh sau. & nbsp;

# version 3.x
npm install bootstrap --save

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

Sử dụng lệnh NG phục vụ để phục vụ ứng dụng bằng lệnh bên dưới. & nbsp;

# version 3.x
npm install bootstrap --save

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

Ứng dụng của bạn sẽ bắt đầu chạy tại cổng 4200 với URL là http: // localhost: 4200 /.& nbsp;

Bước 2- Cài đặt Bootstrap 4 trong Dự án góc 13 & NBSP của bạn;

Bây giờ, chúng tôi sẽ thêm bootstrap vào dự án. Đối với điều này, bạn cần cài đặt Bootstrap trong dự án. Điều này có thể được thực hiện theo nhiều cách. Hãy để xem làm thế nào. & nbsp;

Có ba phương pháp như một câu trả lời cho cách cài đặt bootstrap trong góc. & nbsp;

Chúng như sau- & nbsp;

• Sử dụng NPM để cài đặt Bootstrap với lệnh cài đặt lệnh & NBSP;
• Cài đặt các tệp bootstrap để thêm chúng theo cách thủ công vào thư mục SRC/tài sản của dự án. & NBSP;
• Chúng tôi đang sử dụng CDN để có được bootstrap. & Nbsp;

Hãy để chúng tôi sử dụng phương pháp đầu tiên mà chúng tôi liệt kê ở trên. Mở giao diện dòng lệnh của bạn và sử dụng lệnh- $ npm cài đặt bootstrap. & Nbsp;

Bạn sẽ tìm thấy tất cả các tệp bootstrap được lưu trữ trong thư mục node_modules trong dự án của bạn. & Nbsp;

Bước 3- Thêm Bootstrap 5 vào góc cạnh CLI

Bên dưới điều này, chúng tôi có năm cách khác để thêm bootstrap vào dự án CLI góc. & nbsp;

Thêm bootstrap bằng cách sử dụng Angular.json & nbsp;

Vì vậy, hãy bắt đầu với phương pháp đầu tiên của chúng tôi để thêm bootstrap thông qua tệp Angular.json. Mở tệp và thực hiện các lệnh sau, & nbsp;

# version 3.x
npm install bootstrap --save

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

Sau khi thực hiện tất cả các mã trên, bạn sẽ tìm thấy tệp bootstrap được đính kèm với dự án góc của bạn. & NBSP;

Thêm bootstrap bằng tệp index.html

Ở đây, cách thứ hai để thực hiện cùng một nhiệm vụ. Bạn có thể sử dụng các tệp index.html bằng cách lấy tệp từ tệp node_modules/bootstrap. Bạn cần thêm một số thẻ cần thiết vào tệp index.html của mình. Các thẻ như sau- & nbsp;

• Thêm tệp bootstrap.css trong phần bằng cách sử dụng thẻ. & Nbsp;
• Bạn có thể thêm jQuery bằng thẻ ngay trước khi thẻ đóng. & Nbsp;
• Bạn có thể thêm tệp bootstrap.js trong thẻ ngay trước thẻ. & Nbsp;

Thêm bootstrap bằng tệp style.css

Style.css là một cách khác để thêm các tệp CSS trong bootstrap của dự án góc của bạn. Đối với điều này, vui lòng điều hướng đến tệp style.css trong thư mục SRC và nhập tệp bootstrap.css bên trong nó. & nbsp;

Sử dụng lệnh bên dưới để nhập tệp CSS Bootstrap trong đó. & NBSP;

# version 3.x
npm install bootstrap --save

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

Tệp này thay thế tất cả các kiểu khác mà bạn không cần thêm bất kỳ tệp nào khác. & nbsp;

Thêm bootstrap bằng ngx bootstrap hoặc ng bootstrap

Làm việc với một số tính năng JavaScript Bootstrap có thể khó khăn. Điều này là do nó yêu cầu jquery và các thư viện khác như popper.js. Nhập tất cả các tệp này có thể rất bận rộn, phải không? Chúng tôi có một giải pháp dễ dàng cho vấn đề này. & nbsp;

Bạn có thể sử dụng ngx bootstrap hoặc ng bootstrap trực tiếp với góc. Nó bao gồm tất cả các thư viện thiết yếu và phụ thuộc. Vì vậy, ở đây, những gì bạn cần làm- & nbsp;

Cài đặt Thư viện Ng Bootstrap thông qua lệnh NPM & NBSP;

# version 3.x
npm install bootstrap --save

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

Sau khi cài đặt, nhập thư viện trong mô -đun chính của dự án. & nbsp;

# version 3.x
npm install bootstrap --save

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

Sau đó thêm mô -đun đã nhập vào thư mục mô -đun gốc của bạn & NBSP;

Bạn có thể sử dụng một loạt các kiểu khác nhau để làm cho nó trông hấp dẫn. & NBSP;

Đối với ngx bootstrap, các bước như sau- & nbsp;

Mở thiết bị đầu cuối của bạn và sử dụng lệnh bên dưới để cài đặt ngx Bootstrap trên máy của bạn. & NBSP;

# version 3.x
npm install bootstrap --save

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

Bây giờ, bạn cần tệp CSS Bootstrap. Bạn có thể lấy nó bằng CDN & NBSP;

Ngoài ra, cài đặt bootstrap trong tệp Angular-cli.json & nbsp;

# version 3.x
npm install bootstrap --save

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

Sau đó thực hiện các thay đổi có liên quan trong tệp app.module.ts. Sau khi hoàn thành tất cả những điều này, bạn tốt để đi. & Nbsp;

Thêm bootstrap bằng cách sử dụng sơ đồ

Với việc bổ sung lệnh NG thêm trong Angular, các nhà phát triển giờ đây có thể dễ dàng thêm bootstrap vào dự án góc của họ mà không tuân theo cách cài đặt NPM cũ. & NBSP;

Các nhà phát triển không còn cần phải phụ thuộc vào lệnh cài đặt NPM để có được tất cả các phụ thuộc cần thiết trong dự án của họ. & NBSP;

Ở đây, sự thay thế cho lệnh đó. Sử dụng câu lệnh Lệnh dưới đây để có được Bootstrap được đính kèm với dự án của bạn- & NBSP của bạn;

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

Sự kết luận

Ở đây, chúng tôi đã thảo luận rất nhiều về cách cài đặt Bootstrap Angular. Angular là nền tảng được sử dụng nhiều nhất để tạo giao diện người dùng tương tác. Bootstrap là một khung phía trước được sử dụng rộng rãi với hàng triệu kiểu và mẫu thiết kế. & nbsp;

Chúng tôi đã giải thích các cách quan trọng để thêm bootstrap vào dự án góc của bạn. Bạn có thể theo dõi bất kỳ một trong số họ để hoàn thành nhiệm vụ của bạn. Nó là đơn giản để sử dụng trong dự án của bạn. Bạn có thể thêm bootstrap vào góc để bắt đầu xây dựng các dự án góc khác nhau. Vì vậy, đó là nó cho bài viết này. & NBSP;

Ngoài ra, hãy xem khóa học tốt nhất kiến ​​thức để học khóa học góc cạnh để có được bàn tay của bạn về góc cạnh và các thuộc tính của nó. & nbsp;

Câu hỏi thường gặp (Câu hỏi thường gặp) & NBSP; 

1. Làm thế nào để chúng ta cài đặt bootstrap trong góc?

Ans. Có nhiều phương pháp khác nhau để cài đặt bootstrap trong góc. Để thêm bootstrap vào dự án của bạn, bạn phải tải xuống bootstrap trên thiết bị của bạn. Và sau đó sử dụng nó trực tiếp trong dự án của bạn. Ngoài ra, phần trên giải thích rõ ràng cách cài đặt bootstrap trong góc. & nbsp;

2. Chúng ta có thể sử dụng bootstrap trong góc không? & Nbsp;

Ans. Có, bạn có thể sử dụng bootstrap trong dự án góc của bạn. Nó là một thành phần trong góc góc bắt đầu dự án góc bằng tay. Nó cung cấp cho bạn quyền kiểm soát đối với việc khởi tạo ứng dụng của bạn. & NBSP;

3. Làm thế nào để tôi biết nếu bootstrap được cài đặt?

Ans. Để biết liệu Bootstrap có được cài đặt trên thiết bị của bạn hay không, chỉ cần kiểm tra phiên bản có sẵn trong tệp. Nếu không có phiên bản, thì Bootstrap chưa được cài đặt. Sẽ là tốt nhất nếu bạn thử cài đặt lại. & NBSP;

4. Tôi nên sử dụng bootstrap ngx hoặc bootstrap? & Nbsp; 

Ans. NGX Bootstrap có một sự khác biệt đáng kể so với Bootstrap. Cái trước sử dụng một chuỗi để làm cho mọi thứ dễ dàng hơn. Cái sau sử dụng một đối tượng để thực hiện nhiệm vụ, có thể hơi phức tạp trong một số kịch bản.

Làm cách nào để thêm bootstrap vào góc 11?

Làm thế nào tôi có thể thêm bootstrap trong góc?

Bạn có thể sử dụng Angular và Bootstrap cùng nhau không?

Làm cách nào để thêm bootstrap vào Angular 10?