Phiên bản bootstrap nào tương thích với góc 13?

Trong bài viết này, chúng ta sẽ xây dựng một ứng dụng web bằng phiên bản mới nhất của Angular. Sau đó, chúng tôi sẽ thêm khung CSS Bootstrap cung cấp các thành phần giao diện phong phú và đáp ứng

Bắt đầu nào

điều kiện tiên quyết

Trước khi bắt đầu, bạn cần cài đặt và cấu hình các công cụ bên dưới để tạo ứng dụng Angular

• Git. Git là một hệ thống kiểm soát phiên bản phân tán và chúng tôi sẽ sử dụng nó để đồng bộ hóa kho lưu trữ
• Nút. js và npm. Nút. js là phần mềm thời gian chạy mã JavaScript dựa trên công cụ V8 của Google. npm là trình quản lý gói cho Node. js (Trình quản lý gói nút). Chúng tôi sẽ sử dụng các công cụ này để xây dựng và chạy ứng dụng Angular cũng như cài đặt các thư viện
• CLI góc. Angular CLI là một công cụ tiện ích dòng lệnh dành cho Angular và chúng tôi sẽ sử dụng nó để tạo cấu trúc cơ sở của ứng dụng Angular
• Một IDE (như Visual Studio Code hoặc WebStorm). Môi trường phát triển tích hợp là một công cụ có giao diện đồ họa giúp bạn phát triển các ứng dụng. Chúng tôi sẽ sử dụng một để phát triển ứng dụng Góc của chúng tôi

Cách tạo ứng dụng góc

Angular là một nền tảng phát triển để xây dựng các ứng dụng web, di động và máy tính để bàn bằng HTML, CSS và TypeScript (JavaScript). Hiện tại, Angular đang ở phiên bản 13 và Google là người bảo trì chính của dự án

Bootstrap là một khung CSS nguồn mở có nhiều thành phần để xây dựng giao diện web đáp ứng

Hãy tạo ứng dụng với cấu trúc cơ sở Angular bằng cách sử dụng

npm install bootstrap bootstrap-icons

ng new angular-bootstrap
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-bootstrap/README.md (1062 bytes)
CREATE angular-bootstrap/.editorconfig (274 bytes)
CREATE angular-bootstrap/.gitignore (604 bytes)
CREATE angular-bootstrap/angular.json (3273 bytes)
CREATE angular-bootstrap/package.json (1079 bytes)
CREATE angular-bootstrap/tsconfig.json (783 bytes)
CREATE angular-bootstrap/.browserslistrc (703 bytes)
CREATE angular-bootstrap/karma.conf.js (1434 bytes)
CREATE angular-bootstrap/tsconfig.app.json (287 bytes)
CREATE angular-bootstrap/tsconfig.spec.json (333 bytes)
CREATE angular-bootstrap/src/favicon.ico (948 bytes)
CREATE angular-bootstrap/src/index.html (302 bytes)
CREATE angular-bootstrap/src/main.ts (372 bytes)
CREATE angular-bootstrap/src/polyfills.ts (2820 bytes)
CREATE angular-bootstrap/src/styles.scss (80 bytes)
CREATE angular-bootstrap/src/test.ts (743 bytes)
CREATE angular-bootstrap/src/assets/.gitkeep (0 bytes)
CREATE angular-bootstrap/src/environments/environment.prod.ts (51 bytes)
CREATE angular-bootstrap/src/environments/environment.ts (658 bytes)
CREATE angular-bootstrap/src/app/app-routing.module.ts (245 bytes)
CREATE angular-bootstrap/src/app/app.module.ts (393 bytes)
CREATE angular-bootstrap/src/app/app.component.scss (0 bytes)
CREATE angular-bootstrap/src/app/app.component.html (23809 bytes)
CREATE angular-bootstrap/src/app/app.component.spec.ts (1090 bytes)
CREATE angular-bootstrap/src/app/app.component.ts (222 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

Bây giờ chúng ta cần cài đặt các thư viện

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

Sau khi cài đặt, chúng ta sẽ cấu hình thư viện

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

Bây giờ chúng ta sẽ cài đặt thư viện

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

Sau khi cài đặt, chúng tôi sẽ nhập mô-đun

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

npm install bootstrap bootstrap-icons

Bây giờ chúng tôi sẽ xóa nội dung của lớp

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

npm install bootstrap bootstrap-icons

Tiếp theo, chúng tôi sẽ xóa nội dung của tệp

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

npm install bootstrap bootstrap-icons

Cuối cùng, chúng ta sẽ chạy ứng dụng bằng lệnh bên dưới

npm install bootstrap bootstrap-icons

Sẳn sàng. Chúng tôi sẽ truy cập URL tại

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Kho ứng dụng có tại https. //github. com/rodrigokamada/angular-bootstrap

Sự kết luận

Hãy tóm tắt những gì chúng tôi đề cập trong bài viết này

• Chúng tôi đã tạo một ứng dụng Angular
• Chúng tôi đã thêm một số thành phần khung Bootstrap CSS

Bạn có thể sử dụng bài viết này để tạo các ứng dụng phong phú và đáp ứng, cung cấp trải nghiệm người dùng tốt hơn và khả năng sử dụng cao hơn

Cảm ơn bạn đã đọc và tôi hy vọng bạn thích bài viết

Hướng dẫn này đã được đăng trên blog của tôi bằng tiếng Bồ Đào Nha

Để được cập nhật bất cứ khi nào tôi đăng bài viết mới, hãy theo dõi tôi trên Twitter

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Rodrigo Kamada

👨‍💻 Nhà phát triển phần mềm. ✍️ Người tạo nội dung kỹ thuật. 🤝 Cộng tác viên mã nguồn mở. 🙌 đại sứ

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Phiên bản bootstrap nào tương thích với Angular 13?

Làm cách nào để sử dụng bootstrap trong Angular 13?

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

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