Bootstrap nội tuyến thuộc tính để 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à hơn thế nữa.
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 Bootstrap form-inline lớp với phiên bản 4
- sử dụng hệ thống lưới Bootstrap
Có các tình huống 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ẽ thấy 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.
Mục lục
Bootstrap form inline là gì?
Thuộc tính nội tuyến của biểu mẫu Bootstrap là hiển thị các thành phần biểu mẫu theo chiều ngang. Nó hiển thị các nhãn, đầu vào và các phần tử 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 kỳ nơi nào mà 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à hơn thế nữa.
Đoạn mã ví dụ nhanh dưới đây sẽ tạo một biểu mẫu Bootstrap xuất hiện trong dòng. Nó sử dụng các lớp lưới Bootstrap trong HTML bố cục.
Đ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 Bootstrap row-cols- * các lớp để tạo bố cục biểu mẫu đáp ứng.
Ví dụ nhanh
<form class="row row-cols-lg-auto g-3">
<div class="col">
<label class="visually-hidden" for="inline-form-name">Name</label> <input
type="text" class="form-control" id="inline-form-name"
placeholder="Name">
</div>
<div class="col">
<label class="visually-hidden" for="inline-form-email">Email</label>
<input type="text" class="form-control" id="inline-form-email"
placeholder="Email">
</div>
<div class="col">
<label class="visually-hidden" for="inline-form-website">website</label>
<input type="text" class="form-control" id="inline-form-website"
placeholder="Website">
</div>
<div class="col">
<button type="submit" class="btn btn-primary">Submit Form</button>
</div>
</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 Bootstrap form-inline lớp với phiên bản 4
Lớp bootstrap form-inline 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 cung cấp bởi Bootstrap 4 để hiển thị biểu mẫu nội tuyến trên một 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 giãn cách để tạo ra một biểu mẫu đẹp.
Nó xây dựng một bố cục biểu mẫu liên hệ đơn giản với các đầu vào tên, email, chủ đề và tin nhắn. Nó sử dụng Bootstrap 4 sr-only lớp để ẩ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ế một biểu mẫu nội tuyến Bootstrap. Bootstrap cung cấp các tiện ích khác nhau để thêm đủ khoảng cách 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 bổ trợ 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.
example / bootstrap-4-form-inline.html
<form class="form-inline" action="" method="post">
<div class="form-group mr-2">
<label class="sr-only" for="inputName">Name</label> <input
type="text" class="form-control" id="inputName" placeholder="Name"
required>
</div>
<div class="form-group mr-2">
<label class="sr-only" for="inputEmail">Email</label> <input
type="email" class="form-control" id="inputEmail"
placeholder="Email" required>
</div>
<div class="form-group mr-2">
<label class="sr-only" for="inputSubject">Subject</label> <input
type="text" class="form-control" id="inputSubject"
placeholder="Subject" required>
</div>
<div class="form-group mr-2">
<label class="sr-only" for="inputMessage">Message</label> <input
type="text" class="form-control" id="inputMessage"
placeholder="Message" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
Lưu ý: Biểu mẫu nội tuyến Bootstrap chỉ hiển thị các phần tử xếp chồng lên nhau trong khung nhìn di động.
Sử dụng hệ thống lưới Bootstrap
Cả dạng xếp chồng và dạng 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 biểu mẫu có các phần 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 cách bố trí thông thường. Các Hệ thống lưới Bootstrap cung cấp bố cục flexbox CSS để có một loạt cột trong một hàng.
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ế một biểu mẫu nội tuyến Bootstrap với khả năng đáp ứng.
inline-form-grid.html
<form class="row row-cols-lg-auto g-3">
<div class="col-sm-2">
<label for="inputName" class="visually-hidden">Name</label> <input
type="text" class="form-control" id="inputName" placeholder="Name" />
</div>
<div class="col-sm-2">
<label for="inputEmail" class="visually-hidden">Email</label> <input
type="text" class="form-control" id="inputEmail"
placeholder="Email" />
</div>
<div class="col-sm-2">
<label for="inputSubject" class="visually-hidden">Subject</label> <input
type="text" class="form-control" id="inputSubject"
placeholder="Subject" />
</div>
<div class="col-sm-2">
<label for="inputMessage" class="visually-hidden">Message</label> <input
type="text" class="form-control" id="inputMessage"
placeholder="Message" />
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
Cả hai mã HTML trên sẽ tạo ra 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ế các biểu mẫu nội tuyến Bootstrap, hãy nghĩ đến việc hiển thị các nhãn cùng với các đầu vào. Đôi khi nó có thể phá vỡ thiết kế nếu các trường biểu mẫu có nhiều số hơn.
Vì biểu mẫu liên hệ dưới đây 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ú:
- HTML biểu mẫu phải có các nhãn cho tính khả thi của việc đọ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 có thể nhìn thấy được. Nó sẽ cho một hình thức đẹp với 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à các đầu vào. Các đầu vào chứa trình giữ chỗ thuộc tính để chỉ định mô tả trường.
Ưu điểm của Bootstrap form inline
Biểu mẫu có phần tử nội tuyến là một trong những những cách hiệu quả để thiết kế các biểu mẫu web. Tại sao chúng ta cần hiển thị các biểu mẫu nội tuyến Bootstrap? Nó phải có một số lợi thế. Hãy xem một số trong số họ được liệt kê dưới đây.
- Tính nhỏ gọn để tiết kiệm bất động sản màn hình.
- Sự đơn giản để khuyến khích mọi người tương tác.
- Tính linh hoạt trên màn hình nhỏ hơn bằng cách xếp chồng các đầ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.
- Có hỗ trợ nhiều trình duyệt.
Bootstrap form inline trong trang web
Các phần dưới đây hiển thị 3 biểu mẫu nội tuyến ví dụ là các thành phần phổ biến nhất của một trang web.
- Biểu mẫu tìm kiếm tiêu đề một dòng.
- Hình thức đăng nhập nội tuyến đơn giản.
- Hình thức đăng ký email.
Tất cả đều mô phỏng thuộc tính Bootstrap form-inline với hệ thống lưới của thư viện này.
Biểu 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 một từ khóa trong một danh mục đã chọn. Nó chứa một trình đơn HTML thả xuống để lựa chọn danh mục.
Nó sử dụng row-col- * với các lớp Gutter để hiển thị nội tuyến một biểu mẫu Bootstrap đáp ứng. Nó đặt khoảng cách cột bằng col- * các lớp học.
header-search.html
<link
href="
rel="stylesheet">
<link href="./../assets/css/style.css" rel="stylesheet" type="text/css">
...
<form class="row row-cols-lg-auto g-1">
<div class="col-1">
<label class="visually-hidden" for="inline-form-category">Category</label> <select
class="form-control" id="inline-form-category">
<option value="">Category</option>
<option value="Toys">Toys</option>
<option value="Books">Books</option>
<option value="Stationaries">Stationaries</option>
</select>
</div>
<div class="col-4">
<label class="visually-hidden" for="inline-form-email">Email</label>
<input type="text" class="form-control" id="inline-form-email"
placeholder="Enter email address">
</div>
<div class="col">
<button type="submit" class="btn btn-primary">Subscribe</button>
</div>
</form>
Biểu mẫu đăng nhập nội tuyến đơn giản
Trong một số bố cục trang web hiếm, 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ụ? Nó có một biểu mẫu đăng nhập nội tuyến ở tiêu đề.
Bên dưới biểu mẫu đăng nhập Bootstrap HTML sẽ xuất ra một bố cục đăng nhập một dòng cho một trang web. Nó hiển thị tên tài khoản và Mật khẩu lĩnh vực. 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.
One-line-login-form.html
<h1>Simple inline login form</h1>
<form>
<div class="row">
<div class="col-md-2">
<label class="visually-hidden" for="inline-form-username">Username</label>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="col-md-2">
<label class="visually-hidden" for="inline-form-password">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="col">
<button class="btn btn-primary
btn-block">Login</button>
</div>
</div>
</form>
Mẫu đăng ký email
Biểu mẫu đăng ký email là một thành phần quan trọng của một trang web. 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 có kiểu dáng đẹp và đơn giản để khuyến khích người dùng đăng ký. Vì vậy, Bootstrap biểu mẫu nội tuyến 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 hệ thống lưới theo kiểu tùy chỉnh.
ngang-đăng ký-biểu mẫu.html
<link
href="
rel="stylesheet">
<link href="./../assets/css/style.css" rel="stylesheet" type="text/css">
<script
src="
...
<h1>Simple inline login form</h1>
<form>
<div class="row">
<div class="col-4">
<label class="visually-hidden" for="inline-form-email">Email</label>
<input type="text" id="inline-form-email" class="form-control"
placeholder="Enter your email here">
</div>
<div class="col">
<button class="btn btn-primary
btn-block">Subscribe</button>
</div>
</div>
</form>
Sự 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 ta đã thấy 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 ưu điểm 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.
HTML của biểu mẫu đăng ký, tìm kiếm cung cấp cho bạn HTML bố cục để plugin vào ứng dụng.
Tải xuống