Hướng dẫn biểu mẫu React Bootstrap
Các ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, tùy chọn bố cục và các thành phần tùy chỉnh để tạo nhiều biểu mẫu khác nhau Show
Tổng quanThành phần
Thành phần 1 vào giá trị đó giống như cách bạn làm với một đầu vào không được kiểm soát, sau đó gọi 2 để lấy nút DOM. Sau đó, bạn có thể tương tác với nút đó như với bất kỳ đầu vào không được kiểm soát nào khác Nếu ứng dụng của bạn chứa một số lượng lớn các nhóm biểu mẫu, chúng tôi khuyên bạn nên xây dựng một thành phần cấp cao hơn đóng gói một nhóm trường hoàn chỉnh để hiển thị nhãn, điều khiển và bất kỳ thành phần cần thiết nào khác. Chúng tôi không cung cấp tính năng vượt trội này vì thành phần của các nhóm trường đó quá cụ thể đối với một ứng dụng riêng lẻ để chấp nhận một giải pháp phù hợp với một kích cỡ tốt biểu mẫu bị vô hiệu hóaThêm thuộc tính boolean 3 vào đầu vào để ngăn chặn tương tác của người dùng và làm cho nó có vẻ nhẹ hơn Văn bản biểu mẫu bên dưới đầu vào có thể được tạo kiểu với Chúng tôi sẽ không bao giờ chia sẻ email của bạn với bất kỳ ai khác Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội tuyến điển hình nào (có thể là Ngày 23 tháng 6 năm 2022 13 phút đọc 3735 Ghi chú của biên tập viên. Bài đăng này đã được cập nhật vào ngày 23 tháng 6 năm 2022 để đảm bảo tất cả thông tin đều cập nhật và thêm một phần về Sự phổ biến ngày càng tăng của các ứng dụng một trang trong vài năm qua đã dẫn đến một loạt các khung JavaScript, trong đó phổ biến nhất là React. Điều này trùng hợp với sự xuất hiện của các khung CSS được thiết kế để giúp các nhà phát triển xây dựng các ứng dụng web đáp ứng Nếu React là khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web, thì Bootstrap là khung CSS phổ biến nhất, cung cấp năng lượng cho hàng triệu trang web trên internet. Trong hướng dẫn này, chúng ta sẽ đi qua
Nếu bạn mới bắt đầu với những framework này, tôi khuyên bạn nên đọc lướt qua tài liệu chính thức về React và Bootstrap. Tôi cũng khuyến khích bạn xem video hướng dẫn toàn diện bên dưới để tìm hiểu sâu hơn Giới thiệu sơ lược về JavaScript và CSS frameworksCó nhiều khung JavaScript bạn có thể chọn, bao gồm Angular, React, Vue. js, Ember — danh sách tiếp tục. Nhờ những tùy chọn phong phú này, không còn cần thiết phải sử dụng thư viện DOM, chẳng hạn như jQuery, để xây dựng các ứng dụng web Ngoài ra, nếu bạn là nhà phát triển giao diện người dùng, gần như chắc chắn bạn đã sử dụng hoặc ít nhất đã nghe nói về Bootstrap, Foundation và Bulma. Đây đều là các khung CSS đáp ứng (ưu tiên thiết bị di động) với các tính năng mạnh mẽ và tiện ích tích hợp Như chúng tôi đã đề cập, React và Bootstrap hiện là các khung JavaScript và CSS phổ biến nhất, tương ứng. Tiếp theo, hãy xem cách thêm Bootstrap vào React Cách thêm Bootstrap vào ReactBa cách phổ biến nhất để thêm Bootstrap vào ứng dụng React của bạn là
Hãy xem xét từng chi tiết này một cách chi tiết hơn Thêm Bootstrap vào React bằng Bootstrap CDNBootstrap CDN là cách dễ nhất để thêm Bootstrap vào ứng dụng React của bạn. Không cần cài đặt thêm hoặc tải xuống Bạn sẽ chỉ phải bao gồm một liên kết đến CDN trong phần đầu của tệp nhập ứng dụng của mình. Trong một ứng dụng React điển hình được tạo bằng 6, ứng dụng đó sẽ nằm trong tệp 7 Vì chúng tôi muốn bao gồm phiên bản ổn định hiện tại của Bootstrap, liên kết của chúng tôi sẽ trông như thế này [email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> Nếu dự án của bạn cũng yêu cầu sử dụng các thành phần JavaScript đi kèm với Bootstrap, chẳng hạn như chuyển đổi phương thức, danh sách thả xuống hoặc thanh điều hướng, chúng tôi sẽ cần liên kết tệp 8, được biên dịch sẵn với Popper. js Chúng tôi có thể làm điều này bằng cách đặt thẻ 9 sau đây ở gần cuối trang đánh dấu mục nhập của chúng tôi, ngay trước khi đóng thẻ npm install bootstrap # OR yarn add bootstrap0 Sau khi liên kết CSS Bootstrap và CDN Javascript đi kèm, mã hoàn chỉnh cho tệp 7 của chúng ta sẽ như thế này
Giờ đây, bạn có thể bắt đầu sử dụng các lớp Bootstrap tích hợp sẵn và các thành phần JavaScript trong các thành phần ứng dụng React của mình Nhập Bootstrap vào React dưới dạng phụ thuộcNếu bạn đang sử dụng công cụ xây dựng hoặc gói mô-đun, chẳng hạn như npm install bootstrap # OR yarn add bootstrap2, thì đây sẽ là tùy chọn ưu tiên để thêm Bootstrap vào ứng dụng React của bạn. Bạn có thể dễ dàng bắt đầu cài đặt bằng cách chạy bên dưới npm install bootstrap # OR yarn add bootstrap Lệnh này sẽ cài đặt phiên bản Bootstrap mới nhất. Sau khi quá trình cài đặt hoàn tất, chúng tôi có thể đưa nó vào tệp mục nhập của ứng dụng // Bootstrap CSS import "bootstrap/dist/css/bootstrap.min.css"; // Bootstrap Bundle JS import "bootstrap/dist/js/bootstrap.bundle.min"; Trong trường hợp dự án được xây dựng bằng 6, dự án đó sẽ nằm trong tệp npm install bootstrap # OR yarn add bootstrap4. Toàn bộ nội dung của tệp sẽ trông như thế này sau khi nhập import React from "react"; import ReactDOM from "react-dom/client"; // Bootstrap CSS import "bootstrap/dist/css/bootstrap.min.css"; // Bootstrap Bundle JS import "bootstrap/dist/js/bootstrap.bundle.min"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( Như được hiển thị trong mã ở trên, chúng tôi đã nhập cả Bootstrap CSS và tệp JavaScript được liên kết của nó. Chúng tôi cũng đảm bảo nhập Bootstrap trước tệp CSS chính của chúng tôi npm install bootstrap # OR yarn add bootstrap5 để dễ dàng thay đổi kiểu dáng mặc định của Bootstrap với tệp này như mong muốn Khi quá trình này hoàn tất, chúng ta có thể tiếp tục và bắt đầu sử dụng các lớp Bootstrap tích hợp trong các thành phần ứng dụng React của mình Cài đặt gói React Bootstrap, chẳng hạn như
|