Bootstrap hình thức nội tuyến 4

Đâ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



 



Vertical Form


Bootstrap hình thức nội tuyến 4

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ẻ labelcho 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
    
    
    
     
    


    

Horizontal Form


Bootstrap hình thức nội tuyến 4

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
    
    
    
     
    


    

Horizontal Form

0 giúp chúng ta canh lề trái cho cột

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
    
    
    
     
    


    

Inline Form


Bootstrap hình thức nội tuyến 4

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
    
    
    
     
    


    

Horizontal Form

1 thì có ngay form đẹp mắt rồi đấy

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