Tôi đang cố gắng thiết lập Bootstrap 5 trong dự án Angular 14 đang sử dụng SCSS thay vì CSS. Tôi đã cài đặt bootstrap qua npm [
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
3] và nó hiện được tham chiếu chính xác trong gói của tôi. tập tin json"dependencies": {
"@angular/animations": "^14.2.2",
"@angular/cdk": "^14.2.2",
"@angular/common": "^14.2.2",
"@angular/compiler": "^14.2.2",
"@angular/core": "^14.2.2",
"@angular/forms": "^14.2.2",
"@angular/material": "^14.2.2",
"@angular/platform-browser": "^14.2.2",
"@angular/platform-browser-dynamic": "^14.2.2",
"@angular/router": "^14.2.2",
"@popperjs/core": "^2.11.6",
"bootstrap": "^5.2.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
Tôi đã thêm bootstrap. tham chiếu tệp scss trong góc của tôi. tập tin json
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
Nhưng lớp bên dưới không có tác dụng
File Sharing App
Không có lớp bootstrap nào khác mà tôi đã sử dụng hoạt động cả. Tôi đã thử khởi động lại ứng dụng [đang chạy
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
4]. Có ai biết những gì tôi đang thiếu? 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
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
5 và "build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
6Chú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 mới nhất của Bootstrap 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
7 của tệp"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/file-sharing-app.ui", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss", "src/custom-theme.scss", "node_modules/bootstrap/scss/bootstrap.scss" ], "scripts": [] },
8 trong dự án Angular 14 của bạn với thẻ"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/file-sharing-app.ui", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss", "src/custom-theme.scss", "node_modules/bootstrap/scss/bootstrap.scss" ], "scripts": [] },
9 và"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/file-sharing-app.ui", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss", "src/custom-theme.scss", "node_modules/bootstrap/scss/bootstrap.scss" ], "scripts": [] },
$ ng new angular-bootstrap-examples
0, - Nhập tệp CSS Bootstrap vào tệp
$ ng new angular-bootstrap-examples
1 toàn cầu của dự án Angular của bạn bằng từ khóa$ ng new angular-bootstrap-examples
2 - Thêm tệp CSS và JavaScript Bootstrap vào mảng
$ ng new angular-bootstrap-examples
3 và$ ng new angular-bootstrap-examples
4 của tệp$ ng new angular-bootstrap-examples
5 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
$ npm install -g @angular/cli@next
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, do đó, 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-examples
6 [để 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-examples
Bạn sẽ được nhắc cho một vài câu hỏi
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
2Quan 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