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

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. Tiếp thị nội dung chính là việc tối ưu hóa và phân phối nội dung, việc làm có giá trị...
    2 giây trước
  2. "SAI LẦM" là một điều không tránh khỏi ở bất cứ ai và không ngoại trừ ngành nghề nào. Nhất là...
    10 giây trước
  3. Hướng dẫn chi tiết từng bước Cách Chuyển Joomla 1.0.x, 2.0.x, 3.x sang WordPress không làm mất Link và không...
    25 giây trước
  4. Chào các bạn mình tên là Hường, hiện mình đang là thành viên của Team content Lamvt. Cơ duyên để mình...
    17 giây trước
  5. Thiết kế Web thiết bị đo đạc kỹ thuật là website hỗ trợ bán hàng cho doanh nghiệp kinh doanh...
    29 giây trước
  6. Copywriting là nghệ thuật và khoa học tạo ra nội dung nhắc nhở người đọc, người dùng mua một sản...
    7 giây trước
  7. Sau khi sử dụng FFMPEG, tôi phải thốt lên rằng “Đây quả là phần mềm xử lý video trên Youtube...
    9 giây trước
  8. Nghiên cứu từ khóa là một trong những hoạt động quan trọng, có giá trị cao nhất trong lĩnh vực...
    4 giây trước
  9. Một ngày đẹp trời, một nick lạ hoắc với tên là nữ, ảnh đại diện rất xinh inbox tới Lamvt...
    14 giây trước
  10. Bạn đang cố gắng nỗ lực cải thiện tốc độ load trang Web của mình trên các thiết bị di...
    2 giây trước