ReactJS Bootstrap là thư viện thành phần bộ công cụ front-end được phát triển bởi React để tạo các phần tử dựa trên thành phần đáp ứng. Nó là một bản sao của Javascript Bootstrap và cung cấp các thành phần năng động, dễ tích hợp và có thể truy cập để tạo thuận lợi cho quá trình phát triển của chúng tôi. Một số thành phần React được sử dụng rộng rãi từ ReactJS Bootstrap là các nút, trường nhập liệu, huy hiệu, bảng, v.v. Sau khi đọc bài viết này, bạn sẽ có thể sử dụng React Bootstrap trong các ứng dụng phản ứng của mình như một chuyên gia
Phản ứng Bootstrap là gì?
Javascript Bootstrap sử dụng JQuery để cấp nguồn cho giao diện thành phần của nó. JQuery thao tác trực tiếp Mô hình đối tượng tài liệu [DOM], vì vậy Javascript Bootstrap mâu thuẫn với cách tiếp cận khai báo mà ReactJS tuân theo. Đôi khi bạn đã thấy Javascript Bootstrap được sử dụng bên trong các Dự án ReactJS, nhưng các thành phần hỗ trợ của chúng là các biểu định kiểu Vanilla Bootstrap đơn giản và không gọi JQuery. Trong những trường hợp đó, bạn có thể sử dụng Javascript Bootstrap. Tuy nhiên, các thành phần React dựa trên JQuery không thể tích hợp theo cách như vậy. Do đó, các nhà phát triển ứng dụng React đã phát triển thư viện thành phần của họ tuân theo khái niệm Virtual DOM và không liên quan đến JQuery
Làm cách nào để cài đặt Bootstrap trong React?
Có nhiều cách khác nhau để tích hợp bootstrap vào ứng dụng phản ứng của bạn; . Để cài đặt tất cả các phụ thuộc cần thiết, bạn có thể sử dụng npm install bootstrap hoặc trình quản lý gói yarn hoặc đặt toàn cục của trình duyệt bằng ReactJS Bootstrap CDN
NPM cài đặt phương pháp bootstrap.
npm install react-bootstrap bootstrap
Sử dụng trình quản lý gói Yarn.
yarn add react-bootstrap
phương thức CDN.
Làm cách nào để nhập bootstrap trong phản ứng?
Khi bạn đã thiết lập tất cả các phụ thuộc vào các mô-đun nút của mình, tiếp theo, bạn cần thiết lập các phụ thuộc biểu định kiểu. Bạn có thể nhập chúng vào src/index của mình. js hoặc ứng dụng js hoặc bạn có thể thêm CDN trong toàn cầu trình duyệt của mình
Sử dụng tính năng nhập vào Ứng dụng của bạn. js hoặc src/chỉ mục. js cho CSS.
import 'bootstrap/dist/css/bootstrap.min.css';
Sử dụng tính năng nhập vào Ứng dụng của bạn. scss cho SASS.
Ghi chú. Bạn cần nhập tệp sass vào Ứng dụng của mình. js/chỉ mục. tập tin js
@import "~bootstrap/scss/bootstrap";
Sử dụng CDN
Sau khi thêm các mô-đun nút này và nhập CSS, giờ đây bạn có thể sử dụng ReactJS Bootstrap trong Ứng dụng React và ứng dụng React của mình.
Sử dụng các thành phần ReactJS sau khi quá trình tích hợp của bạn hoàn tất
Có rất nhiều thành phần mà ReactJS Bootstrap cung cấp. Hãy để chúng tôi xem một số thành phần thường được sử dụng và thảo luận về cách nó tăng thêm giá trị cho ứng dụng React và ứng dụng React của bạn
Cách sử dụng Bootstrap trong React
nút.
React Bootstrap hỗ trợ các nút được thiết kế với các biến thể khác nhau, bao gồm nhiều kích cỡ và trạng thái
Để sử dụng Nút trong Thành phần của bạn, bạn cần nhập thành phần nút và sử dụng bộ chọn được cung cấp
import Button from "react-bootstrap/Button";Button
tab.
Bạn có thể tạo các giao diện theo thẻ động bằng cách sử dụng ReactJS Bootstrap, với các thành phần cấp cao để tạo nhanh các Điều hướng
Để sử dụng các Tab bên trong thành phần của bạn, bạn cần nhập Tab và thành phần Tab, đồng thời đặt các phím sự kiện và Điều hướng hoạt động mặc định tương ứng
import Tab from "react-bootstrap/Tab"; import Tabs from "react-bootstrap/Tabs";
Cái bàn.
Bạn có thể tạo Bảng có nhiều biến thể khác nhau với nhiều tùy chọn với chủ đề, đường viền và khả năng phản hồi.
Để sử dụng Bảng, hãy nhập nó vào bên trong thành phần của bạn. Thêm cặp td và tr tùy theo yêu cầu và cấu trúc của bạn
________số 8
thả xuống.
Danh sách thả xuống là các phần tử giao diện người dùng có thể chuyển đổi với một danh sách được hiển thị xuyên suốt để lựa chọn. Thành phần này sử dụng Popper JS, cung cấp tính năng định vị động và phát hiện khung nhìn
Để sử dụng menu thả xuống, hãy nhập thành phần Dropdown trong thành phần của bạn. Bạn có thể sử dụng các thuộc tính và đạo cụ do thành phần cung cấp để tùy chỉnh thêm chủ đề, biến thể và nhiều tính năng khác
import Dropdown from "react-bootstrap/Dropdown";Dropdown Button Action Another action Something else
cảnh báo.
Cảnh báo cung cấp thông báo phản hồi theo ngữ cảnh cho các hành động của người dùng và có sẵn trong nhiều biến thể. Bạn có thể đặt bất kỳ chuỗi độ dài nào bên trong nó và nó sẽ đảm nhận khả năng phản hồi
Để sử dụng Cảnh báo, hãy nhập nó vào bên trong thành phần của bạn. Bạn cần cung cấp các biến thể làm đạo cụ cho thành phần
yarn add react-bootstrap0
Có nhiều thành phần có giá trị và dễ sử dụng được cung cấp bởi React Bootstrap. Chúng tôi đã thảo luận về một số điều ở trên và xem xét các cách khác nhau mà bạn có thể sử dụng chúng với các thuộc tính và đạo cụ phù hợp. Chúng ta hãy xem một loạt chúng trong nháy mắt. Bạn có thể kiểm tra tất cả chúng ở đây
yarn add react-bootstrap1
Làm cách nào để sửa đổi thành phần được hiển thị hoặc thẻ HTML?
Bạn có thể muốn cập nhật các thành phần giao diện người dùng mà bạn đã hiển thị trên giao diện người dùng nhiều lần. Cách tốt nhất để làm như vậy là giữ nguyên kiểu dáng của thành phần kết xuất và chuyển đổi thành phần kết xuất. Bạn cần sử dụng API prop “as” trong các thành phần Bootstrap ReactJS của mình
Hãy xem một ví dụ để hiểu điều này tốt hơn.
Nhập một thành phần ReactJs Bootstrap Nav
yarn add react-bootstrap2
Bây giờ, hãy tạo một Thành phần Nav đơn giản
yarn add react-bootstrap3
Bây giờ, đầu ra trông giống như thế này.
Giả sử rằng bây giờ bạn phải giữ kiểu dáng của Điều hướng, nhưng bạn muốn hiển thị hoặc chuyển một trong các Thanh Điều hướng thành một nút. Có thể chuyển đổi bằng cách sử dụng chỗ dựa “as”
Hãy để chúng tôi tạo một Phần tử nút
yarn add react-bootstrap4
Bây giờ, hãy sử dụng prop “as” bên trong một trong các Thanh điều hướng của thành phần Điều hướng
yarn add react-bootstrap5
Đầu ra kết quả sẽ như thế này.
Quản lý khả năng truy cập trong các thành phần Bootstrap của ReactJs.
React Bootstrap có “Khả năng truy cập theo mặc định. ” Một người sử dụng các thành phần bên trong Ứng dụng không cần phải lo lắng về điều đó. Theo tài liệu React Bootstrap,
“Mỗi thành phần được triển khai có tính đến khả năng tiếp cận. Kết quả là một tập hợp các thành phần có thể truy cập theo mặc định, hơn những gì có thể từ Bootstrap đơn giản. ”
Mặc dù, nếu bạn cần quản lý và kiểm soát khả năng truy cập của các Thành phần giao diện người dùng mà bạn đang hiển thị với sự trợ giúp của Bootstrap ReactJS, bạn có thể xác định rõ ràng các chỉ mục tab và nhãn aria theo yêu cầu của mình
Thêm chủ đề tùy chỉnh vào ReactJS Bootstrap
ReactJS Bootstrap tương thích cao với các chủ đề Javascript Bootstrap hiện có. Bạn chỉ cần sử dụng quy trình cài đặt cơ bản do Javascript Bootstrap cung cấp để có được điều đó. Tuy nhiên, trong trường hợp bạn cần thiết lập chủ đề tùy chỉnh cho thành phần của mình, bạn cần ghi đè chủ đề của Bootstrap.
Hãy để chúng tôi xem làm thế nào bạn có thể làm điều đó
- Trước tiên, bạn cần cài đặt sass và tạo tệp SCSS của mình để viết mã ghi đè
yarn add react-bootstrap6
2. Tiếp theo, bạn cần nhập tệp CSS bootstrap vào tệp sass chủ đề tùy chỉnh của mình
yarn add react-bootstrap7
3. Cuối cùng, bạn cần nhập tệp này vào chỉ mục của mình. js/Ứng dụng. js thay vì tệp CSS bootstrap để làm cho tệp chủ đề tùy chỉnh có hiệu lực
Ghi chú. Bạn cần thêm ký hiệu '~' trong khi nhập bootstrap để giải quyết các mô-đun nút trong dự án của mình
Phản ứng Bootstrap với các trạng thái
React Bootstrap tuân theo hành vi của React Javascript, cho phép bạn chuyển các props tới các thành phần Bootstrap ReactJS. Những thứ này có thể làm cho các thành phần rất linh hoạt khi được sử dụng với các trạng thái. Việc thêm các trạng thái làm chỗ dựa cho thành phần sẽ tránh thao tác trực tiếp với trạng thái DOM và quản lý hiệu quả các thành phần có độ phức tạp cao
Hãy để chúng tôi xem một ví dụ.
yarn add react-bootstrap8
Trong ví dụ trên, mở là trạng thái quản lý việc bật tắt Thành phần có thể thu gọn
Thêm Chuyển tiếp vào các thành phần Bootstrap ReactJS của bạn.
You can add fundamental CSS transitions to your bootstrap components. React Bootstrap has bundled all of them into a composable component, a commonly used animation wrapper in react.
Có 2 hiệu ứng chuyển cảnh thường được sử dụng là Collapse và Fade
Thu gọn thực hiện quá trình chuyển đổi theo chiều dọc hoặc chiều ngang và mờ dần phát theo độ mờ của vùng chứa trong quá trình chuyển đổi. Hãy xem cách bạn có thể nhập chúng vào dự án của mình
yarn add react-bootstrap9
Bây giờ, chúng ta hãy xem một ví dụ cho Fade Transition
0
Trong đoạn mã trên, một trình xử lý được gắn vào nút, chuyển đổi khả năng hiển thị của Thành phần mờ dần, tùy thuộc vào trạng thái
Đầu ra trông giống như thế này
Bảo trì tỷ lệ trong ReactJS Bootstrap.
Bạn có thể thêm Tỷ lệ khung hình cho các thành phần bạn đang sử dụng từ React Bootstrap. Các tỷ lệ khung hình này có thể được xác định trước hoặc tùy chỉnh, tùy thuộc vào yêu cầu của bạn và bạn cần nhập tỷ lệ này vào thành phần của mình để sử dụng Tỷ lệ trước
1
Tỷ lệ được xác định trước.
2
Tỷ lệ tùy chỉnh.
3
Phần kết luận
Tóm lại, ReactJS Bootstrap cung cấp nhiều thành phần và tính linh hoạt để liên kết chúng với Thành phần React của bạn. Nó di chuyển cùng với kiến trúc ReactJS, tuân theo Virtual DOM và quản lý trạng thái. Nó có các tính năng khả năng truy cập và phản hồi được xác định trước giúp điều này thậm chí còn mạnh mẽ hơn. Bạn cũng có thể sử dụng mẫu ReactJS Bootstrap trong ứng dụng React của mình để sử dụng các trang web sẵn sàng sử dụng nhằm phát triển nhanh hơn. Hai trong số các mẫu ReactJs Bootstrap được sử dụng rộng rãi là Reactify và Architect UI
Cuối cùng, tôi hy vọng blog này đã cung cấp cho bạn một số hiểu biết sâu sắc hơn về ReactJS Bootstrap và các thành phần của nó. Bây giờ bạn có thể tự tin bắt đầu sử dụng Bootstrap với React. Nếu bạn muốn chuyển đổi mã Figma sang mã HTML, hãy xem CopyCat