Bootstrap 5 có tương thích với Angular 11 không?
|
Các tiện ích góc được xây dựng từ đầu chỉ sử dụng CSS Bootstrap 5 với các API được thiết kế cho hệ sinh thái Góc Show
Vui lòng kiểm tra trang web demo của chúng tôi và danh sách các vấn đề để xem tất cả những điều chúng tôi đang làm. Hãy bình luận ở đó Mục lục
Thử nghiệmVui lòng kiểm tra tất cả các thành phần chúng tôi có trong hành động tại https. // ng-bootstrap. github. io phụ thuộcCác phụ thuộc duy nhất là Angular, Bootstrap 5 CSS và Popper. Các phiên bản được hỗ trợ là ng-bootstrapAngularBootstrap CSSPopper1. x. x5. 0. 24. 0. 02. x. x6. 0. 04. 0. 03. x. x6. 1. 04. 0. 04. x. x7. 0. 04. 0. 05. x. x8. 0. 04. 3. 16. x. x9. 0. 04. 4. 17. x. x, 8. x. x10. 0. 04. 5. 09. x. x11. 0. 04. 5. 010. x. x12. 0. 04. 5. 011. x. x13. 0. 04. 6. 012. x. x13. 0. 05. 0. 02. 10. 213. x. x14. 1. 05. 2. 02. 10. 214. x. x15. 0. 05. 2. 32. 11. 6Cài đặtChúng tôi thực sự khuyên bạn nên sử dụng Angular CLI để thiết lập một dự án mới. Nếu bạn có dự án Angular CLI, bạn chỉ cần sử dụng sơ đồ của chúng tôi để thêm thư viện ng-bootstrap vào đó Chỉ cần chạy như sau ng add @ng-bootstrap/ng-bootstrap Nó sẽ cài đặt ng-bootstrap cho ứng dụng mặc định được chỉ định trong ng add @ng-bootstrap/ng-bootstrap --project myProject Nếu bạn không muốn sử dụng sơ đồ và cài đặt mọi thứ theo cách thủ công, vui lòng tham khảo hướng dẫn cài đặt thủ công trên trang web của chúng tôi trình duyệt được hỗ trợChúng tôi hỗ trợ các trình duyệt và phiên bản giống nhau được cả Bootstrap 4 và Angular hỗ trợ, tùy theo điều kiện nào hạn chế hơn. Xem hỗ trợ trình duyệt Angular và hỗ trợ trình duyệt Bootstrap để biết thêm chi tiết Mã của chúng tôi được kiểm tra tự động trên tất cả các trình duyệt được hỗ trợ Tìm sự giúp đỡVui lòng không mở các sự cố cho các câu hỏi hỗ trợ chung vì chúng tôi muốn giữ các sự cố GitHub cho các báo cáo lỗi và yêu cầu tính năng. Bạn có nhiều cơ hội hơn để nhận được câu trả lời cho câu hỏi của mình trên StackOverflow nơi những người bảo trì đang xem xét các câu hỏi được gắn thẻ StackOverflow là một nơi tốt hơn nhiều để đặt câu hỏi vì
Để tiết kiệm thời gian của bạn và của chúng tôi, chúng tôi sẽ đóng một cách có hệ thống tất cả các sự cố được yêu cầu hỗ trợ chung và chuyển hướng mọi người đến StackOverflow Bạn có nghĩ rằng bạn đã tìm thấy một lỗi?Chúng tôi muốn sửa nó càng sớm càng tốt. Nhưng trước khi sửa lỗi, chúng tôi cần sao chép và xác nhận nó Chúng tôi yêu cầu bạn tôn trọng hai điều
Kịch bản sao chép tối thiểu cho phép chúng tôi nhanh chóng xác nhận lỗi (hoặc chỉ ra sự cố mã hóa) cũng như xác nhận rằng chúng tôi đang khắc phục đúng sự cố Xin lưu ý rằng chúng tôi sẽ nhấn mạnh vào kịch bản sao chép tối thiểu để tiết kiệm thời gian của người bảo trì và cuối cùng có thể sửa nhiều lỗi hơn. Chúng tôi sẽ đánh dấu vấn đề là không thể xử lý nếu không có vấn đề đó và đóng nếu không nhận được phản hồi từ người báo cáo Thật thú vị, theo kinh nghiệm của chúng tôi, người dùng thường tự tìm thấy các vấn đề về mã hóa khi chuẩn bị một StackBlitz tối thiểu. Chúng tôi hiểu rằng đôi khi có thể khó trích xuất các đoạn mã cần thiết từ cơ sở mã lớn hơn nhưng chúng tôi thực sự cần tách biệt vấn đề trước khi có thể khắc phục Đóng góp cho dự ánVui lòng kiểm tra NHÀ PHÁT TRIỂN. md để biết tài liệu về cách chạy dự án cục bộ và ĐÓNG GÓP. md để biết hướng dẫn đóng góp Bootstrap là một khung giao diện người dùng mã 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 dựng sẵn, 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. Angular là một ứng dụng web phổ biến, một framework mã nguồn mở dựa trên bản thảo. Angular là ngôn ngữ độc lập với nền tảng được sử dụng trên nhiều hệ thống khác nhau như máy tính để bàn, thiết bị di động, web máy tính xách tay, v.v. Hơn nữa, Angular có vô số tính năng như hiệu suất cao, tốc độ, các khung và thành phần tích hợp sẵn. Bootstrap cũng 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 mẫu và thiết kế 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. Với bootstrap, bạn phải thông thạo 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 có 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 đã sẵn sàng để bắt đầu. Nghe khá thú vị đúng không? . Trải qua khóa học tốt nhất để học Angular và tìm các khóa học phù hợp theo sở thích của bạn. 5 cách để đưa Bootstrap 4 vào dự án góc của bạnSau đây, chúng ta sẽ tìm hiểu 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 hàng triệu chủ đề khác nhau. Bạn có thể thêm Bootstrap vào dự án Angular của mình theo một số cách để đồng thời làm cho dự án của bạn hấp dẫn và thú vị hơn. Tham quan khóa đào tạo phát triển web và học cách phát triển từ đầu. Ở đây, chúng tôi sẽ sử dụng Angular CLI 13 để tạo một dự án từ đầu. Quá trình bao gồm các bước sau. Trước tiên chúng ta hãy liệt kê chúng xuống.
Bước 1- Cài đặt Angular cli 13Bước đầu tiên là cài đặt Angular CLI 13 trên giao diện của bạn nếu nó chưa đượ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. Chạy lệnh dưới đây để cài đặt nó- $ npm install -g @angular/cli 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. Khi quá trình cài đặt kết thúc, nó sẽ được lưu trữ trong xử lý tiện ích ng. Bây giờ, hãy tạo một dự án Angular 13. Đây là mã mà bạn phải sử dụng để bắt đầu một dự án $ ng new angular-bootstrap-examples Bạn sẽ gặp một số câu hỏi mà bạn cần phải trả lời cho phù hợp. Bạn cần chọn định dạng CSS stylesheet phù hợp. Điều này là do chúng tôi sẽ sử dụng phần Bootstrap CSS để đưa vào dự án của chúng tôi. 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. 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. Bây giờ, bạn cần vào 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. $ cd angular-bootstrap-examples Sử dụng lệnh ng serve để phục vụ ứng dụng bằng lệnh bên dưới. $ ng serve Ứng dụng của bạn sẽ bắt đầu chạy ở cổng 4200 với URL là http. //máy chủ cục bộ. 4200/. Bước 2- Cài đặt Bootstrap 4 trong dự án Angular 13 của bạnBâ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. Có ba phương pháp như một câu trả lời cho cách cài đặt bootstrap trong Angular. Chúng như sau-
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 install bootstrap. 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 của dự án của bạn. Bước 3- Thêm Bootstrap 5 vào Angular CLIDưới đây, chúng tôi có năm cách khác để thêm bootstrap vào dự án Angular CLI. Thêm bootstrap bằng cách sử dụng góc. jsonVì 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 góc. tập tin json. Mở tệp và thực hiện các lệnh sau, node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array, node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, 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 Angular của bạn. Thêm bootstrap bằng chỉ mục. tệp htmlĐây là cách thứ hai để thực hiện cùng một nhiệm vụ. Bạn có thể sử dụng chỉ số. 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 chỉ mục của mình. tệp html. Các thẻ như sau- Làm cách nào để sử dụng Bootstrap 5 trong Angular 11?Thêm Bootstrap bằng liên kết CDN . Truy cập trang web chính thức của bootstrap getbootstrap. com Nhấp vào nút tải xuống Cuộn xuống và bạn có thể thấy CDN Via jsDelivr. . Mở chỉ mục của bạn. . Bây giờ hãy xem bootstrap có hoạt động hay không. . Chạy dự án của bạn bằng cách ng phục vụ Bootstrap 5 có tương thích với Angular không?Bắt đầu với ng-bootstrap5
. Vì vậy, bạn có thể có các kiểu của Bootstrap với sức mạnh của Angular với ng-Bootstrap . Bạn phải cài đặt Bootstrap 4 và Angular trong dự án của mình trước khi tiến hành cài đặt ng-bootstrap.
Làm cách nào để tích hợp Bootstrap trong Angular 11?Có ba (3) cách chính để thêm bootstrap vào dự án góc của chúng ta. Phương pháp 1. Sử dụng CLI góc (cài đặt npm) . Phương pháp 2. Sử dụng CDN (phương pháp Sao chép và Dán). Phương pháp 3. Thêm tệp CSS bootstrap vào dự án của bạn (Sử dụng nhập CSS).
Góc có tương thích với Bootstrap không?Bootstrap cũng 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 mẫu và thiết kế 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. |
