Hướng dẫn bootstrap npm

Giả sử bạn muốn cài đặt phiên bản Bootstrap 4 mới nhất và bạn đang sử dụng phiên bản node10+ sử dụng npmít nhất 5.6+ (Tôi đã sử dụng nó cho nodev12.14.1 và npm6.13.6 và nó hoạt động bình thường):

npm install bootstrap
npm install jquery
npm install popper.js

Lưu ý rằng bạn không cần phải chuyển --savevì sau khi npmcài đặt các mô-đun 5.0.0 được thêm vào như một phần phụ thuộc theo mặc định.

Bây giờ, giả sử bạn có một tệp được gọi index.htmlở cùng thư mục của node_modules, bạn cần thêm thông tin sau vào headthẻ của mình :

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

Bạn cũng cần thêm những thứ sau trước </body>:

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Lưu ý nhận xét: jQuery đầu tiên, sau đó đến Popper.js, sau đó là Bootstrap JS. Điều này rất quan trọng vì Bootstrap phụ thuộc vào JQuery và Popper.js.

11 hữu ích 0 bình luận chia sẻ

Hướng dẫn bootstrap npm
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hướng dẫn bootstrap npm
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Hướng dẫn bootstrap npm
Facebook

Nội dung bài viết

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách sử dụng Bootstrap vào dự án Angular là như thế nào?

1 Giới thiệu về Bootstrap

Bootstrap là một framework opensource gồm có html,css và javascript. Chúng ta sử dụng bootstrap để làm trang web trở nên đẹp hơn. Chúng ta kết hợp với angular để tiết kiệm thời gian. Đồng thời Bootstrap đã hỗ trợ sẵn các chức năng hiển thị được trên mobile và các thành phần của web. Nên chúng ta chỉ sử dụng mà thôi.

Ngoài Bootstrap thì còn có rất nhiều framework khác hỗ trợ chúng ta trong việc làm giao diện như Polymer, material , ant design. Tuỳ theo dự án mà ta có thể chọn framework tương ứng. Nhưng theo anh thấy 70% dự án web của anh đều dùng Bootstrap.

2 Cài đặt bootstrap cho dự án

Có 2 cách để mình có thể nhúng Bootstrap vào dự án Angular.

  • Chúng ta có thể sử dụng Bootstrap từ CDN tại đây
  • Chúng ta sử dụng npm (node module) để cài bootstrap trực tiếp vào dự án.

Sự khác nhau giữa CDN và npm là nếu chúng ta dùng CDN thì chúng ta sẽ nhúng đường link bootstrap vào dự án. Khi trang web load lên thì nó sẽ lên mạng và nhúng file bootstrap từ CDN vào trang web. Còn nếu dùng npm thì chúng ta sẽ download source code của bootstrap vào trong dự án của mình và chúng ta chỉ link tới file bootstrap trong dự án mình thôi.

3 Tạo ứng dụng Angular và sử dụng Bootstrap từ CDN

  • Bước 1 : Cài đặt Angular CLI.

npm install -g @angular/cli

  • Bước 2 : Tạo dự án bằng angular.

ng new angular-bootstrap-demo

  • Bước 3 : Nhúng Bootstrap vào trong file index.html .

Chúng ta nhúng đường link bootstrap cdn và jquery vào phần header. Như vậy ta có thể sử dụng được bootstrap. Đường link đó chúng ta lấy tại đây

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular Getting Started</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
	integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	
	<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

4 Tạo ứng dụng Angular và sử dụng Bootstrap từ npm

  • Bước 1 : Cài đặt Angular CLI.

npm install -g @angular/cli

  • Bước 2 : Tạo dự án bằng angular.

ng new angular-bootstrap-demo

  • Bước 3 : Cài đặt bootstrap và jquery bằng lệnh npm.

npm install –save bootstrap jquery

  • Bước 4 : Nhúng bootstrap và jquery. Mở file angular.json và thêm vào đường dẫn tới file bootstrap và jquery mà mình vừa dùng npm để lôi về dự án.
1
2
3
4
5
6
7
8
9
10
11
12
"architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

Tổng kết

Hầu hết các ứng dụng ngày nay đều sử dụng Bootstrap để làm frontend, tuy nhiên ngoài Bootstrap thì mình còn có nhiều framework làm frontend khác nữa. Ưu điểm mạnh nhất các framework này là dễ sử dụng và tiết kiệm thời gian để phát triển.

Nào chúng ta hãy xem video hướng dẫn dưới đây nhé.

Hướng dẫn bootstrap npm


Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây