Hướng dẫn add bootstrap 4 to angular 12 - thêm bootstrap 4 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...

Bootstrap với góc 14

04/07/22 Danny

Chúng ta sẽ làm gì?

Chúng tôi sẽ tích hợp Bootstrap trong ứng dụng web của chúng tôi. Chúng tôi sẽ sử dụng phiên bản Angular phiên bản 14.0.4 & NBSP; JavaScript.Bootstrap in our Web Application.
We will use the Angular version 14.0.4 javascript framework.

Đây là Bước 4 & nbsp; của Hướng dẫn Angular của chúng tôi & NBSP; sẽ cho phép chúng tôi có được một ứng dụng web PWA & NBSP; Web. Chúng tôi sẽ sử dụng một dự án hiện có có đặc điểmStep 4 of our  Angular guide which will allow us to obtain a PWA Web Application.
We will use an existing project whose characteristics are

• Được tạo ra bằng góc CLI
• Lộ trình
• Tải lười biếng

Tất cả các nguồn được tạo ra được chỉ định ở cuối hướng dẫn.

Ứng dụng này ở địa chỉ sauis at the following address

• https://angular.ganatan.com

Trước khi bạn bắt đầu

Các trang của một trang web được viết với 3 ngôn ngữ

• HTML & NBSP ;: Nó cho phép tạo và thể hiện nội dung của một trang web và cấu trúc của nó. : it allows to create and represent the content of a web page and its structure.
• CSS & nbsp ;: Nó được sử dụng để mô tả bố cục của một trang. : it is used to describe the layout of a page.
• JavaScript & nbsp ;: Nó cho phép bạn tạo các tính năng tương tác trong trang. : It allows you to create interactive features in the page.

Nhiều công cụ có thể đơn giản hóa cuộc sống của một nhà phát triển frontend. Đặc biệt là các khung CSS tạo thành các hộp công cụ bằng cách nào đó. Khung CSS cực kỳ nhiều, trong số đó chúng tôi có thể trích dẫn
In particular the CSS Frameworks which constitute somehow toolboxes.
The CSS frameworks are extremely numerous, among them we could quote

• Sự thành lập
• Vật chất hóa CSS
• Bootstrap
• Thuần khiết

Bootstrap là một trong những khung CSS nổi tiếng và được sử dụng nhất. is one of the most famous and used CSS frameworks.

Cài đặt

# Add dependencies in package.json
npm install --save bootstrap
npm install --save @fortawesome/fontawesome-free

    "@fortawesome/fontawesome-free": "5.15.4",
    "bootstrap": "5.1.3",
    "rxjs": "7.4.0",
    "tslib": "2.3.1",
    "zone.js": "0.11.4"

Cập nhật

Chúng tôi sẽ sửa đổi tệp angular.json để gọi các tệp cần thiết cho hoạt động của các trang HTML của chúng tôi.angular.json to call the files necessary for the operation of our html pages.

Các tập tin định dạng CSS

• style.css (cụ thể cho dự án của chúng tôi) (specific to our project)
• font-awesome.css
• bootstrap.min.css

Tệp tập lệnh JavaScript

• bootstrap.min.js​​​​​​​

npm install bootstrap --save

npm install bootstrap --save

Chúng tôi sẽ sửa đổi các tệp sau sẽ chứa giao diện mới

• app.component.html
• home.component.html
• home.component.ts
• environment.prod.ts
• environment.ts
• app.component.spec.ts

Chúng tôi sẽ thêm các hình ảnh được sử dụng trong thư mục tài sản/params/hình ảnh/logoassets/params/images/logo directory

• ganatan.png
• bootstrap.png
• angular.png

src/app/app.component.html

npm install bootstrap --save

src/app/app.component.css

npm install bootstrap --save

src/app/modules/general/home/home.component.html

npm install bootstrap --save

src/app/modules/general/home/home.component.ts

npm install bootstrap --save

src/app/modules/general/home/home.component.css

npm install bootstrap --save

src/environments/environments.ts

npm install bootstrap --save

src/environments/environments.prod.ts

npm install bootstrap --save

src/app/app.component.spec.ts

npm install bootstrap --save

Xét nghiệm

Nó chỉ còn lại để kiểm tra các tập lệnh góc khác nhau.

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

Mã nguồn

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 4 vào angularjs 11?

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