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 Inputs bootstrap (phần 1)

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

Trong bài trước chúng ta đã cùng nhau tìm hiểu về Bootstrap Form, những class hữu ích giúp bạn dễ dàng tùy chỉnh phong cách Form theo ý bạn.

Xem Thêm: Bootstrap Form – Biểu mẫu Bootstrap

Trong bài này, chúng ta sẽ tìm hiểu rõ hơn về các thẻ đầu vào (input): những thẻ đầu vào (input) nào được bootstrap hỗ trợ và cách những thẻ đầu vào (input) hiển thị ra ngoài màn hình:

Bootstrap hỗ trợ các loại thẻ đầu vào sau: Input, textarea, checkbox, radio, select.

  1. Bootstrap Input

Ví dụ Bootstrap input: biểu mẫu bên dưới chứa 2 loại phần tử:  một loại văn bản và một loại mật khẩu.

Bootstrap Inputs bootstrap (phần 1) 1-1024x438

  1. Bootstrap Textarea

Ví dụ Bootstrap Textarea: biểu mẫu bên dưới chứa một vùng văn bản loại bình luận.

Bootstrap Inputs bootstrap (phần 1) 2

Xem Thêm: Bootstrap table Bảng Bootstrap

  1. Bootstrap Checkbox

Checkbox được sử dụng nếu bạn muốn người dùng chọn cùng lúc nhiều lựa chọn khác nhau có sẵn.

Ví dụ sau có 3 checkboxes nhưng tùy chọn cuối cùng đã bị vô hiệu hóa (để vô hiệu hóa một tùy chọn bạn sử dụng thêm thuộc tính disable).

Bootstrap Inputs bootstrap (phần 1) 3

  • Nếu bạn muốn các checkbox của mình cùng nằm trên một hàng ngang, sử dụng thêm class .checkbox-inline

Bootstrap Inputs bootstrap (phần 1) 4

  1. Bootstrap Radio Buttons

Nút Radio được sử dụng nếu bạn muốn người dùng chỉ được chọn một trong các tùy chọn có sẵn

Bootstrap Inputs bootstrap (phần 1) 5

Cũng như checkbox, để các nút radio cùng nằm trên một hàng ngang, sử dụng thêm class .radio-inline.

Bootstrap Inputs bootstrap (phần 1) 6

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

  1. Bootstrap Select List

Bootstrap select list có 2 loại:

  • Loại 1: Tạo ra một bảng tùy chọn trong đó chỉ được lựa chọn 1 trong các tùy chọn có sẵn trong danh sách chọn:

Bootstrap Inputs bootstrap (phần 1) 7

  • Loại 2: Tạo ra một bảng tùy chọn trong đó có thể lựa chọn 1 hoặc nhiều tùy chọn bằng cách thêm thuộc tính multiple. Để lựa chọn nhiều tùy chọn bằng cách giữ Ctrl hoặc Shift hoặc kéo chuột

Bootstrap Inputs bootstrap (phần 1) 8

Kết

Qua phần trên chúng ta đã biết các thẻ đầu vào (input) nào được bootstrap hỗ trợ và cách chúng hiển thị trên màn hình. Trong bài sau chúng ta sẽ tìm hiểu rõ hơn: làm thế nào để sử dụng các class của bootstrap để tùy chỉnh các thẻ đầu vào (input) theo ý bạn: thêm icon, tùy chỉnh kích thước…

Trước tiên, bạn hãy thực hành lại phần bài trên để nhớ và hiểu hơn về bootstrap input, qua phần bài tiếp theo bạn sẽ dễ dàng tiếp nhận kiến thức mới hơn.

Xem Thêm: Dịch vụ thiết kế website

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...
    13 giây trước
  2. Các bạn đã biết cách cài đặt và sử dụng Google Analytics, cũng như nắm được những tính năng quan...
    5 giây trước
  3. Hiện nay theo thống kê có đến hơn 90% số người có xu hướng ưa chuộng các nội dung xuất...
    15 giây trước
  4. Đối với người mới học WordPress trong phần nâng cao cần hiểu biết cách xây dựng code cho mình một...
    18 giây trước
  5.  Hướng dẫn hoàn chỉnh cho người mới Domain Authority score (điểm thẩm quyền của tên miền trang web). Là một...
    14 giây trước
  6. Viết bài chuẩn SEO là cách nhanh nhất giúp tăng thứ bậc website của bạn. Vậy làm thế nào để...
    2 giây trước
  7. Câu hỏi Phiên bản WP 4.2 đã giới thiệu thêm chức năng emojis (mặt cười). Về cơ bản, emojis này sẽ...
    10 giây trước
  8. Hiện nay có hơn hai tỷ người tích cực sử dụng Google Chrome. Trình duyệt này có rất nhiều tính...
    19 giây trước
  9. Chúng ta đều biết về Google AdSense. Đây là một dịch vụ quảng cáo của Google và cho phép đặt...
    17 giây trước
  10. Nhu cầu sở hữu những website chất lượng, thu hút người dùng đang ngày càng gia tăng đối với các...
    13 giây trước