Bootstrap nhóm biểu mẫu

Dễ dàng mở rộng các điều khiển biểu mẫu bằng cách thêm văn bản, nút hoặc nhóm nút ở hai bên của đầu vào văn bản, lựa chọn tùy chỉnh và đầu vào tệp tùy chỉnh

Ví dụ

Đặt một tiện ích bổ sung hoặc nút ở hai bên của đầu vào. Bạn cũng có thể đặt một cái trên cả hai mặt của đầu vào. Nhớ đặt

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        Small
          aria-describedby="inputGroup-sizing-sm"
      
        
          aria-describedby="inputGroup-sizing-default"
        Large
          aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        @
          aria-describedby="basic-addon1"
      
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        @example.com
      Your vanity URL
      
        
          https://example.com/users/
        
      
        $
        
        .00
        With textarea
        
export default BasicExample;

định cỡ

Thêm các lớp định cỡ biểu mẫu tương đối vào

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
 Small
 aria-describedby="inputGroup-sizing-sm"
 
 
 aria-describedby="inputGroup-sizing-default"
 Large
 aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        Small
          aria-describedby="inputGroup-sizing-sm"
      
        
          aria-describedby="inputGroup-sizing-default"
        Large
          aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

Hộp kiểm và radio

Sử dụng

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        Small
          aria-describedby="inputGroup-sizing-sm"
      
        
          aria-describedby="inputGroup-sizing-default"
        Large
          aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        Small
          aria-describedby="inputGroup-sizing-sm"
      
        
 aria-describedby="inputGroup-sizing-default"
 Large
 aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
function CheckboxesExample() {
      
        
        
        
        
export default CheckboxesExample;

Nhiều đầu vào

Mặc dù nhiều đầu vào được hỗ trợ trực quan, nhưng các kiểu xác thực chỉ khả dụng cho các nhóm đầu vào có một đầu vào duy nhất

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
function MultipleInputsExample() {
    
      First and last name
      
      
export default MultipleInputsExample;

Nhiều addon

Nhiều tiện ích bổ sung được hỗ trợ và có thể được kết hợp với các phiên bản đầu vào hộp kiểm và radio

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
function MultipleAddonsExample() {
      
        $
        0.00
        
        
        $
        0.00
export default MultipleAddonsExample;

tiện ích nút

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
function ButtonsExample() {
 
 
 aria-label="Example text with button addon"
 aria-describedby="basic-addon1"
 
 placeholder="Recipient's username"
 aria-label="Recipient's username"
 aria-describedby="basic-addon2"
 
 
 
Button
 Button
 
 placeholder="Recipient's username"
 aria-label="Recipient's username with two button addons"
 Button
 Button
export default ButtonsExample;

Các nút có danh sách thả xuống

________số 8

nút phân đoạn

import Dropdown from 'react-bootstrap/Dropdown';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import SplitButton from 'react-bootstrap/SplitButton';
function SegmentedButtonDropdownsExample() {
      
          variant="outline-secondary"
          id="segmented-button-dropdown-1"
          Action
          Another action
          Something else here
          Separated link
        
      
        
          variant="outline-secondary"
 id="segmented-button-dropdown-2"
 Action
 Another action
 Something else here
 Separated link
export default SegmentedButtonDropdownsExample;

API

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        Small
          aria-describedby="inputGroup-sizing-sm"
      
        
          aria-describedby="inputGroup-sizing-default"
        Large
          aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

TênLoạiMặc địnhMô tả

Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này

Xử lý các góc tròn của đầu vào khi sử dụng xác thực biểu mẫu

Sử dụng điều này khi nhóm đầu vào của bạn chứa cả phần tử đầu vào và phản hồi

Kiểm soát kích thước của các nút và các phần tử biểu mẫu từ cấp cao nhất

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
      
        Small
          aria-describedby="inputGroup-sizing-sm"
      
        
          aria-describedby="inputGroup-sizing-default"
        Large
          aria-describedby="inputGroup-sizing-sm"
export default SizesExample;

Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều

Nhóm biểu mẫu Bootstrap là gì?

Nhóm biểu mẫu được sử dụng để làm gì?

Nhóm biểu mẫu trong HTML là gì?

Làm cách nào để sử dụng nhóm đầu vào Bootstrap?