Chào mừng bạn đến với Lamvt Group

Bootstrap Inputs bootstrap (phần 1)

Bootstrap Inputs bootstrap (phần 1)
5 (100%) 6 votes

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

Hot Trend: Cửa chống cháy, bảng chữ cái tiếng Việt, bảng chữ cái tiếng Nhật, font chữ đẹp, font vni

Bài Viết Liên Quan

sponsored links - Liên kết được tài trợ

Dương Thành Trung

– Ngày sinh: 16/06
– Quê quán: Lạc Đạo – Văn Lâm- Hưng Yên
Tốt nghiệp Đại học Xây dựng Dương Thành Trung được hướng dẫn về HTML, CSS, JS, Php, MySql và CMS WordPress với nhiều năm trợ giảng cùng Lamvt và nay là Giáo viên dạy lập trình Thiết kế Web tại REACH

liên hệ

Phone

0169 981 5232

Address

Số 25, Phú Thứ - Tây Mỗ, Nam Từ Liêm, Hà Nội

Email

Lamvt19792003@gmail.com

Copyright © 2017 by Lamvt Group. All right reserved.