Trang chủ » Blog » [Thực hành] Cài đặt thư viện bootstrap cho app Angular

[Thực hành] Cài đặt thư viện bootstrap cho app Angular

bởi CodeGym | 26/12/2023 17:16 | Bài thực hành | Blog

Mục tiêu

Cài đặt thư viện bootstrap cho app Angular- Biết cài đặt và sử dụng thư viện bootstrap cho dự án Angular.

Nội dung- cài đặt thư viện bootstrap cho app Angular

Để bootstrap có thể sử dụng được thì cần làm cho những thư viện sau hiện diện trên app:

  • thư viện bootstrap stylesheet
  • thư viện bootstrap javascript
  • các thư viện khác mà bootstrap javascript cần tới.

Hướng dẫn

Bước 1: install thư viện bootstrap

Khai báo bổ sung dependence bootstrap và các thư viện cần thiết của nó vào file package.json, sau đó chạy npm i để cài đặt các gói.

"dependencies": {
  "bootstrap": "^4.3.1",
  "jquery": "^3.4.1",
  "popper.js": "^1.15.0"
}

Thư viện bootstrap sẽ được cài đặt vào thư mục nodemodules, tiếp theo ta khai báo để angular nạp thư viện này vào lúc khởi động.

Bước 2: nạp bootstrap.css

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

Nếu thành công, thư viện bootstrap style sẽ hiện diện:

Bước 3: nạp bootstrap.js và các thư viện javascript khác mà nó cần tới

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

Nếu thành công, đối tượng bootstrap sẽ có khả năng truy cập:

Bootstrap đã sẵn sàng để sử dụng.

Trên đây CodeGym đã cùng với bạn luyện tập về component data binding trong Angular. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!

Download - Giáo trình thuật toán

11 + 6 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

12 + 8 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM