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;
2 bên ngoài nhóm đầu vàoimport 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
//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;
3 và nội dung bên trong sẽ tự động thay đổi kích thước—không cần lặp lại các lớp kích thước kiểm soát biểu mẫu trên mỗi phần 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;
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;
0 hoặcimport 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;
1 để thêm tùy chọn vào nhóm đầu vàoimport 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;
2Sao chép mã nhập cho thành phần InputGroupTê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
hasValidationXử 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
kích thướcKiể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
bsPrefiximport 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;
3Thay đổ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