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
Tổng quan#
Thành phần hiển thị điều khiển biểu mẫu với kiểu dáng Bootstrap. Thành phần
bao bọc một điều khiển biểu mẫu với khoảng cách phù hợp, cùng với hỗ trợ cho nhãn, văn bản trợ giúp và trạng thái xác thực. Để đảm bảo khả năng tiếp cận, hãy đặt
controlId
trên và sử dụng
cho nhãn
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
Email address
We'll never share your email with anyone else.
Password
export default BasicExample;
Thành phần hiển thị trực tiếp thành phần
hoặc thành phần được chỉ định khác. Nếu bạn cần truy cập giá trị của một
không được kiểm soát, hãy đính kèm một
1 vào giá trị đó như cách bạn làm với một đầu vào không được kiểm soát, sau đó gọiimport Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
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ácimport Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
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óa
Thê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ơnimport Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
React-Bootstrap tương thích với nhiều phiên bản Bootstrap khác nhau. Do đó, bạn cần đảm bảo rằng mình đang sử dụng đúng tổ hợp các phiên bản
Xem bảng bên dưới về phiên bản React-Bootstrap bạn nên sử dụng trong dự án của mình
Phiên bản BootstrapPhiên bản React-BootstrapDocumentationv5. x2. xLinkv4. x1. xLinkv3. x0. 33. x [không được duy trì]Liên kếtDi chuyển từ các phiên bản trước
Bootstrap 4 đến Bootstrap 5
Nếu bạn muốn cập nhật React-Bootstrap trong một dự án hiện có để sử dụng Bootstrap 5, vui lòng đọc tài liệu của chúng tôi để chuyển sang React-Bootstrap V2
Bootstrap 3 đến Bootstrap 4
Nếu bạn muốn cập nhật React-Bootstrap trong một dự án hiện có để sử dụng Bootstrap 4, vui lòng đọc tài liệu của chúng tôi để chuyển sang React-Bootstrap V1
mô-đun liên quan
- Reac-router-bootstrap – Tích hợp với React Router
- Các thành phần Bootstrap React tuyệt vời - Các thành phần bổ sung như thanh điều hướng ngoài khung, công tắc và thanh trượt
thiết lập cục bộ
Sợi là lựa chọn quản lý gói của chúng tôi ở đây. Xem hướng dẫn thiết lập tại đây nếu bạn chưa cài đặt. Sau đó, bạn có thể chạy
3 để cài đặt tất cả các phụ thuộc cần thiếtimport Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
Từ đó bạn có thể
- Chạy thử nghiệm một lần với
4 [Hoặc chạy chúng ở chế độ đồng hồ vớiimport Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
5]import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
- Bắt đầu một bản sao cục bộ của trang web tài liệu với
6import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
- Hoặc xây dựng một bản sao cục bộ của thư viện với
7import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
Ví dụ về hộp cát mã
Nhấp vào đây để khám phá một số ví dụ về React-Bootstrap CodeSandbox
Nhấp vào đây để tự động mở CodeSandbox bằng React-Bootstrap CodeSandbox Ví dụ Kho lưu trữ GitHub dưới dạng không gian làm việc
Ghi chú. Nếu trước đó bạn đã cài đặt
8 trên toàn cầu, bạn nên gỡ cài đặt gói này để đảm bảo npx luôn sử dụng phiên bản mới nhất củaimport Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
8. Để gỡ cài đặt, hãy chạy lệnh này.import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
0import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
Chạy ứng dụng React
Chạy lệnh này để di chuyển đến thư mục
1import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
Chạy lệnh này để thực thi ứng dụng React
1import Form from 'react-bootstrap/Form';
function FormDisabledInputExample[] {
Disabled input
Disabled select menu
export default FormDisabledInputExample;
Một cửa sổ trình duyệt mới sẽ bật lên với Ứng dụng React mới được tạo của bạn. Nếu không, hãy mở trình duyệt của bạn và nhập
ReactDOM.[myElement, document.getElementById['root']];2 vào thanh địa chỉ
Kết quả
Những gì bạn nên biết
Trước khi bắt đầu với React. JS, bạn nên có kinh nghiệm trung cấp về
Bạn cũng nên có một số kinh nghiệm với các tính năng JavaScript mới được giới thiệu trong ECMAScript 6 [ES6], bạn sẽ tìm hiểu về chúng trong chương React ES6