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
2 bên ngoài nhóm đầu vàoimport 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
//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
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;
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
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';
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 tiện ích #
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
Các nút được 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 #
2Sao chép mã nhập cho thành phần InputGroupimport 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
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
bsPrefix3import 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