Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Bootstrap Form – Biểu mẫu Bootstrap

5/5 - (5 bình chọn)

Trong bài này chúng ta sẽ cùng nhau tìm hiểu về Bootstrap form. Form được sử dụng khá nhiều trong giao diện: form đăng ký, form đăng nhập, form đặt hàng,… Trong thư viện bootstrap có những lớp giúp bạn dễ dàng tùy chỉnh form mà không cần tốn nhiều công sức để style nó. Cụ thể chúng ta cùng tìm hiểu:

  1. Cài đặt mặc định của bootstrap form

Tất cả các phần tử văn bản <input>, <textarea> và <select> có thành phần lớp .form-control thì có chiều rộng 100%.

Xem Thêm: Bootstrap table Bảng Bootstrap

  1. Bố cục bootstrap form

Bootstrap form có 3 loại bố cục:

  • Vertical form – Bố cục theo chiều dọc (bố cục mặc định)
  • Horizontal form – Bố cục theo chiều ngang
  • Inline form – Bố cục nội tuyến

Các quy tắc tiêu chuẩn cho cả 3 bố cục trên là:

  • Được bao bọc trong <div class=“form-group”> -> Điều này là cần thiết để tạo khoảng cách tối ưu giữa các phần.

Ví dụ khi chưa sử dụng <div class=“form-group”> :

Bootstrap Form – Biểu mẫu Bootstrap 1

Khi sử dụng <div class=“form-group”> :

Bootstrap Form – Biểu mẫu Bootstrap 2

+ Thêm  lớp .form-control để tạo kiểu cho các phần tử văn bản <input>, <textarea> và <select>.

Các thuộc tính của lớp .form-control:

Bootstrap Form – Biểu mẫu Bootstrap 03

Ví dụ khi chưa thêm lớp .form-control  và Khi thêm lớp .form-control:

Bootstrap Form – Biểu mẫu Bootstrap 3

Xem Thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap

  1. Chi tiết bố cục form

Tiếp theo, chúng ta sẽ đi sâu hơn vào các loại bố cục form:

  • Bootstrap Vertical Form – Bố cục theo chiều dọc: Dưới đây là ví dụ về form có bố cục theo chiều dọc điển hình.

Bootstrap Form – Biểu mẫu Bootstrap 5

  • Bootstrap Horizontal form – Bố cục theo chiều ngang

Với bố cục form theo chiều ngang cần thêm một số quy tắc:

+ Thêm lớp .form-horizontal vào phần tử <form>

+ Thêm lớp .control-label vào tất cả các phần từ <label>

+ Sử dụng các lớp lưới để tạo bố cục nằm ngang

Bootstrap Form – Biểu mẫu Bootstrap 6

  • Bootstrap Inline form – Bố cục nội tuyến: Trong bố cục nội tuyến tất cả các phần tử đều nằm trên một dòng.

(Lưu ý: bố cục nội tuyến này chỉ áp dụng cho màn hình có kích thước tối thiểu 768px.

Với bố cục form nội tuyến cũng có quy tắc bổ sung:

+ Thêm lớp .form-inline vào phần tử <form>

Bootstrap Form – Biểu mẫu Bootstrap 7

Nếu bạn không cho nhãn <label> vào mỗi phần tử đầu vào <input> thì trình đọc màn hình sẽ gặp khó khăn với các biểu mẫu của bạn. Đối với các mẫu nội tuyến  này, bạn có thể ẩn các nhãn bằng cách sử dụng lớp .sr-only

Bootstrap Form – Biểu mẫu Bootstrap 88

Tổng kết

Trong bài này chúng ta đã cùng nhau tìm hiểu các bố cục form và cách tùy chỉnh form bằng các sử dụng các lớp có sẵn của thư viện bootstrap. Ở bài sau, chúng ta sẽ đi sâu hơn vào các phần tử đầu vào <input>.

Xem Thêm: AMP HTML là gì

 

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Xin chào mọi người, tuần trước ở phần 1 chúng ta đã hiểu được Mảng là gì?  Có những kiểu mảng nào trong PHP?......
    19 giây trước
  2. Nếu bạn đã một lần ghé thăm HADACO.VN thì chắc hẳn bạn sẽ vô cùng ngạc nhiên. Không chỉ được...
    23 giây trước
  3. Bạn đang muốn thêm, add bạn bè của mình trên Facebook vào 1 Group chung để phục vụ cho mục...
    19 giây trước
  4. Hiện nay có rất nhiều trang web thương mại cho sản phẩm thiết bị phòng tắm, thiết bị xông hơi,...
    21 giây trước
  5. Các chuyên gia SEO đã làm rất tốt hai việc: Họ xác định kỹ thuật SEO một cách chính xác...
    24 giây trước
  6. Gần đây một vài bạn đã hỏi chúng tôi làm thế nào để tắt lỗi PHP trong WordPress? Cảnh báo...
    25 giây trước
  7. Để được xếp top trong Google là mục đích của bất cứ trang web nào, bởi vậy Google đã đưa ra những...
    17 giây trước
  8. Website kinhvietnhathailong.vn là một trong những trang web về các sản phẩm về kính. Bao gồm vách kính cường lực,...
    23 giây trước
  9. Bắt lão nhà giàu Google trả tiền cho bạn có lẽ là điều dễ dàng nhất mà bất kỳ một...
    28 giây trước
  10. Có bao giờ bạn tự hỏi liệu có mẹo, thủ thuật WordPress nào mà nhiều cao thủ WordPress đang dùng ...
    8 giây trước