Đầu vào bootstrap

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ào

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;

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ặc

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;

1 để thêm tùy chọn vào nhóm đầu vào

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 #

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 InputGroup

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

hasValidation

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

kích thước

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

bsPrefix

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

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

Bootstrap đầu vào là gì?

Đầu vào Bootstrap . văn bản, mật khẩu, ngày giờ, ngày giờ địa phương, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color . Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng.

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

Bootstrap 4 Nhóm đầu vào . Sử dụng. input-group-prepend để thêm văn bản trợ giúp trước đầu vào và. input-group-append để thêm nó phía sau đầu vào. input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use . input-group-prepend to add the help text in front of the input, and . input-group-append to add it behind the input.

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?

Bạn có thể áp dụng các lớp bootstrap để đáp ứng chiều rộng . Bạn có thể tạo cho nó một đường viền nếu muốn, để làm cho nó trông giống như một đầu vào. Sử dụng textContent thay vì giá trị để truy cập dữ liệu và sử dụng sự kiện tiêu điểm thay vì sự kiện thay đổi. Lưu câu trả lời này.

Lớp nhóm đầu vào trong Bootstrap là gì?

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 .