Các điều khiển biểu mẫu riêng lẻ tự động nhận được một số kiểu dáng chung. Tất cả các phần tử văn bản
Email address
Các thành phần biểu mẫu Bootstrap
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Địa chỉ email
Mật khẩu
đầu vào tập tin
Ví dụ văn bản trợ giúp cấp khối tại đây
Kiểm tra tôi
Nộp
Email address
Password
File input
Example block-level help text here.
Check me out
Submit
Không trộn các nhóm biểu mẫu với các nhóm đầu vào
Không trộn trực tiếp các nhóm biểu mẫu với các nhóm đầu vào. Thay vào đó, hãy lồng nhóm đầu vào bên trong nhóm biểu mẫu
biểu mẫu nội tuyến
Thêm
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Có thể yêu cầu chiều rộng tùy chỉnh
Đầu vào và lựa chọn có
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Luôn thêm nhãn
Trình đọc màn hình sẽ gặp sự cố với các biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi thông tin nhập vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn nhãn bằng lớp
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Tên
Email address
Password
Remember me
Sign in
Địa chỉ email
Mật khẩu
nhớ tôi
Đăng nhập
Email address
Password
Remember me
Sign in
Số tiền [bằng đô la]
$
00
Chuyển tiền mặt
Amount [in dollars]
$
.00
Transfer cash
dạng ngang
Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh nhãn và nhóm điều khiển biểu mẫu theo bố cục ngang bằng cách thêm
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Mật khẩu
nhớ tôi
Đăng nhập
Email address
Password
Remember me
Sign in
điều khiển được hỗ trợ
Ví dụ về các điều khiển biểu mẫu chuẩn được hỗ trợ trong bố cục biểu mẫu mẫu
đầu vào
Kiểm soát biểu mẫu phổ biến nhất, các trường nhập dựa trên văn bản. Bao gồm hỗ trợ cho tất cả các loại HTML5.
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Yêu cầu khai báo kiểu
Đầu vào sẽ chỉ được tạo kiểu đầy đủ nếu
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Nhóm đầu vào
Để thêm văn bản hoặc nút tích hợp trước và/hoặc sau bất kỳ
Email address
Password
Remember me
Sign in
vùng văn bản
Điều khiển biểu mẫu hỗ trợ nhiều dòng văn bản. Thay đổi thuộc tính
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Hộp kiểm và radio
Các hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio dùng để chọn một tùy chọn từ nhiều tùy chọn
Hộp kiểm hoặc radio có thuộc tính
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Mặc định [xếp chồng]
Tùy chọn một là cái này và cái kia—hãy chắc chắn bao gồm lý do tại sao nó tuyệt vời
Tùy chọn hai bị vô hiệu hóa
Tùy chọn một là cái này và cái kia—hãy chắc chắn bao gồm lý do tại sao nó tuyệt vời
Tùy chọn hai có thể là một cái gì đó khác và chọn nó sẽ bỏ chọn tùy chọn một
Tùy chọn ba bị vô hiệu hóa
Amount [in dollars]
$
.00
Transfer cash
Hộp kiểm nội tuyến và radio
Sử dụng các lớp
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
1 2 3
1 2 3
Amount [in dollars]
$
.00
Transfer cash
Hộp kiểm và radio không có văn bản nhãn
Nếu bạn không có văn bản nào trong
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
chọn
Lưu ý rằng nhiều menu chọn gốc—cụ thể là trong Safari và Chrome—có các góc được bo tròn không thể sửa đổi thông qua thuộc tính
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Đối với các điều khiển
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
kiểm soát tĩnh
Khi bạn cần đặt văn bản thuần bên cạnh nhãn biểu mẫu trong một biểu mẫu, hãy sử dụng lớp
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
email@ví dụ. com
Mật khẩu
Email address
Password
Remember me
Sign in
email@ví dụ. com
Mật khẩu
xác nhận danh tính
Email address
Password
Remember me
Sign in
trạng thái lấy nét
Chúng tôi xóa các kiểu
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Nhà nước demo
Amount [in dollars]
$
.00
Transfer cash
52
Amount [in dollars]
$
.00
Transfer cash
Ví dụ đầu vào ở trên sử dụng các kiểu tùy chỉnh trong tài liệu của chúng tôi để thể hiện trạng thái
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
trạng thái bị vô hiệu hóa
Thêm thuộc tính boolean
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
bộ trường bị vô hiệu hóa
Thêm thuộc tính
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Hãy cẩn thận về chức năng liên kết của
Amount [in dollars]
$
.00
Transfer cash
81
Amount [in dollars]
$
.00
Transfer cash
Theo mặc định, các trình duyệt sẽ coi tất cả các điều khiển biểu mẫu gốc [các phần tử ______06,
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Amount [in dollars]
$
.00
Transfer cash
Khả năng tương thích giữa các trình duyệt
Mặc dù Bootstrap sẽ áp dụng các kiểu này trong tất cả các trình duyệt, Internet Explorer 11 trở xuống không hỗ trợ đầy đủ thuộc tính
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
đầu vào bị vô hiệu hóa
Đã tắt menu chọn
Không thể kiểm tra điều này
Nộp
Email address
Password
Remember me
Sign in
trạng thái chỉ đọc
Thêm thuộc tính boolean
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
trạng thái xác thực
Bootstrap bao gồm các kiểu xác thực cho các trạng thái lỗi, cảnh báo và thành công trên các điều khiển biểu mẫu. Để sử dụng, hãy thêm
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Truyền đạt trạng thái xác thực cho các công nghệ hỗ trợ và người dùng mù màu
Việc sử dụng các kiểu xác thực này để biểu thị trạng thái của điều khiển biểu mẫu chỉ cung cấp chỉ báo dựa trên màu sắc, trực quan, sẽ không được chuyển đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình - hoặc người dùng mù màu
Đảm bảo rằng một dấu hiệu trạng thái thay thế cũng được cung cấp. Chẳng hạn, bạn có thể bao gồm gợi ý về trạng thái trong chính văn bản
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Nhập liệu thành công
Đầu vào có cảnh báo
Đầu vào có lỗi
Hộp kiểm thành công
Hộp kiểm có cảnh báo
Hộp kiểm có lỗi
Email address
Password
Remember me
Sign in
Với các biểu tượng tùy chọn
Bạn cũng có thể thêm các biểu tượng phản hồi tùy chọn bằng cách thêm
Email address
Password
Remember me
Sign in
Biểu tượng phản hồi chỉ hoạt động với các yếu tố văn bản
Email address
Password
Remember me
Sign in
Biểu tượng, nhãn và nhóm đầu vào
Cần định vị thủ công các biểu tượng phản hồi cho các đầu vào không có nhãn và cho các nhóm đầu vào có tiện ích bổ sung ở bên phải. Bạn được khuyến khích cung cấp nhãn cho tất cả các đầu vào vì lý do tiếp cận. Nếu bạn muốn ngăn nhãn hiển thị, hãy ẩn chúng bằng lớp
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Truyền đạt ý nghĩa của biểu tượng cho các công nghệ hỗ trợ
Để đảm bảo rằng các công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình – truyền đạt chính xác ý nghĩa của một biểu tượng, văn bản ẩn bổ sung nên được đưa vào lớp
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Mặc dù các ví dụ sau đã đề cập đến trạng thái xác thực của các điều khiển biểu mẫu tương ứng trong chính văn bản
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Nhập thành công [thành công]
Nhập có cảnh báo [cảnh báo]
Nhập có lỗi [lỗi]
Nhóm đầu vào thành công
@
[thành công]
Email address
Password
Remember me
Sign in
Các biểu tượng tùy chọn ở dạng ngang và trong dòng
Nhập liệu thành công
[thành công]
Nhóm đầu vào thành công
@
[thành công]
Email address
Password
Remember me
Sign in
Nhập thành công [thành công]
Nhóm đầu vào thành công
@
[thành công]
Email address
Password
Remember me
Sign in
Các biểu tượng tùy chọn có nhãn
Amount [in dollars]
$
.00
Transfer cash
6 ẩn
Amount [in dollars]
$
.00
Transfer cash
Nếu bạn sử dụng lớp
Amount [in dollars]
$
.00
Transfer cash
Email address
Password
Remember me
Sign in
Amount [in dollars]
$
.00
Transfer cash
Nhãn ẩn [thành công]
Nhóm đầu vào thành công
@
[thành công]
Email address
Password
Remember me
Sign in
Kiểm soát kích thước
Đặt chiều cao bằng các lớp như
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
kích thước chiều cao
Tạo các điều khiển biểu mẫu cao hơn hoặc ngắn hơn phù hợp với kích thước nút
Email address
Password
Remember me
Sign in
Kích thước nhóm biểu mẫu ngang
Nhanh chóng định cỡ nhãn và điều khiển biểu mẫu trong
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
Email address
Password
Remember me
Sign in
nhãn lớn
nhãn nhỏ
Email address
Password
Remember me
Sign in
Kích thước cột
Bọc các đầu vào trong các cột lưới hoặc bất kỳ phần tử gốc tùy chỉnh nào để dễ dàng thực thi các độ rộng mong muốn
Email address
Password
Remember me
Sign in
văn bản trợ giúp
Văn bản trợ giúp cấp khối cho các điều khiển biểu mẫu
Liên kết văn bản trợ giúp với các điều khiển biểu mẫu
Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu liên quan đến việc sử dụng thuộc tính
Email address
Password
Remember me
Sign in
Làm cách nào để tạo biểu mẫu trong Bootstrap?
Để tạo một biểu mẫu trong đó tất cả các thành phần đều nằm trong dòng, căn trái và nhãn nằm cạnh nhau, hãy hãy thêm lớp. form-inline tới thẻ . Theo mặc định, các đầu vào, vùng chọn và vùng văn bản có chiều rộng 100% trong Bootstrap. Bạn cần đặt chiều rộng trên các điều khiển biểu mẫu khi sử dụng biểu mẫu nội tuyến.
Các lớp có sẵn cho biểu mẫu trong Bootstrap là gì?
Nhóm biểu mẫu
lưới biểu mẫu. hàng biểu mẫu. dạng ngang. Kích thước cột. tự động định cỡ
biểu mẫu nội tuyến
hình thức là gì
Các. lớp biểu mẫu là cách dễ nhất để thêm một số cấu trúc vào biểu mẫu. Nó cung cấp một lớp linh hoạt khuyến khích nhóm các nhãn, điều khiển, văn bản trợ giúp tùy chọn và thông báo xác thực biểu mẫu phù hợp. Theo mặc định, nó chỉ áp dụng margin-bottom nhưng nó chọn thêm các kiểu trong. biểu mẫu nội tuyến khi cần
Biểu mẫu mặc định trong Bootstrap là gì?
Bootstrap cung cấp ba loại bố cục biểu mẫu. Dạng dọc [đây là mặc định]