Bootstrap 5 Góc 14

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": []
          },

"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": []
          },

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": []
          },

"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": []
          },

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à 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

  "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": []
            },
  

  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à

  $ 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": []
          },

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

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

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

Làm cách nào để đưa bootstrap vào Angular 14?

Làm cách nào để cài đặt bootstrap phiên bản 5 trong Angular?