Tự học Bootstrap - Cơ bản - bài 23 - Định dạng thẻ Input

Các loại điều khiển được hỗ trợ

Bootstrap hỗ trợ các điều khiển sau:

• input
• textarea
• checkbox
• radio
• select

---

Bootstrap Input

Bootstrap hỗ trợ tất cả các dạng input chuẩn HTML5: văn bản, mật khẩu, ngày giờ, múi giờ, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, số điện thoại, và màu sắc.

Ghi chú: các ô nhập liệu sẽ KHÔNG được định dạng đầy đủ nếu không khai báo loại rõ ràng!

Ví dụ sau chứa 02 ô nhập liệu ; 01 là văn bản thuần và 01 là mật khẩu.

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

---

Bootstrap Textarea

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

---

Bootstrap Checkboxes

Checkboxes được sử dụng nếu bạn muốn người dùng lựa chọn bất kỳ 01 số tùy chọn từ 01 danh sách cho trước.

Ví dụ sau chứa 03 checkboxes. Tùy chọn cuối cùng bị vô hiệu.

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>

Sử dụng lớp .checkbox-inline nếu bạn muốn các checkboxes xuất hiện trên cùng dòng.

Ví dụ:

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

---

Bootstrap Radio Buttons

Các nút Radio được dùng nếu bạn muốn giới hạn người dùng chỉ được chọn 01 mục trong danh sách định sẵn.

Ví dụ sau chứa 03 nút radio. Tùy chọn cuối cùng bị vô hiệu.

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

Dùng lớp .radio-inline nếu bạn muốn các nút radio xuất hiện trên cùng dòng.

Ví dụ:

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

---

Danh sách select trong Bootstrap

Danh sách Select được dùng nếu bạn muốn cho phép người dùng chọn nhiều tùy chọn cùng lúc.

Ví dụ sau chứa 01 danh sách dropdown list (danh sách dạng select list):

Ví dụ:

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48