By GokiSoft.com| 19:28 12/10/2020|
Tài Liệu Bootstrap

Bootstrap 4 Form Inputs

Supported Form Controls

Bootstrap hỗ trợ các trường biểu mẫu sau:

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap Input

Bootstrap hỗ trợ tất cả các loại input của HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, và color.

Ví dụ sau có chứa hai trường input; một có type="text" và một là type="password". Như chúng ta đã đề cập trong bài Bootstrap Forms, ta sử dụng class .form-control để style trường inputs với full-width và padding, vv:

Ví dụ

<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

Ví dụ sau có chứa một textarea:

Ví dụ

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


Bootstrap Checkboxes

Ví dụ sau chứa ba checkboxes. Checkbox cuối là disabled:

Ví dụ

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

Giải thích ví dụ

Hãy dùng phần tử <div> bao bọc có class="form-check" để đảm bảo margins cho labels và checkboxes.

Add class .form-check-label cho phần tử label, và .form-check-input để style chuẩn checkboxes bên trong .form-check.


Inline Checkboxes

Sử dụng class .form-check-inline nếu bạn muốn checkboxes hiển thị trên một dòng:

Ví dụ

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


Bootstrap Radio Buttons

Ví dụ sau chứa ba radio buttons. Radio button cuối là disabled:

Ví dụ

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

Cũng như checkboxes, sử dụng class .form-check-inline nếu bạn muốn radio buttons hiển thị trên cùng một dòng:

Ví dụ

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


Bootstrap Select List


Ví dụ sau đây cho thấy một dropdown list (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>

Form Control Sizing

Thay đổi kích cỡ của form control với .form-control-sm hoặc .form-control-lg:

Ví dụ

<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">


Form Control với Plain Text

Sử dụng class .form-control-plaintext nếu bạn muốn style trường input kiểu plain text:

Ví dụ

<input type="text" class="form-control-plaintext">

Form Control File và Range

Add class .form-control-range cho input type="range" hoặc .form-control-file cho input type="file" cho một range control hoặc một trường input type="file":

Ví dụ

<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó