Bootstrap ReactJS

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

import Form from 'react-bootstrap/Form';
function FormDisabledInputExample() {
      
        Disabled input
        
      
        Disabled select menu
          
      
        
export default FormDisabledInputExample;

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ọi

import 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á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óa

Thêm thuộc tính boolean

import Form from 'react-bootstrap/Form';
function FormDisabledInputExample() {
      
        Disabled input



 
 
 Disabled select menu
 
 
 
export default FormDisabledInputExample;

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

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ết

Di 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

import Form from 'react-bootstrap/Form';
function FormDisabledInputExample() {
      
        Disabled input
        
      
        Disabled select menu
          
      
        
export default FormDisabledInputExample;

3 để cài đặt tất cả các phụ thuộc cần thiết

Từ đó bạn có thể

• Chạy thử nghiệm một lần với

  import Form from 'react-bootstrap/Form';
  function FormDisabledInputExample() {
        
          Disabled input
          
        
          Disabled select menu
            
        
          
  export default FormDisabledInputExample;

  4 (Hoặc chạy chúng ở chế độ đồng hồ với

  import Form from 'react-bootstrap/Form';
  function FormDisabledInputExample() {
        
          Disabled input
          
        
          Disabled select menu
            
        
  
  
  
          
  export default FormDisabledInputExample;

  5)
• Bắt đầu một bản sao cục bộ của trang web tài liệu với

  import Form from 'react-bootstrap/Form';
  function FormDisabledInputExample() {
        
          Disabled input
          
        
          Disabled select menu
            
        
          
  export default FormDisabledInputExample;

  6
• Hoặc xây dựng một bản sao cục bộ của thư viện với

  import Form from 'react-bootstrap/Form';
  function FormDisabledInputExample() {
        
          Disabled input
          
        
          Disabled select menu
            
        
          
  export default FormDisabledInputExample;

  7

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

import Form from 'react-bootstrap/Form';
function FormDisabledInputExample() {
      
        Disabled input
        
      
        Disabled select menu
          
      
        
export default FormDisabledInputExample;

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ủa

import 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;

0

---

Chạy ứng dụng React

Chạy lệnh này để di chuyển đến thư mục

import Form from 'react-bootstrap/Form';
function FormDisabledInputExample() {
      
        Disabled input
        
      
        Disabled select menu
          
      
        
export default FormDisabledInputExample;

1

Chạy lệnh này để thực thi ứng dụng React

import Form from 'react-bootstrap/Form';
function FormDisabledInputExample() {
      
        Disabled input
        
      
        Disabled select menu
          
      
        
export default FormDisabledInputExample;

1

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

Bootstrap có thể được sử dụng với React không?

Bootstrap trong Reactjs là gì?

Làm cách nào để thêm Bootstrap vào Reacjs?

Làm cách nào để sử dụng Bootstrap 5 trong Reacjs?