Bootstrap có tương thích với góc không?

Bootstrap là khung HTML và CSS phổ biến nhất để xây dựng bố cục đáp ứng một cách dễ dàng và không cần có kiến ​​thức sâu về CSS (nhưng cần có CSS ​​tùy chỉnh để tùy chỉnh thiết kế của bạn và làm cho nó khác biệt với các trang web kiểu Bootstrap khác trừ khi bạn đang sử dụng BS

Bootstrap 5 là phiên bản mới nhất mang đến nhiều tính năng mới và mạnh mẽ cho framework

Angular 14 đã được phát hành gần đây với nhiều tính năng mới. Trong hướng dẫn này, chúng ta sẽ xem cách sử dụng Bootstrap để tạo kiểu cho các trang web được xây dựng bằng khung Angular 14. Chúng ta sẽ thấy cách chúng ta có thể dễ dàng tích hợp cả hai, sử dụng

$ npm install --save bootstrap

2 so với.

$ npm install --save bootstrap

3 gói và sử dụng Angular CLI để tạo một dự án hoàn toàn mới

Vì vậy, hãy bắt đầu bằng cách cài đặt Angular CLI trong trường hợp nó chưa được cài đặt trên hệ thống của bạn

Đi tới thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn, sau đó chạy lệnh sau để cài đặt phiên bản CLI mới nhất

$ npm install -g @angular/cli@latest

Điều này sẽ cài đặt CLI trên toàn cầu, do đó, tùy thuộc vào cấu hình npm của bạn, bạn có thể cần thêm sudo (để truy cập quản trị viên)

Sau khi cài đặt, bạn sẽ có tiện ích ng. Hãy sử dụng nó để tạo một dự án Angular 14 mới

Điều này sẽ tạo cấu trúc thư mục và các tệp cần thiết cho dự án và sẽ cài đặt các phụ thuộc

Tiếp theo điều hướng bên trong thư mục gốc của dự án mới được tạo

Sau đó, bạn có thể phục vụ ứng dụng Angular 14 của mình bằng lệnh

$ npm install --save bootstrap

4

Ứng dụng của bạn sẽ được phục vụ từ

$ npm install --save bootstrap

5

Có nhiều cách để thêm bootstrap vào Angular, chúng tôi sẽ triển khai một trong số chúng trong hướng dẫn này

Bây giờ hãy quay lại thiết bị đầu cuối của bạn, sau đó cài đặt Bootstrap 5 qua npm

$ npm install --save bootstrap

Điều này cũng sẽ thêm bootstrap vào

$ npm install --save bootstrap

6

Nội dung Bootstrap 4 được cài đặt bên trong thư mục

$ npm install --save bootstrap

7, vì vậy bạn sẽ cần bao gồm các tệp CSS ở đầu tệp HTML chính của ứng dụng hoặc cùng với @import trong

$ npm install --save bootstrap

8

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

Xin lưu ý rằng Bootstrap 5 không phụ thuộc vào jQuery mà chỉ yêu cầu javascript đơn giản

Bây giờ nếu bạn cần các tính năng hoàn chỉnh của Bootstrap 5 thì sao?

Bạn có nhiều cách khác nhau bao gồm_______09, cách này không được khuyến nghị, sử dụng mảng tập lệnh trong tệp

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

0

$ npm install --save bootstrap

2

Một cách khác tốt hơn để bao gồm bootstrap trong góc là sử dụng các thư viện thành phần được tạo để làm cho Bootstrap hoạt động liền mạch với Angular, chẳng hạn như

$ npm install --save bootstrap

2 hoặc

$ npm install --save bootstrap

3

Tôi có nên thêm bootstrap. js hoặc bootstrap. tối thiểu. js vào dự án của tôi? . Bạn cũng không nên bao gồm các phụ thuộc khác như jQuery hoặc popper. js. Nó không cần thiết và có thể can thiệp vào mã nguồn ng-bootstrap

Vì vậy, trước tiên, bạn sẽ cần cài đặt thư viện từ npm bằng lệnh sau

$ npm install --save bootstrap

5

Khi bạn hoàn tất cài đặt, bạn sẽ cần nhập mô-đun chính

$ npm install --save bootstrap

6

Tiếp theo, bạn sẽ cần thêm mô-đun bạn đã nhập vào mô-đun gốc ứng dụng của mình

$ npm install --save bootstrap

7

Xin lưu ý rằng

$ npm install --save bootstrap

2 yêu cầu phải có tệp CSS Bootstrap 5

Bạn có thể thêm nó vào mảng kiểu của tệp

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

0 như thế

$ npm install -g @angular/cli@latest

0

Bây giờ bạn có thể sử dụng Bootstrap 5 trong ứng dụng Angular 14 của mình

Bạn có thể tìm thấy tất cả các thành phần có sẵn thông qua liên kết này

Bạn cũng có thể sử dụng thư viện

$ npm install --save bootstrap

3

Chỉ cần quay lại thiết bị đầu cuối của bạn, đảm bảo rằng bạn đang ở trong dự án Angular 14 của mình, sau đó chạy lệnh sau để cài đặt

$ npm install --save bootstrap

3

$ npm install -g @angular/cli@latest

3

Bạn cũng cần các tệp CSS Bootstrap 5. Thêm dòng sau vào

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

7 của ứng dụng Angular 14 bao gồm Bootstrap từ CDN

$ npm install -g @angular/cli@latest

5

Bạn cũng có thể cài đặt bootstrap từ npm và sử dụng cách trước đó để đưa vào tệp CSS (thông qua mảng kiểu trong tệp

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

8)

$ npm install --save bootstrap

0

Tiếp theo mở

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

9 và thêm

$ npm install --save bootstrap

1

Đây là ví dụ về nhập hai thành phần BsDropdownModule và AlertModule

Bạn cần nhập mô-đun cho từng thành phần bạn muốn sử dụng theo cùng một cách

$ npm install --save bootstrap

3 cung cấp từng thành phần BS trong mỗi mô-đun riêng để bạn chỉ nhập các thành phần bạn cần. Bằng cách này, ứng dụng của bạn sẽ nhỏ hơn vì nó chỉ bao gồm các thành phần bạn đang thực sự sử dụng

Bạn có thể tìm thấy tất cả các thành phần mà bạn có thể sử dụng từ tài liệu

Sự kết luận

Trong bài viết này, chúng tôi đã thấy các cách khác nhau để đưa Bootstrap 5 vào ứng dụng Angular 14. Sử dụng nội dung Bootstrap 5 ban đầu từ npm, sử dụng thư viện

$ npm install --save bootstrap

2 và cuối cùng là sử dụng

$ npm install --save bootstrap

22

Nếu bạn muốn so sánh

$ npm install --save bootstrap

2 với.

$ npm install --save bootstrap

22 điểm quan trọng nhất là cách

$ npm install --save bootstrap

22 sử dụng các mô-đun riêng biệt cho các thành phần để giảm kích thước ứng dụng cuối cùng

Tôi có thể sử dụng bootstrap với Angular không?

Tại sao bootstrap không hoạt động trong Angular?

Bootstrap 5 có hoạt động với Angular không?

Tôi nên sử dụng bootstrap hay Angular?