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í 15++ 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

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. Cho dù bạn tập trung vào nỗ lực B2B hay B2C, tạo ra nhiều lưu lượng truy cập web hơn...
    2 giây trước
  2. Tập tin .htaccess là một tập tin cấu hình mạnh mẽ cho phép bạn làm rất nhiều thứ trên trang...
    4 giây trước
  3. Với một người dùng Facebook thì sẽ rất quen thuộc với các công cụ thông thường như thêm / xóa...
    23 giây trước
  4. Trong một thế giới mà Google cố gắng làm cho SERP (Bảng xếp hạng kết quả tìm kiếm (tự nhiên)...
    25 giây trước
  5. Bạn là một doanh nhân, bạn đang có nhu cầu xây dựng và quảng cáo thương hiệu của mình. Nhưng...
    11 giây trước
  6. Bạn có biết rằng mỗi người trung bình 1 trong 8 phút trực tuyến là dành trên Facebook? Là một chuyên...
    24 giây trước
  7. Bạn đã bắt đầu một blog, và vài bài đăng đầu tiên của bạn thật tuyệt vời. Từ khoá của...
    8 giây trước
  8. Một bài viết dù nội dung hay, sâu sắc nhưng cách đặt tiêu đề không thu hút cũng khó thu...
    25 giây trước
  9. Nội dung SEO là gì? Nội dung SEO là nội dung trực tuyến được thiết kế để xếp hạng trong...
    14 giây trước
  10. 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...
    19 giây trước