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

Static Control

Nếu bạn cần chèn văn bản thuần kế bên 01 nhãn nằm trong 01 form ngang , dùng lớp .form-control-static trong 01 thẻ <p>

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@Ví dụ:.com</p>
    </div>
  </div>
</form>

---

Nhóm input trong Bootstrap

Lớp .input-group là 01 lớp chứa khoảng trống để thêm vào 01 biểu tượng ,văn bản, hoặc nút bấm trước hoặc sau đổi tượng input.

Lớp .input-group-addon đính với 01 biểu tượng hoặc chú thích kế bên trường input.

Ví dụ:

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
  </div>
</form>

Lớp .input-group-btn đính với 01 nút kế bên input. Ví dụ điển hình là thanh tìm kiếm.

Ví dụ:

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>

---

Các điều khiển Bootstrap hiển thị tình trạng

• INPUT FOCUS - đường viền của ô nhập liệu sẽ bị xóa đi và thay vào là 01 hộp có bóng đổ hiệu ứng xảy ra trên
• DISABLED INPUTS- thêm 01 thuộc tính disabled để vô hiệu hóa 01 ô nhập liệu.
• DISABLED FIELDSETS - thêm 01 thuộc tính disabled cho 01 tập hợp các điều khiển bên trong fieldset để vô hiệu hóa chúng.
• READONLY INPUTS - thêm 01 thuộc tính readonly vào 01 ô nhập liệu để ngăn người sử dụng nhập vào.
• VALIDATION STATES - Bootstrap cung cấp 01 định dạng validation dành cho trường hợp báo lỗi, cảnh báo, và thông điệp thành công. Để sử dụng ta thêm .has-warning,.has-error, hoặc .has-success vào đổi tượng cha.
• ICONS - Bạn có thể thêm biểu tượng feedback bằng lớp .has-feedback và 01 biểu tượng.
• HIDDEN LABELS - thêm 01 lớp .sr-only đối với các nhãn chìm

Ví dụ sau mô tả vài điều khiển hiển thị tình trạng trên 01 form ngang.

Ví dụ:

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>

Và đây là 01 ví dụ về các điều khiển hiển thị tình trạng trong 01 Inline form:

<form class="form-inline">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

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