Thuộc tính nội tuyến Bootstrap dùng để hiển thị các phần tử kèm theo theo chiều ngang trong một hàng. Thuộc tính này có thể được áp dụng cho bất kỳ nhóm nào như hộp kiểm, radio, v.v.
Bài viết này mô tả cách áp dụng thuộc tính nội tuyến cho biểu mẫu để hiển thị nhãn và đầu vào trong một dòng. Nó tạo ra các ví dụ bằng cách sử dụng các phương pháp sau
- sử dụng lớp biểu mẫu nội tuyến Bootstrap với phiên bản 4
- sử dụng hệ thống lưới Bootstrap
Có các kịch bản trong việc xây dựng một trang web để thiết kế bố cục biểu mẫu nội tuyến. Ví dụ: biểu mẫu tìm kiếm trong tiêu đề trang chủ yếu sẽ là nội tuyến. Chúng ta sẽ xem một số ví dụ với HTML bố cục biểu mẫu nội tuyến Bootstrap có thể được sử dụng trong một trang web
Biểu mẫu Bootstrap nội tuyến là gì?
Thuộc tính nội tuyến của biểu mẫu Bootstrap là hiển thị các phần tử biểu mẫu theo chiều ngang. Nó hiển thị các nhãn, đầu vào và các thành phần biểu mẫu khác cạnh nhau trong một hàng
Sẽ rất hữu ích khi hiển thị biểu mẫu một dòng ở bất cứ nơi nào giao diện người dùng cần có bố cục nhỏ gọn. Ví dụ: biểu mẫu đăng ký email, biểu mẫu tìm kiếm tiêu đề, v.v.
Mã ví dụ nhanh bên dưới sẽ tạo giao diện nội tuyến của biểu mẫu Bootstrap. Nó sử dụng các lớp lưới Bootstrap trong bố cục HTML
Điều này sẽ hiển thị hai trường, tên và email trong cùng một hàng. Các nhãn được ẩn trực quan bằng cách sử dụng lớp Bootstrap thích hợp. Nó sử dụng các lớp Bootstrap row-cols-* để tạo bố cục biểu mẫu đáp ứng
Ví dụ nhanh
Name
Email
website
Submit Form
Đầu ra.
Màn hình sau đây hiển thị đầu ra ví dụ nhanh nội tuyến của biểu mẫu Bootstrap. Nó hiển thị ba trường biểu mẫu trong một dòng cạnh nhau.
sử dụng lớp biểu mẫu nội tuyến Bootstrap với phiên bản 4
Lớp biểu mẫu nội tuyến bootstrap hiển thị các phần tử biểu mẫu kèm theo trong một dòng. Lớp này được Bootstrap 4 cung cấp để hiển thị biểu mẫu nội tuyến trên trang web
Đoạn mã dưới đây hiển thị HTML của bố cục biểu mẫu nội tuyến. Nó sử dụng Bootstrap form-inline và các tiện ích khoảng cách để tạo biểu mẫu ưa nhìn
Nó xây dựng một bố cục biểu mẫu liên hệ đơn giản với đầu vào tên, email, chủ đề và tin nhắn. Nó sử dụng lớp chỉ sr của Bootstrap 4 để ẩn các nhãn một cách trực quan
Khoảng cách rất quan trọng trong việc thiết kế biểu mẫu nội tuyến Bootstrap. Bootstrap cung cấp nhiều tiện ích khác nhau để thêm khoảng cách vừa đủ giữa các phần tử biểu mẫu
- Các tiện ích ký quỹ như m-*, mr-*
- Các tiện ích đệm như p-*
- Các lớp sửa đổi máng xối
Bố cục biểu mẫu HTML bên dưới sử dụng các tiện ích lề cho nhóm biểu mẫu để thêm khoảng cách
ví dụ/bootstrap-4-form-inline. html
Name
Email
Subject
Message
Send
Ghi chú. Bootstrap form-inline chỉ hiển thị các phần tử xếp chồng lên nhau trong chế độ xem trên thiết bị di động
Sử dụng hệ thống lưới Bootstrap
Cả biểu mẫu xếp chồng và nội tuyến đều có tầm quan trọng riêng dựa trên các yêu cầu. Nhưng hình thức với các yếu tố xếp chồng lên nhau là phổ biến trong nhiều trang web
Bootstrap cung cấp các lớp để thiết kế các biểu mẫu phức tạp khác với bố cục thông thường. Hệ thống lưới Bootstrap cung cấp bố cục CSS flexbox để có một loạt các cột liên tiếp
Dưới đây HTML sử dụng các lớp hệ thống lưới để tạo biểu mẫu liên hệ. Nó sử dụng row-cols-* và col-* để thiết kế biểu mẫu nội tuyến Bootstrap có khả năng phản hồi
inline-form-lưới. html
Name
Email
Subject
Message
Send
Cả hai mã HTML trên sẽ tạo cùng một bố cục biểu mẫu. Ảnh chụp màn hình sau đây hiển thị các trường biểu mẫu liên hệ đơn giản trong một dòng
Khi thiết kế biểu mẫu nội tuyến Bootstrap, hãy nghĩ đến việc hiển thị nhãn cùng với đầu vào. Đôi khi nó có thể phá vỡ thiết kế nếu các trường biểu mẫu có số lượng nhiều hơn
Vì biểu mẫu liên hệ bên dưới bao gồm 4 trường nên các nhãn được ẩn trực quan để có bố cục rõ ràng
Ghi chú
- Biểu mẫu HTML phải có nhãn cho khả năng đọc màn hình
- Bạn có thể có một nhóm biểu mẫu nội tuyến Bootstrap để có các nhãn và đầu vào hiển thị. Nó sẽ cho một diện mạo tốt với các nhãn
Tất cả các ví dụ trong bài viết này bao gồm các nhãn ẩn trực quan và đầu vào. Các đầu vào chứa thuộc tính giữ chỗ để chỉ định mô tả trường
Ưu điểm của biểu mẫu Bootstrap nội tuyến
Các biểu mẫu có phần tử nội tuyến là một trong những cách thiết kế biểu mẫu web hiệu quả. Tại sao chúng ta cần hiển thị các biểu mẫu nội tuyến Bootstrap? . Hãy xem một số trong số họ được liệt kê dưới đây
- Nhỏ gọn để tiết kiệm bất động sản màn hình
- Đơn giản để khuyến khích mọi người tương tác
- Tính trôi chảy trên màn hình nhỏ hơn bằng cách xếp chồng đầu vào
- Một thành phần lưới đáng tin cậy dễ dàng phù hợp với bố cục
- Chứa hỗ trợ nhiều trình duyệt
Biểu mẫu Bootstrap nội tuyến trong trang web
Các phần bên dưới hiển thị 3 biểu mẫu nội tuyến mẫu là các thành phần phổ biến nhất của trang web
- Mẫu tìm kiếm tiêu đề một dòng
- Mẫu đăng nhập nội tuyến đơn giản
- Mẫu đăng ký email
Tất cả mô phỏng thuộc tính Bootstrap form-inline với grid system của thư viện này
Mẫu tìm kiếm tiêu đề một dòng
Tìm kiếm tiêu đề là phần phổ biến nhất của các loại ứng dụng web khác nhau. Ví dụ: trang web giỏ hàng, hệ thống đặt vé và nhiều ứng dụng khác
Rất có thể, tìm kiếm sẽ là một thành phần giao diện người dùng một dòng. Đôi khi, chúng ta có thể thấy các tiện ích tìm kiếm nâng cao giống như Google trong các ứng dụng web
Bố cục này hiển thị các đầu vào tìm kiếm kết hợp để tìm kiếm từ khóa trong danh mục đã chọn. Nó chứa một danh sách thả xuống HTML để lựa chọn danh mục
Nó sử dụng rows-col-* với các lớp Gutter để hiển thị nội tuyến biểu mẫu Bootstrap đáp ứng. Nó đặt khoảng cách cột theo các lớp col-*
tìm kiếm tiêu đề. html
...
Category
Email
Subscribe
Mẫu đăng nhập nội tuyến đơn giản
Trong một số bố cục trang web hiếm hoi, chúng có biểu mẫu đăng nhập một dòng trong tiêu đề phụ. Tại sao không lấy thiết kế cổ điển của Facebook làm ví dụ?
Bên dưới biểu mẫu đăng nhập Bootstrap HTML sẽ xuất bố cục đăng nhập một dòng cho trang web. Nó hiển thị các trường Tên người dùng và Mật khẩu. Bạn có thể chèn tùy chọn Nhớ tôi cùng với bố cục để nâng cao hơn nữa
hình thức đăng nhập một dòng. html
Simple inline login form
Username
Password
Login
Mẫu đăng ký email
Form đăng ký nhận email là thành phần quan trọng của một website. Nó chuyển đổi khách truy cập thành người đăng ký trang web của bạn. Nó làm tăng khả năng tiếp cận và giúp tiếp thị giá trị thương hiệu của bạn
Nó phải đẹp và đơn giản để khuyến khích người dùng đăng ký. Vì vậy, Bootstrap form inline sẽ là một lựa chọn tốt để tạo bố cục biểu mẫu này
Nếu trang web của bạn không sử dụng Bootstrap, bạn có thể mô phỏng bố cục linh hoạt của hệ thống lưới theo các kiểu tùy chỉnh
ngang-đăng ký-form. html
...
Simple inline login form
Email
Subscribe
Phần kết luận
Như vậy, chúng ta đã thấy cách tạo một biểu mẫu nội tuyến Bootstrap. Chúng tôi đã xem một ví dụ nhanh về thiết kế biểu mẫu nội tuyến với Bootstrap 5
Danh sách các lợi thế và các mẫu ví dụ nhấn mạnh nhu cầu thực sự của tài sản này. Ví dụ với. form-inline sẽ giúp những người đang sử dụng Bootstrap 4