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

Điều đầu tiên bạn muốn thêm bootstrap 5 dưới dạng gói npm như vậy

npm install bootstrap@next

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

trong góc của bạn. json thêm biểu định kiểu bootstrap và javascript

"styles": [
  "src/scss/styles.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
],

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ hãy thêm popperjs và thêm nó vào tập lệnh của bạn

npm install @popperjs/core

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, hãy kiểm tra và xem mọi thứ có hoạt động phù hợp không
Thêm thành phần thả xuống vào ứng dụng của bạn. thành phần. html

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton1"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể nhấp và xem các mục menu thả xuống
🔥Boomshaka-laka bạn đã hoàn tất. Mã hóa vui vẻ.

Xin chào các bạn, chào mừng trở lại với blog của tôi. Hôm nay trong bài đăng trên blog này, tôi sẽ nói với bạn, Thêm Bootstrap 5 vào Angular 14

Đây là liên kết hướng dẫn cập nhật phiên bản góc cạnh lên 13. Cập nhật góc 13 lên góc 13

Đây là những bản demo khác liên quan đến Angular 12 với Bootstrap 5

1. Bootstrap 5 Popover hoạt động trong Angular 12
2. Bootstrap 5 Tooltip hoạt động trong Angular 12
3. Phương thức Bootstrap5 với các biểu mẫu trong góc 12

Angular 14 đã xuất hiện và Bootstrap 5 cũng vậy và nếu bạn là người mới thì bạn phải kiểm tra hai liên kết bên dưới

1. Hướng dẫn góc 13
2. Angular12 Mẫu miễn phí
3. Bootstrap 5

Các bạn bây giờ tôi tiếp tục trở đi và đây là đoạn mã đang hoạt động và vui lòng sử dụng cẩn thận đoạn mã này để tránh những sai lầm

1. Trước tiên, các bạn, chúng tôi cần thiết lập góc 14 mới và để làm điều này, chúng tôi cần chạy các lệnh bên dưới nhưng nếu bạn đã thiết lập góc 14 thì bạn có thể tránh các lệnh bên dưới. Thứ hai, chúng ta cũng nên cài đặt phiên bản nút mới nhất trên hệ thống của mình

npm install -g @angular/cli 

ng new angularboot5 //Create new Angular Project

cd angularboot5 // Go inside the Angular Project Folder

2. Bây giờ các bạn, ở đây chúng ta cần chạy các lệnh bên dưới vào thiết bị đầu cuối dự án của mình để cài đặt các mô-đun bootstrap 5 vào ứng dụng góc cạnh của chúng ta

npm install bootstrap

npm i @popperjs/core

3. Bây giờ các bạn, chúng ta chỉ cần thêm mã bên dưới vào src/app/app. thành phần. html để xuất bản cuối cùng trên trình duyệt web

<div class="container  text-center mt-5 mb-5">
  <h1>Bootstrap 5 is working fine with Angular 14!!</h1>
</div>

4. Bây giờ các bạn, chúng ta chỉ cần thêm đoạn mã dưới đây vào góc. tập tin json

Cuối cùng, bạn bè phải chạy lệnh ng phục vụ vào thiết bị đầu cuối của bạn để chạy dự án góc 14

Bây giờ chúng ta đã làm xong bạn bè. Nếu bạn có bất kỳ loại truy vấn, đề xuất và yêu cầu mới nào thì hãy bình luận bên dưới

Ghi chú. Các bạn, bài này mình chỉ nói setup cơ bản và các thứ, các bạn có thể thay đổi code theo yêu cầu của các bạn

Tôi sẽ đánh giá cao nếu bạn sẽ cho biết quan điểm của bạn cho bài viết này. Lượt xem của bạn tốt hay xấu không quan trọng vì với lượt xem của bạn, tôi sẽ làm cho các bài đăng tiếp theo của mình hay và hữu ích hơn

Angular có hỗ trợ bootstrap 5 không?

Làm cách nào để tích hợp bootstrap 5 trong Angular?

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

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