Các ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, tùy chọn bố cục và các thành phần tùy chỉnh để tạo nhiều biểu mẫu khác nhau
Tổng quan
Điều khiển biểu mẫu Bootstrap mở rộng với các lớp. Sử dụng các lớp này để chọn tham gia hiển thị tùy chỉnh của chúng để hiển thị nhất quán hơn trên các trình duyệt và thiết bị
Đảm bảo sử dụng thuộc tính
8 thích hợp trên tất cả các đầu vào [e. g. ,
9 cho địa chỉ email hoặc
0 cho thông tin số] để tận dụng các điều khiển đầu vào mới hơn như xác minh email, chọn số, v.v.Đây là một ví dụ nhanh để minh họa các kiểu biểu mẫu của Bootstrap. Tiếp tục đọc tài liệu về các lớp bắt buộc, bố cục biểu mẫu, v.v.
Chúng tôi sẽ không bao giờ chia sẻ email của bạn với bất kỳ ai khác
Gửi đi
Email address
We'll never share your email with anyone else.
Password
Check me out
Submit
Điều khiển biểu mẫu
Các điều khiển dạng văn bản—như
1,
2Đối với đầu vào tệp, hoán đổi
3 cho
4________số 8_______
định cỡ
Đặt chiều cao bằng cách sử dụng các lớp như
5 và
6
Chỉ đọc
Thêm thuộc tính boolean
7 vào đầu vào để ngăn việc sửa đổi giá trị của đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn [giống như đầu vào bị vô hiệu hóa], nhưng vẫn giữ nguyên con trỏ tiêu chuẩn
Văn bản thuần túy chỉ đọc
Nếu bạn muốn có các phần tử
1 trong biểu mẫu của mình được tạo kiểu dưới dạng văn bản thuần túy, hãy sử dụng lớp
9 để xóa kiểu dáng trường biểu mẫu mặc định và giữ nguyên lề và phần đệm chính xác
Email
Password
Email
Password
Confirm identity
Hộp kiểm và radio
Các hộp kiểm và radio mặc định được cải thiện với sự trợ giúp của
0, một lớp duy nhất cho cả hai loại đầu vào giúp cải thiện bố cục và hành vi của các thành phần HTML của chúng. 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ọnCác hộp kiểm và radio bị vô hiệu hóa được hỗ trợ, nhưng để cung cấp một con trỏ
1 khi di chuột qua cha mẹ
1, bạn sẽ cần thêm thuộc tính
3 vào
4. Thuộc tính bị vô hiệu hóa sẽ áp dụng màu nhạt hơn để giúp biểu thị trạng thái của đầu vàoCác hộp kiểm và việc sử dụng radio được xây dựng để hỗ trợ xác thực biểu mẫu dựa trên HTML và cung cấp các nhãn ngắn gọn, dễ tiếp cận. Như vậy, các
1 và
1 của chúng ta là các phần tử anh em trái ngược với một
1 trong một
1. Điều này dài dòng hơn một chút vì bạn phải chỉ định các thuộc tính
9 và
Email
Password
0 để liên kết các thuộc tính
1 và
1Mặc định [xếp chồng]
Theo mặc định, bất kỳ số lượng hộp kiểm và đài nào là anh chị em trực tiếp sẽ được xếp chồng lên nhau theo chiều dọc và cách nhau một cách thích hợp bằng
0
Default checkbox
Disabled checkbox
Default radio
Second default radio
Disabled radio
nội tuyến
Nhóm các hộp kiểm hoặc radio trên cùng một hàng ngang bằng cách thêm
Email
Password
4 vào bất kỳ
0 nào
1
2
3 [disabled]
1
2
3 [disabled]
không có nhãn
Thêm
Email
Password
6 vào đầu vào trong khoảng
0 không có bất kỳ văn bản nhãn nào. Hãy nhớ vẫn cung cấp một số dạng nhãn cho các công nghệ hỗ trợ [ví dụ: sử dụng
Email
Password
8]
Example file input
1Cách trình bày
Vì Bootstrap áp dụng
Email
Password
9 và
Email
Password
Confirm identity
0 cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, nên theo mặc định, các biểu mẫu sẽ xếp chồng lên nhau theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi biểu mẫuNhóm biểu mẫu
Lớp
Email
Password
Confirm identity
1 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 cho
Email
Password
Confirm identity
2, nhưng nó chọn các kiểu bổ sung trong
Email
Password
Confirm identity
3 nếu cần. Sử dụng nó vớiS,s hoặc gần như bất kỳ phần tử nào khác
Example file input
2lưới biểu mẫu
Các biểu mẫu phức tạp hơn có thể được tạo bằng cách sử dụng các lớp lưới của chúng tôi. Sử dụng những thứ này cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau và các tùy chọn căn chỉnh bổ sung
Example file input
3hàng biểu mẫu
Bạn cũng có thể hoán đổi
Email
Password
Confirm identity
4 lấy
Email
Password
Confirm identity
5, một biến thể của hàng lưới tiêu chuẩn của chúng tôi ghi đè lên các rãnh cột mặc định để có bố cục chặt chẽ và nhỏ gọn hơn
Example file input
4Bố cục phức tạp hơn cũng có thể được tạo bằng hệ thống lưới
Example file input
5dạng ngang
Tạo biểu mẫu ngang với lưới bằng cách thêm lớp
Email
Password
Confirm identity
4 để tạo nhóm và sử dụng lớp
Email
Password
Confirm identity
7 để chỉ định chiều rộng của nhãn và điều khiển của bạn. Đảm bảo thêm cả
Email
Password
Confirm identity
8 vào các
1 của bạn để chúng được căn giữa theo chiều dọc với các điều khiển biểu mẫu được liên kết của chúngĐôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo sự căn chỉnh hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa
Default checkbox
Disabled checkbox
0 trên nhãn đầu vào radio xếp chồng lên nhau để căn chỉnh đường cơ sở của văn bản tốt hơn
Example file input
6Định cỡ nhãn dạng ngangĐảm bảo sử dụng
Default checkbox
Disabled checkbox
1 hoặc
Default checkbox
Disabled checkbox
2 cho các
1 hoặc
1 của bạn để theo đúng kích thước của
5 và
6
Example file input
7Kích thước cột
Như đã trình bày trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số lượng
Default checkbox
Disabled checkbox
7 nào trong một
Email
Password
Confirm identity
4 hoặc
Email
Password
Confirm identity
5. Chúng sẽ chia đều chiều rộng có sẵn giữa chúng. Bạn cũng có thể chọn một tập hợp con các cột của mình để chiếm nhiều hoặc ít dung lượng hơn, trong khi các
Default checkbox
Disabled checkbox
7 còn lại chia đều phần còn lại, với các lớp cột cụ thể như
Default radio
Second default radio
Disabled radio
1
Example file input
8tự động định cỡ
Ví dụ dưới đây sử dụng tiện ích flexbox để căn giữa nội dung theo chiều dọc và thay đổi
Default checkbox
Disabled checkbox
7 thành
Default radio
Second default radio
Disabled radio
3 để các cột của bạn chỉ chiếm nhiều không gian nhất có thể. Nói cách khác, kích thước của cột dựa trên nội dung
Example file input
9Sau đó, bạn có thể phối lại điều đó một lần nữa với các lớp cột theo kích thước cụ thể
0Và tất nhiên là được hỗ trợ
1biểu mẫu nội tuyến
Sử dụng lớp
Email
Password
Confirm identity
3 để hiển thị một loạt nhãn, điều khiển biểu mẫu và nút trên một hàng ngang. Điều khiển biểu mẫu trong biểu mẫu nội tuyến thay đổi một chút so với trạng thái mặc định của chúng- Các điều khiển là
5, thu gọn bất kỳ khoảng trắng HTML nào và cho phép bạn cung cấp điều khiển căn chỉnh với các tiện ích khoảng cách và hộp linh hoạtDefault radio
Second default radio
Disabled radio
- Nhóm điều khiển và đầu vào nhận được
6 để ghi đè giá trị mặc định của BootstrapDefault radio
Second default radio
Disabled radio
0Email
Password
Confirm identity - Các điều khiển chỉ xuất hiện nội tuyến trong các cổng xem rộng ít nhất 576px để giải thích cho các cổng xem hẹp trên thiết bị di động
Bạn có thể cần giải quyết thủ công chiều rộng và căn chỉnh của các điều khiển biểu mẫu riêng lẻ bằng các tiện ích giãn cách [như minh họa bên dưới]. Cuối cùng, hãy đảm bảo luôn bao gồm
1 với mỗi điều khiển biểu mẫu, ngay cả khi bạn cần ẩn nó khỏi những khách truy cập không đọc màn hình bằng
Default radio
Second default radio
Disabled radio
9
2Các điều khiển và lựa chọn biểu mẫu tùy chỉnh cũng được hỗ trợ
3Các lựa chọn thay thế cho nhãn ẩn
Các công nghệ hỗ trợ như 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 cách sử dụng lớp
Default radio
Second default radio
Disabled radio
9. Có nhiều phương pháp thay thế khác để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như thuộc tính
Email
Password
8,
1
2
3 [disabled]
2 hoặc
1
2
3 [disabled]
3. Nếu không có thuộc tính nào trong số này, thì các công nghệ hỗ trợ có thể sử dụng thuộc tính
1
2
3 [disabled]
4, nếu có, nhưng lưu ý rằng việc sử dụng
1
2
3 [disabled]
4 để thay thế cho các phương pháp ghi nhãn khác không được khuyến nghịvăn bản trợ giúp
Có thể tạo văn bản trợ giúp cấp độ khối trong các biểu mẫu bằng cách sử dụng
1
2
3 [disabled]
6 [trước đây gọi là
1
2
3 [disabled]
7 trong v3]. Văn bản trợ giúp nội tuyến có thể được triển khai linh hoạt bằng cách sử dụng bất kỳ phần tử HTML nội tuyến và lớp tiện ích nào như
1
2
3 [disabled]
8Liê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
1
2
3 [disabled]
9. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ—chẳng hạn như trình đọc màn hình—sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc nhập điều khiểnVăn bản trợ giúp bên dưới đầu vào có thể được tạo kiểu bằng
1
2
3 [disabled]
6. Lớp này bao gồm
Email
Password
9 và thêm một số lề trên để tạo khoảng cách dễ dàng từ các đầu vào ở trênMật khẩu của bạn phải dài 8-20 ký tự, chứa các chữ cái và số và không được chứa dấu cách, ký tự đặc biệt hoặc biểu tượng cảm xúc
4Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội tuyến điển hình nào [có thể là
1,
1 hoặc thứ gì đó khác] mà không có gì khác ngoài một lớp tiện íchPhải dài 8-20 ký tự
5biểu mẫu bị vô hiệu hóa
Thêm thuộc tính boolean
3 vào đầu vào để ngăn chặn tương tác của người dùng và làm cho nó có vẻ nhẹ hơn