Đây là một dạng biến phổ biến mà chúng ta thường sử dụng khi xây dựng trang web giao diện cho các trang liên hệ, đặt hàng. vvv
Ví du.
Bootstrap 3 Vertical Form Layout .example{ margin: 20px; }Vertical Form
Mật KhẩuGhi NhớĐăng Nhập
dạng đứng
Tất cả các thành phần bên trong biểu mẫu đều được bao quanh bởi cặp thẻ form
và bên trong đó là lớp form-group
và bên trong thành phần đầu vào được định nghĩa bằng lớpform-control
, lớp này có tác dụng biểu định kiểu cho đầu vào thẻ. Nếu bạn bỏ lớp này ra thì đầu vào thẻ sẽ trở nên giống thẻ đầu vào html thông thường không còn hiệu ứng ouline khi nhấp vào nửa chuột. Hầu như mọi thành phần thuộc biểu mẫu html đều phải khai báo lớp này nếu như bạn xây dựng biểu mẫu bằng bootstrap
2. Biểu mẫu ngang trong bootstrap 3
Kiểu biểu mẫu này định dạng hơi phức tạp và có một chút kết hợp với hệ thống lưới để bố trí kích thước của biểu mẫu và thẻ label
cho hợp lý. Để có thể làm việc tốt với kiểu mẫu này, tôi cần các bạn lưu ý các lớp sau
Bài viết này đã được đăng tại [free tuts. bọc lưới]
- control-label [Khai báo lớp này ở nhãn thẻ mới có thể gán lớp col-xs-x vào được]
- form-horizontal [Định dạng form ngang]
- col-xs-offset-2 [Canh lề trái]
Được rồi, để có cái nhìn trực quan hơn với dạng này thì tôi có một ví dụ nhỏ như sau
Ví dụ.
Bootstrap 3 Vertical Form Layout .example{ margin: 20px; }Horizontal Form
Mật KhẩuĐăng Nhập
Hình ảnh dạng ngang
Trong ví dụ này tôi sử dụng định dạng col-xs-10
có nghĩa là lớp hỗ trợ kích thước màn hình nhỏ nhất để minh họa,
Bootstrap 3 Vertical Form Layout .example{ margin: 20px; }0 giúp chúng ta canh lề trái cho cộtHorizontal Form
Mật KhẩuĐăng Nhập
3. Biểu mẫu nội tuyến trong bootstrap 3
Đây là dạng đơn giản nhất mà các bạn thường gặp khi thiết kế website. Để hiển thị kiểu biểu mẫu nội tuyến thì tôi có ví dụ nhỏ để minh họa trực tiếp quan trọng hơn là cứ nói thoải mái
Ví dụ.
Bootstrap 3 Vertical Form Layout .example{ margin: 20px; }Inline Form
Đăng Nhập
Hình ảnh biểu mẫu nội tuyến
Kiểu form này khá đơn giản chỉ cần gán vào tag form class
Bootstrap 3 Vertical Form Layout .example{ margin: 20px; }1 thì có ngay form đẹp mắt rồi đấyHorizontal Form
Mật KhẩuĐăng Nhập
Lời kết
Bootstrap Form hỗ trợ khá nhiều chứ không nhất thiết phải dừng lại ở 3 kiểu form như vậy. Các bạn có thể lên trang chủ bootstrap để tìm hiểu thêm về nó, còn bạn nào học tiếng anh thì hãy chờ bài nâng cao của mình nhé hoặc mình sẽ hướng dẫn trong phần project