Hướng dẫn add bootstrap to angular 12 - thêm bootstrap vào góc 12

Xin chào Dev,

Tôi sẽ giải thích cho bạn ví dụ về Angular 12 thêm bootstrap. Tôi sẽ cho bạn thấy về Angular 12 Cài đặt Bootstrap 5. Tôi đã giải thích đơn giản về việc cài đặt Bootstrap trong Angular 12. Nếu bạn có câu hỏi về Cài đặt Bootstrap 5 trong Angular 12 thì tôi sẽ đưa ra ví dụ đơn giản với giải pháp. Được rồi, hãy để lặn vào các bước.

Như chúng ta đã biết Bootstrap là khuôn khổ phổ biến nhất thế giới để xây dựng các trang web đáp ứng và đầu tiên trên thiết bị di động. Bootstrap cung cấp một số lớp để tạo trang web đáp ứng cho điện thoại di động của bạn. Vì vậy, nếu bạn muốn sử dụng bootstrap với Angular 12, tôi sẽ giúp bạn rất đơn giản.

Tôi có hai bootstrap cài đặt và sử dụng nó với dự án Angular 12 của bạn. Tôi sẽ cung cấp cho bạn cả hai cách ví dụ.

Bạn có thể dễ dàng tạo ứng dụng Angular của mình bằng Lệnh Bellow:

ng new my-new-app

Ví dụ 1:

Trong giải pháp này, bạn chỉ cần cài đặt Bootstrap trên tệp Angular 12 và nhập tệp CSS vào Style.css. Điều này chỉ dành cho nhập khẩu CSS. Vì vậy, bạn có thể chạy lệnh GRIDE:

npm install bootstrap --save

OK, bây giờ bạn cần nhập bootstrap CSS trên tệp style.css như dưới đây:

src/style.css

@import "~bootstrap/dist/css/bootstrap.css";

Bây giờ bạn có thể sử dụng lớp Bootstrap trong ứng dụng Angular 12 của bạn. Nó sẽ hoạt động.

Ví dụ 2:

Trong giải pháp này, chúng tôi cũng sẽ cài đặt Bootstrap với JQuery và Popper JS. Vì vậy, theo cách đó, bạn cũng có thể nhập chức năng Bootstrap CSS và Bootstrap JS. Vì vậy, tôi nghĩ rằng đây sẽ là giải pháp tốt nhất cho bạn tôi nghĩ.

Hãy chạy các lệnh sau:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Bây giờ sau khi chạy thành công trên lệnh. Hãy nhập nó vào tệp Angular.json.

angular.json

....
      "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
      ],
      "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]



.....

Bây giờ bạn có thể dễ dàng sử dụng lớp Bootstrap như Bellow:

src/app/app.component.html

  
Install Bootstrap 5 in Angular 12 - ItSolutionStuff.com
  
    
      Featured
    
 
 
Special title treatment
 
With supporting text below as a natural lead-in to additional content.
 Go somewhere
 
 

Bây giờ bạn có thể sử dụng cả Bootstrap CSS và JS.

Bây giờ bạn có thể kiểm tra dự án Angular 12 của bạn.

Tôi hy vọng nó có thể giúp bạn...

Trong phần trước của loạt hướng dẫn Angular 12 của chúng tôi dành cho các nhà phát triển JavaScript, chúng tôi đã cài đặt Angular CLI và tạo một dự án. Bây giờ, hãy để Lừa xem cách thêm Bootstrap vào dự án của chúng tôi để tạo kiểu cho UI ứng dụng của chúng tôi.

Các phần trong loạt bài này:

• Angular 12: Hướng dẫn và ví dụ
• Angular 12: Cài đặt CLI & tạo dự án
• Angular 12: Thêm bootstrap 4 (cái này)

Chúng ta có thể sử dụng các phương pháp khác nhau để thêm bootstrap 4 vào góc. 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

npm install bootstrap --save

Chuyển đến giao diện dòng lệnh của bạn và chạy các lệnh sau để cài đặt Bootstrap và JQuery:

$ npm install bootstrap
$ npm install jquery

Sau đó, bạn sẽ cần bao gồm các tệp CSS Style và JavaScript của cả hai thư viện này trong tệp

npm install bootstrap --save

"styles": [  
    "./node_modules/bootstrap/dist/css/bootstrap.css",
    "src/styles.css"
],
"scripts": [               
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Tại thời điểm này, chúng ta có thể sử dụng bootstrap để tạo kiểu cho các thành phần góc của chúng ta. Hãy để bắt đầu với vỏ của ứng dụng của chúng tôi, thành phần ứng dụng có chứa ổ cắm bộ định tuyến. Chuyển đến tệp

npm install bootstrap --save

npm install bootstrap --save

Chúng tôi đã thêm một bộ phận container bootstrap và thanh điều hướng để hiển thị một thanh điều hướng. Sau đó, chúng tôi đã thêm một thành phần Jumbotron được sử dụng để hiển thị nội dung kiểu đơn vị anh hùng.

Chúng tôi cũng di chuyển ổ cắm bộ định tuyến, bên trong container ngay bên dưới Jumbotron. Đây là nơi bộ định tuyến góc sẽ hiển thị (các) thành phần phù hợp.

Đó là nó; Tiếp theo, chúng tôi sẽ tìm hiểu cách tạo một dịch vụ góc để đóng gói mã gửi nhận yêu cầu tìm nạp dữ liệu từ máy chủ API REST của bên thứ ba.

Làm thế nào để bạn thực hiện bootstrap trong Angular 12?

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

Làm cách nào để thêm bootstrap vào stackoverflow trong Angular 12?

Làm cách nào để thêm bootstrap vào dự án Angular của tôi?