Hướng dẫn how to upgrade bootstrap 4 to 5 in angular - cách nâng cấp bootstrap 4 lên 5 trong góc độ

mã số

• Colin Stodd
• Góc, Bootstrap 4, Bootstrap 5, Sass, SCSS, CSS, hướng dẫn

18 tháng 12 năm 2018 [xuất bản]

04 tháng 4 năm 2021 [cập nhật]

Nếu bạn đang sử dụng CSS:

Nếu bạn đang sử dụng Bootstrap 4:

1. Từ gốc của dự án, bạn cần cài đặt Bootstrap 4, jQuery và popper.js:

    npm install bootstrap jquery popper.js --S
   

   & nbsp; & nbsp; & nbsp; Bạn có thể coi thường cảnh báo về việc nâng cấp lên

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   1. Bootstrap yêu cầu popper.js 1.6.

Nếu bạn đang sử dụng Bootstrap 5:

1. Từ gốc của dự án, bạn cần cài đặt Bootstrap 5 và popper.js được sử dụng cho menu thả xuống và các loại JavaScript khác:

    npm install bootstrap@next popper.js --S
   

2. Cập nhật tệp

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   2 của bạn với cùng một đoạn mã bên dưới ở hai nơi: bên dưới

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   3 và

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   4:

    "styles": [
      "src/styles.css",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    ],
    "scripts": [
      "./node_modules/jquery/dist/jquery.min.js", // Delete this line if using version 5.
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
   

3. Vì chúng tôi đã cập nhật

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   2, bạn sẽ phải khởi động lại máy chủ của mình. Một khi bạn làm điều đó, bạn nên tốt để sử dụng phiên bản CSS.

Nếu bạn đang sử dụng SCSS hoặc SASS:

Nếu bạn đang sử dụng Bootstrap 4:

1. Từ gốc của dự án, bạn cần cài đặt Bootstrap, jQuery và popper.js:

   & nbsp; & nbsp; & nbsp; Bạn có thể coi thường cảnh báo về việc nâng cấp lên

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   1. Bootstrap yêu cầu popper.js 1.6.

    npm install bootstrap jquery popper.js --S
   

Nếu bạn đang sử dụng Bootstrap 5:

1. Từ gốc của dự án, bạn cần cài đặt Bootstrap 5 và popper.js được sử dụng cho menu thả xuống và các loại JavaScript khác:

    npm install bootstrap@next popper.js --S
   

2. Cập nhật tệp

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   2 của bạn với cùng một đoạn mã bên dưới ở hai nơi. Bên dưới

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   3 và

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   4:

    "styles": [
      "src/styles/styles.scss",
      "./node_modules/bootstrap/scss/bootstrap.scss"
    ],
    // See blurb about this below, and delete this comment.
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles",
        "./node_modules/bootstrap/scss"
      ]
    },
    "scripts": [
      "./node_modules/jquery/dist/jquery.min.js", // Delete line if using version 5.
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
   

   & nbsp; & nbsp; & nbsp; Để đọc thêm về

    npm install bootstrap jquery popper.js --S
   

   0, hãy truy cập & nbsp; Góc/cli readme. & nbsp; Đó là một cách nhanh chóng [3 phút] và chắc chắn là một điều tốt để nhận thức được nếu bạn đang làm việc với Sass, ít hơn, v.v. trong Angular.

3. Tạo thư mục/thư mục

    npm install bootstrap jquery popper.js --S
   

   1 trong

    npm install bootstrap jquery popper.js --S
   

   2. Vì vậy, nó phải là

    npm install bootstrap jquery popper.js --S
   

   3.

4. Bây giờ di chuyển tệp

    npm install bootstrap jquery popper.js --S
   

   4 của bạn vào thư mục đó và tạo các biến, mixin và tệp tùy chỉnh của bạn sang thư mục

    npm install bootstrap jquery popper.js --S
   

   3 đó bằng cách sử dụng quy ước đặt tên sau:

    npm install bootstrap jquery popper.js --S
   

   6,

    npm install bootstrap jquery popper.js --S
   

   7 và

    npm install bootstrap jquery popper.js --S
   

   8.

    src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   └── users
    ├── assets
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles
    │   ├── _custom.scss /* Add files here but they should have the "_" pre-pended like `_custom.scss`, [shown above] other than `styles.scss`.  */
    │   ├── _mixins.scss /* Your editor and the lang strips these but I'm not entire sure why they are needed, but that's what I was taught. */
    │   ├── styles.scss
    │   └── _variables.scss  /* Add files here but they should have the "_" pre-pended like `_custom.scss`, [shown above] other than `styles.scss`.  */
    └── test.ts
   

5. Bây giờ hãy mở tệp

    npm install bootstrap jquery popper.js --S
   

   4 của bạn và nhập bootstrap và các tệp tùy chỉnh/mixin/biến của bạn:

    /* Bootstrap */
    @import 'bootstrap';
   
    /* Custom */
    @import 'variables';
    @import 'mixins';
    @import 'custom';
   

6. Để sử dụng các biến của bạn trong các thành phần khác, bạn sẽ phải nhập chúng vào mỗi tệp

    npm install bootstrap@next popper.js --S
   

   0 như vậy. Nhưng vì chúng tôi đã nhập tất cả các tệp Bootstrap từ

    npm install bootstrap@next popper.js --S
   

   1 vào tệp

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   2 của chúng tôi, chúng tôi có thể rời khỏi đường dẫn giúp mọi thứ sạch sẽ hơn nhiều:

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   0

7. Vì chúng tôi đã cập nhật

    @import "~bootstrap/scss/input-group";
    @import "~bootstrap/scss/custom-forms";
    @import "~bootstrap/scss/media";
    @import "~bootstrap/scss/print";
   

   2, bạn sẽ phải khởi động lại máy chủ của mình.