Npm cài đặt bootstrap 5

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 mã nguồn mở bao gồm html, css và javascript. Chúng ta sử dụng bootstrap để làm cho trang web trở nên đẹp hơn. Chúng ta kết hợp với góc để tiết kiệm thời gian. Bootstrap ĐỒNG THỜI ĐÃ TÍCH HỢP CÁC TÍNH NĂNG NỔI BẬT TRÊN MÀN HÌNH DI ĐỘNG 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 , kiến ​​thiết kế. làm theo dự án mà ta có thể chọn khung 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 (mô-đun nút) để cài đặt bootstrap trực tiếp vào dự án

Sự khác nhau giữa CDN và npm là nếu chúng ta sử dụng CDN thì chúng ta sẽ nhúng đường link bootstrap vào dự án. Khi trang web tải lên, nó sẽ lên mạng và nhúng tệp bootstrap từ CDN vào trang web. Còn nếu dùng npm thì chúng ta sẽ tải mã nguồn của bootstrap vào project của mình và chúng ta chỉ link tới file bootstrap trong project của 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

cài đặt npm -g @angular/cli

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

ng góc-bootstrap-demo mới

• 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 mà 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

  
    
    Angular Getting Started
    

    
    
    
    

    
	
	
	
	
	
	

  
  
    
  

4 Tạo ứng dụng Angular và sử dụng Bootstrap từ npm
Bước 1. Cài đặt Angular CLI
cài đặt npm -g @angular/cli
Bước 2. Tạo dự án bằng góc
ng góc-bootstrap-demo mới
Bước 3. Cài đặt bootstrap và jquery bằng lệnh npm
cài đặt npm – lưu jquery bootstrap



Bước 4. Nhúng bootstrap và jquery. Open file angle. json và thêm vào đường dẫn đến tệp bootstrap và jquery mà mình vừa sử dụng npm để thu hút 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 dùng Bootstrap để làm frontend, tuy nhiên ngoài Bootstrap thì mình còn nhiều framework làm frontend khác nữa. Ưu điểm mạnh nhất của framework này là dễ sử dụng và tiết kiệm thời gian để phát triển
 
Các ứng dụng một trang trở nên phổ biến trong vài năm gần đây, vì rất nhiều framework front-end đã được giới thiệu như Angular, React, Vue. js, Ember, v. v. Do đó, jQuery không phải là yêu cầu cần thiết để xây dựng ứng dụng web. Ngày nay, React có khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web và Bootstrap trở thành khung CSS phổ biến nhất. Vì vậy, cần phải tìm hiểu theo nhiều cách khác nhau để Bootstrap có thể được sử dụng trong các ứng dụng React, đó là mục đích chính của phần này.
Các bài viết liên quan
Dart Libraries – Thư viện Dart
ReactJS là gì? 
Hướng dẫn cài đặt Nodejs
Nút. js Trình quản lý gói
State and Props in react
Tóm tắt nội dung
Thêm Bootstrap cho React
Sử dụng Bootstrap CDN
Bootstrap dưới dạng phụ thuộc
Gói React Bootstrap
Cài đặt React Bootstrap
Nhập Bootstrap
Use reactstrap
Nhập Bootstrap
Thêm Bootstrap cho React
Chúng ta có thể thêm Bootstrap vào ứng dụng React theo một số cách. Dưới đây là ba cách phổ biến nhất
Sử dụng Bootstrap CDN
Bootstrap dưới dạng phụ thuộc
Gói React Bootstrap
Sử dụng Bootstrap CDN
Đây là cách dễ nhất để thêm Bootstrap vào ứng dụng React. Không cần cài đặt hoặc tải xuống Bootstrap. Chúng ta có thể chỉ cần đặt một  vào phần  của tệp index.html của ứng dụng React như được hiển thị trong đoạn mã sau.
 
Nếu có nhu cầu sử dụng các thành phần Bootstrap phụ thuộc vào JavaScript / jQuery trong ứng dụng React, chúng ta cần đưa jQuery, Popper.js và Bootstrap.js vào tài liệu. Thêm các lần nhập sau vào các thẻ   
  
  
  
  



Trong đoạn mã trên, chúng tôi đã sử dụng phiên bản mỏng của jQuery, mặc dù chúng tôi cũng có thể sử dụng phiên bản đầy đủ. Bây giờ, Bootstrap đã được bổ sung thành công trong ứng dụng React và chúng ta có thể sử dụng tất cả các CSS tiện ích và các thành phần giao diện người dùng có sẵn từ Bootstrap trong ứng dụng React
Bootstrap dưới dạng phụ thuộc
Nếu chúng ta đang sử dụng một công cụ xây dựng hoặc một gói mô-đun chương trình như Webpack, thì hãy nhập Bootstrap làm phụ thuộc là tùy chọn ưu tiên để thêm Bootstrap vào ứng dụng React. Chúng tôi có thể cài đặt Bootstrap như một phụ thuộc cho ứng dụng React. Để cài đặt Bootstrap, hãy chạy các lệnh sau trong dòng lệnh
$ npm install bootstrap --save  
Sau khi cài đặt Bootstrap, chúng ta có thể nhập nó vào mục nhập tệp ứng dụng React. Nếu dự án React được tạo bằng công cụ tạo-ứng dụng phản ứng, hãy mở tệp src / index. js and add code after
import 'bootstrap/dist/css/bootstrap.min.css';  
Giờ đây, chúng ta có thể sử dụng các lớp CSS và các tiện ích hữu ích trong ứng dụng React. Ngoài ra, nếu chúng ta muốn sử dụng các thành phần JavaScript, chúng ta cần cài đặt các gói jquery và popper. js từ npm. Để cài đặt các gói sau, hãy chạy lệnh sau trong dòng lệnh
________số 8
Tiếp theo, chuyển đến tệp src / index. js và thêm các lần nhập sau
import $ from 'jquery';  
import Popper from 'popper.js';  
import 'bootstrap/dist/js/bootstrap.bundle.min';  
Bây giờ, chúng ta có thể sử dụng Bootstrap JavaScript Components trong ứng dụng React
Gói React Bootstrap
Gói React Bootstrap là cách phổ biến nhất để thêm bootstrap vào ứng dụng React. Có rất nhiều gói Bootstrap được xây dựng bởi cộng đồng, với mục đích xây dựng lại các thành phần Bootstrap như các thành phần React. Hai gói Bootstrap phổ biến nhất là



phản ứng-bootstrap. Đây là bản tái hiện hoàn chỉnh của các thành phần Bootstrap dưới dạng các thành phần React. Nó không cần bất kỳ phụ thuộc nào như bootstrap. js hoặc jQuery. Nếu thiết lập React và React-Bootstrap được cài đặt, chúng ta có mọi thứ chúng ta cần
dây phản ứng. Đây là một thư viện chứa các thành phần React Bootstrap 4 thiên về thành phần và điều khiển. Nó không phụ thuộc vào JavaScript jQuery hoặc Bootstrap. Tuy nhiên, react-popper cần thiết để xác định vị trí nội dung nâng cao như Chú giải công cụ, Cửa sổ bật lên và Trình đơn thả xuống tự động
Cài đặt React Bootstrap
Hãy để chúng tôi tạo một ứng dụng React mới bằng cách sử dụng lệnh tạo-ứng dụng phản ứng như sau

  
    
    Angular Getting Started
    

    
    
    
    

    
	
	
	
	
	
	

  
  
    
  

0
Sau khi tạo ứng dụng React, cách tốt nhất để cài đặt Bootstrap là thông qua gói npm. Để cài đặt Bootstrap, hãy điều hướng đến thư mục ứng dụng React và chạy lệnh sau

  
    
    Angular Getting Started
    

    
    
    
    

    
	
	
	
	
	
	

  
  
    
  

1
Nhập Bootstrap
Bây giờ, mở tệp src / index. js and add after code to input file Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';  
Chúng tôi cũng có thể nhập các thành phần riêng lẻ như nhập {SplitButton, Dropdown} từ 'react-bootstrap'; . Nó cung cấp các thành phần công cụ mà chúng ta cần sử dụng và có thể giảm đáng kể số lượng mã
Trong ứng dụng React, hãy tạo một tệp mới có tên ThemeSwitcher. js trong thư mục src và đặt mã sau