Bài viết này sẽ hướng dẫn bạn cài đặt Bootstrap 5 với Angular 14. Bạn sẽ làm quen với việc cài đặt Bootstrap trong Angular 14
Ghi chú. Cài đặt Bootstrap 5 trong khi sử dụng Angular 14 là một điều dễ nắm bắt
Như mọi người đã biết, Bootstrap là framework được sử dụng rộng rãi nhất trên thế giới để phát triển các trang web đáp ứng và ưu tiên thiết bị di động
Bootstrap có một số lớp khác nhau có thể được sử dụng để tạo các trang web đáp ứng cho thiết bị di động. Nếu bạn muốn sử dụng Bootstrap với Angular 14, thì chúng tôi sẽ hỗ trợ bạn một cách đơn giản nhất có thể
Thêm Bootstrap vào ứng dụng Angular 14
Khi bạn đã tạo dự án của mình với phiên bản mới nhất, hãy quay lại giao diện dòng lệnh của bạn và chạy lệnh sau từ thư mục gốc của dự án
Sau đó, bạn cần thêm các tệp CSS và JavaScript Bootstrap vào dự án của mình
Có nhiều phương pháp khác nhau để thêm Bootstrap vào Angular
Một tùy chọn là bao gồm các tệp bootstrap thông qua tệp angular.json. Mở tệp cấu hình tồn tại ở thư mục gốc của dự án và thêm các dòng này
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" ] "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
Bạn cũng có thể đọc hướng dẫn chi tiết này về cách thêm bootstrap vào Angular 14
Tạo kiểu vỏ
Giờ đây, bạn có thể sử dụng các lớp bootstrap để tạo kiểu cho vỏ ứng dụng của mình tồn tại trong tệp src/app/app.component.html
Mở tệp src/app/app.component.html và cập nhật nó như sau
Angular 14 example
Chúng tôi chỉ cần thêm một thanh điều hướng sẽ được hiển thị trong mọi trang của ứng dụng vì Angular sẽ hiển thị các thành phần từ cấu hình bộ định tuyến bên trong ổ cắm bộ định tuyến
✋Nếu bạn có bất kỳ câu hỏi nào về bài viết này, hãy hỏi họ trong cộng đồng Thảo luận GitHub 👈 của chúng tôi. Bạn cũng có thể
✋ Bạn muốn làm chủ Angular 14?
✋ Đảm bảo tham gia Cộng đồng nhà phát triển Angular 14 của chúng tôi 👈 để thảo luận về bất kỳ điều gì liên quan đến phát triển Angular
Trong suốt hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng bootstrap 4 với Angular 14 (và bất kỳ phiên bản nào trước đó như Angular 10/9) để làm cho ứng dụng Angular của bạn phản hồi nhanh
Chúng ta sẽ tìm hiểu cách cài đặt (và gỡ cài đặt) bootstrap trong Angular từ npm, cdn hoặc sử dụng sơ đồ ng add và thêm bootstrap vào mảng style/scripts của angular. tập tin json. Tiếp theo, chúng ta sẽ tìm hiểu cách xây dựng giao diện người dùng với nhiều thành phần khác nhau như thanh điều hướng, lưới, bộ chọn ngày và giờ, chú giải công cụ, băng chuyền, phương thức, tab, danh sách thả xuống và biểu mẫu
Chúng ta cũng sẽ thấy những ưu điểm của việc triển khai Angular cho Bootstrap - ng-bootstrap so với ngx-bootstrap so với mdbootstrap. Và xem một số mẫu Angular Bootstrap phổ biến mà bạn có thể sử dụng với Angular để nhanh chóng tạo bố cục của mình
Hơn 3 cách để thêm Bootstrap 4 vào Angular 14
Trong phần này, chúng ta sẽ xem cách sử dụng Bootstrap để tạo kiểu cho các ứng dụng được xây dựng bằng Angular 14
Chúng ta sẽ xem cách tích hợp Angular với Bootstrap, theo nhiều cách khác nhau bao gồm sử dụng các gói ng-bootstrap và ngx-bootstrap
Chúng tôi sẽ sử dụng Angular CLI 14 để tạo một dự án hoàn toàn mới
Bootstrap là gì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 (Vẫn 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 4 là phiên bản Bootstrap mới nhất mang đến nhiều tính năng mới và mạnh mẽ cho khung, quan trọng nhất là Flexbox, hiện là hệ thống hiển thị mặc định cho bố cục lưới Bootstrap (một trong những tính năng quan trọng nhất của Bootstrap)
Hơn 3 cách để đưa Bootstrap 4 vào dự án Angular 14 của bạn
Bạn có thể đưa Bootstrap vào dự án Angular 14 của mình theo nhiều cách
- Bao gồm các tệp Bootstrap CSS và JavaScript trong phần <head> của tệp index.html của dự án Angular 14 của bạn với các thẻ <link> và $ ng new angular-bootstrap-examples0,
- Nhập tệp CSS Bootstrap trong tệp $ ng new angular-bootstrap-examples1 toàn cầu của dự án Angular của bạn với từ khóa $ ng new angular-bootstrap-examples2
- Thêm các tệp Bootstrap CSS và JavaScript vào các mảng $ ng new angular-bootstrap-examples3 và $ ng new angular-bootstrap-examples4 của tệp $ ng new angular-bootstrap-examples5 trong dự án của bạn
Đọc thêm
5 Angular 14 tính năng mới hấp dẫn nhất
Angular 14 được phát hành vào tháng 6 năm 2022 và bao gồm nhiều tính năng mới sẽ giúp giảm độ phức tạp của mã, làm cho mã an toàn hơn, giảm…
Bước 1 - Cài đặt Angular CLI v14
Hãy bắt đầu bằng cách cài đặt Angular CLI v14 nếu nó chưa được cài đặt trên máy của bạn
Đi tới giao diện dòng lệnh mới và chạy lệnh sau để cài đặt phiên bản mới nhất của Angular CLI
________số 8_______Ghi chú. Điều này sẽ cài đặt Angular 14 CLI trên toàn cầu trên hệ thống của bạn, vì vậy, tùy thuộc vào cấu hình npm của bạn, bạn có thể cần thêm $ ng new angular-bootstrap-examples6 (để truy cập siêu người dùng) trong macOS và Linux hoặc sử dụng dấu nhắc lệnh với quyền truy cập quản trị viên trong Windows
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 như sau
$ ng new angular-bootstrap-examplesBạn sẽ được nhắc cho một vài câu hỏi
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS [ //sass-lang.com/documentation/syntax#scss ]
Sass [ //sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ //lesscss.org ]
Stylus [ //stylus-lang.com ]Quan trọng nhất, hãy chọn CSS làm định dạng biểu định kiểu vì chúng tôi sẽ sử dụng phiên bản CSS của Bootstrap trong hướng dẫn của chúng tôi
Lệnh 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 cần thiết
Phiên bản bootstrap nào tương thích với Angular 14?
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.Làm cách nào để cài đặt ng bootstrap trong Angular 14?
Thêm Bootstrap vào ứng dụng Angular 14 .Bước 1 - Cài đặt Angular CLI 14Bước 2 - Khởi tạo Dự án Angular 14 của bạnBước 3 – Cài đặt Bootstrap 5Bước 4 - Tạo các thành phần góc và thiết lập định tuyếnBước 5 – Thêm Bootstrap 5 JumbotronBước 6 – Tạo một bảng Angular Bootstrap 5Phiên bản bootstrap nào tương thích với Angular 13?
Góc 13. Thêm Bootstrap 4 . Trong ví dụ của chúng tôi, chúng tôi sẽ cài đặt bootstrap từ npm và đưa nó vào. tệp json của dự án của chúng tôi.Tôi có thể sử dụng bootstrap và Ng bootstrap trong Angular không?
ng-bootstrap là một tập hợp các thành phần và lệnh bao bọc phiên bản mới nhất của Bootstrap ( v4. 0. 0 alpha 6 tại thời điểm viết bài này). Điều này giúp dễ dàng sử dụng Bootstrap trong các ứng dụng Angular của bạn. Cần có Angular 4+ để sử dụng ng-bootstrap .