Tôi có thể sử dụng các biểu tượng bootstrap trong phản ứng không?
Đây là một trang web hoàn chỉnh mà tôi đã xây dựng, tất nhiên, bên dưới những thành phần này là khá nhiều mã viết tay Show
Để tham khảo, trang trông như thế này Bootstrap có nhiều thứ nhưng trong trường hợp này, chúng tôi sẽ coi nó như một thư viện cho phép chúng tôi nhập và sử dụng các thành phần khác nhau để tạo giao diện người dùng trong các ứng dụng React của mình. Điều này giúp tiết kiệm một lượng thời gian đáng kể vì các nhà phát triển không cần phải viết mọi thứ từ đầu Tôi quá hào hứng để giải thích cho bạn nghe, chúng ta hãy bắt đầu
Điều hướng đến thư mục mong muốn của bạn và tạo dự án React bằng cách nhập lệnh sau vào terminal hoặc cmd npx create-react-app cartpage-app Xin lưu ý rằng quá trình xây dựng này có thể mất một chút thời gian tùy thuộc vào tốc độ internet của bạn Sau khi cài đặt hoàn tất, hãy mở thư mục trong trình chỉnh sửa mã của bạn. Sau đó, gõ npm start để khởi chạy máy chủ phát triển. Bạn có thể xem ứng dụng React mặc định bằng cách điều hướng đến http. //máy chủ cục bộ. 3000/ trong trình duyệt của bạn Bước 2 - Cài đặt BootstrapChúng ta phải cài đặt Material-UI để truy cập các chức năng hoặc thành phần khác nhau của nó. Mở thiết bị đầu cuối của bạn và đảm bảo rằng bạn đang ở trong thư mục chính của ứng dụng Sau đó, trong thiết bị đầu cuối của bạn, hãy cài đặt Vật liệu bằng cách gõ lệnh sau npm install react-bootstrap@next [email protected] Bước 2. i — Cài đặt Phông chữ Tuyệt vờiĐể bắt đầu, bạn cần cài đặt các gói sau vào dự án của mình bằng npm. Dưới đây là các ví dụ cài đặt mọi thứ bạn cần và kiểu biểu tượng chắc chắn bằng cách sử dụng từng trình quản lý gói tương ứng npm i — save @fortawesome/fontawesome-svg-corenpm install — save @fortawesome/free-solid-svg-iconsnpm install — save @fortawesome/react-fontawesome Vì lợi ích của dự án này, điều này là đủ, nhưng có những cài đặt khác cần thiết cho các biểu tượng thương hiệu hoặc những thứ khác Chúng tôi có thể xác nhận rằng các phụ thuộc trên đã được cài đặt bằng cách kiểm tra gói. json. Điều này được hiển thị dưới đây Bước cuối cùng là nhập các tệp bootstrap trong Ứng dụng của chúng tôi. js như thế này Hãy chia nhỏ các thành phần và xem những gì chúng ta có thể làm
3i. THANH NAVĐiều đầu tiên là tạo thành phần thanh điều hướng và nhập nó vào Ứng dụng của chúng tôi. tập tin js. Một cái gì đó như thế này Lưu ý rằng Nav. js nằm trong thư mục thành phần và điều đó rất hữu ích khi nhập nó như đã thực hiện ở dòng 2 Và bây giờ cho mã THÀNH PHẦN UI BOOTSTRAPMột danh sách đầy đủ các thành phần có thể được tìm thấy ở đây. Điều bạn cần biết là để nhập các thành phần Bootstrap, tên của thành phần thường là tên chính của thẻ thành phần như đã thấy trong trường hợp của Navbar ở trên. Trên dòng 16 trong hình ảnh của gói. json, Reac-bootstrap đã cài đặt là thứ chúng tôi sử dụng để trích xuất một thành phần nhập khẩuThành phần phải được gọi với từ khóa nhập khẩu phổ biến trong phản ứng và từ vị trí 'reac-bootstrap/Componentas đã thấy trên Dòng 2 bên dưới Điều này là cơ bản nhất có thể khi sử dụng Bootstrap với React Bây giờ chúng ta đã hiểu điều đó, hãy bắt đầu mọi thứ một chút 3ii. THÀNH PHẦN CARTITEMGHI CHÚ
import { Button, Container, Card, Image } from ‘react-bootstrap’; Hệ tư tưởng tương tự được sử dụng khi nhập các biểu tượng phông chữ tuyệt vời. Tuy nhiên có một nhược điểm. ”Nó có thể tăng số lượng mã bạn gửi cho khách hàng. ” FONT THÀNH PHẦN BIỂU TƯỢNG TUYỆT VỜIKhi nói đến phông chữ tuyệt vời, như thường lệ, tất cả những gì bạn cần biết là tên lớp của biểu tượng và phần còn lại là đi dạo trong công viên Đầu tiên như đã thấy ở dòng 8 và 9, Font awesome có hai lần nhập, chính thành phần đó import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’ và sau đó là biểu tượng import { faPlusCircle, faMinusCircle, faTrash, faLongArrowAltLeft } from ‘@fortawesome/free-solid-svg-icons’ Có thể nhận thấy rằng các tên biểu tượng tương tự như các lớp thông thường được sử dụng để gọi các biểu tượng bằng cách sử dụng thẻ, nhưng quy ước đặt tên của nó cũng là PascalCase. Đây là một ví dụ sử dụng biểu tượng dấu trừ Bootstrap có tương thích với phản ứng không?Bootstrap có thể được sử dụng trực tiếp trên các thành phần và thành phần trong ứng dụng React của bạn bằng cách áp dụng các lớp tích hợp giống như bất kỳ lớp nào khác.
Tôi có thể sử dụng Bootstrap 5 với phản ứng không?Dưới đây là một số cách sử dụng Bootstrap 5 với React JS. Tải xuống tệp nguồn hoặc mã được biên dịch thô và đưa mã cục bộ vào ứng dụng React JS của bạn . Sử dụng Mạng phân phối nội dung (CDN) qua jsDeliver phiên bản CSS và JS được lưu trong bộ nhớ đệm của Bootstrap cho dự án ứng dụng React JS của bạn.
Bạn có thể sử dụng vanilla Bootstrap Với phản ứng không?Chúng tôi có thể sử dụng biểu định kiểu Bootstrap đơn giản cho các ứng dụng web nếu yêu cầu bị giới hạn ở lưới 12 cột dễ tiếp thu hoặc các thành phần không liên quan đến jQuery . Mặt khác, có các thư viện khác nhau có thể cho phép sử dụng Bootstrap cùng với React.
Liệu phản ứng đã được xây dựngReact cung cấp thư viện biểu tượng tích hợp sẵn , bằng cách sử dụng thư viện này, chúng tôi có thể đưa bất kỳ số lượng biểu tượng nào vào dự án của mình. |