Share Thiết kế giao diện ứng dụng web chuyên nghiệp với React Bootstrap

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Hiện nay có nhiều thư viện cung cấp giao diện cho React, một trong số đó phải kể đến là Material-UI mà tôi đã giới thiệu với các bạn ở bài viết "Thiết kế ứng dụng web chuyên nghiệp với React UI framework Material-UI", bài viết này tôi giới thiệu tiếp với các bạn một thư viện phổ biến rất được ưa thích khác đó là React Bootstrap. Với tên gọi React Bootstrap, các bạn sẽ liên hệ với thư viện Bootstrap là một CSS framework được cung cấp bởi Twitter rất nổi tiếng, và chính xác như vậy, thư viện React Bootstrap là một front-end framework cho React được thiết kế dựa trên CSS framework Bootstrap nên nó kế thừa toàn bộ những gì mà Bootstrap hỗ trợ.

Để sử dụng thư viện React Bootstrap, các bạn cài đặt với dòng lệnh NPM như sau:
Code:
npm install react-bootstrap bootstrap
Các bạn thấy với dòng lệnh NPM trên thì ngoài việc cài đặt bộ thư viện React Bootstrap thì còn phải cài thêm bộ thư viện Bootstrap, đây là yêu cầu bắt buộc để sử dụng React Bootstrap.

Sau khi cài đặt React Bootstrap và Bootstrap thành công, các bạn cần nạp thư viện Bootstrap trước với dòng mã lệnh như sau:
JavaScript:
import 'path/to/bootstrap.min.css';
Và bây giờ các bạn có thể sử dụng các thành phần của React Bootstrap, ví dụ tôi sử dụng thành phần Button như sau:
JavaScript:
import Button from 'react-bootstrap/Button';
Sau khi nạp thành phần Button thì các bạn có thể sử dụng Button như ví dụ sau:
JavaScript:
<Button variant="primary">Primary</Button>
Trên đây chỉ là một ví dụ đơn giản, các bạn có thể tìm hiểu thêm về thư viện React Bootstrap tại địa chỉ https://react-bootstrap.github.io.
 
Back
Top