Morioh
Login
Hoang Ha

Hoang Ha

11 months ago

2 cách dễ dàng để cài đặt Bootstrap 5 trong Angular 16

Tìm hiểu cách cài đặt Bootstrap 5 trong ứng dụng Angular 16 của bạn theo 2 cách dễ dàng. Cho dù bạn là người mới bắt đầu hay người dùng có kinh nghiệm, luôn có một phương pháp dành cho bạn.

Bootstrap là một khung CSS phổ biến có thể được sử dụng để tạo kiểu trang web một cách nhanh chóng và dễ dàng. Angular là một khung JavaScript phổ biến có thể được sử dụng để xây dựng các ứng dụng một trang. Trong bài viết này, chúng tôi sẽ thảo luận về hai cách để cài đặt Bootstrap 5 trong ứng dụng Angular 16

Tôi có hai cách để cài đặt bootstrap và sử dụng nó với các dự án 16 góc cạnh của bạn.

Bạn có thể dễ dàng tạo ứng dụng góc của mình bằng lệnh bên dưới:

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 Angular 16 của mình và nhập tệp css vào tệp style.css. cái này chỉ dành cho nhập css. để bạn có thể chạy lệnh dưới đây:

npm install bootstrap --save

Ok, bây giờ bạn cần nhập css Bootstrap của mình vào 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 16 của mình. 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 lệnh trên. 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ư dưới đây:

src/app/app.component.html

<div class="container">
  <h1>Install Bootstrap 5 in Angular 16 - codequs.com</h1>
  
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

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

Chạy ứng dụng Angular:

Tất cả các bước cần thiết đã được thực hiện, bây giờ bạn phải nhập lệnh bên dưới và nhấn enter để chạy ứng dụng Angular:

ng serve

Bây giờ, hãy truy cập trình duyệt web của bạn, nhập URL đã cho và xem đầu ra của ứng dụng:

http://localhost:4200

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

#angular #bootstrap

1.00 GEEK