Bootstrap Form Inputs2

♠ Posted by Hà Phạm in Bootstrap Form Inputs,học Bootstrap,thiết kế website tại Hà Nội at 8:12 AM

Bài trước mình đã cùng các bạn tìm hiểu về Bootstrap Form Inputs rồi, hôm nay chúng ta sẽ tiếp tục đi sâu hơn về nó nhé. Bài viết hôm nay, thiết kế website tại Hà Nội sẽ cùng tìm hiểu sâu hơn các vấn đề liên quan đến Form và bạn sẽ thấy nó rất thú vị đó!

Static Control

Nếu bạn cần phải đặt một đoạn text bình thường trên nhãn bên trong input, sử dụng .form-control-static trên một thẻ<p>:

Ví dụ

 <form class="form-horizontal" role="form">
  <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@example.com</p>
    </div>
  </div>
</form>

---

Bootstrap Form Control States

• INPUT FOCUS: Khi một đầu vào nhận được Focus, các phác thảo của đầu vào là bị loại bỏ và box-shadow được áp dụng 
• DISABLED INPUTS: Nếu bạn cần phải vô hiệu hóa một đầu vào, thêm các thuộc tính Disabled 
• DISABLED Fieldsets: Thêm thuộc tính disabled <fieldset> để vô hiệu hóa tất cả các điều khiển trong vòng 
• READONLY INPUTS: Thêm thuộc tính Readonly cho một Input vào để ngăn chặn người sử dụng nhập đầu vào 
• VALIDATION STATES: Bootstrap bao gồm phong cách xác nhận các thông báo lỗi, cảnh báo, và thành công. Để sử dụng, thêm .has-warning, .has-error hoặc .has-success cho những phần tử cha 
• BIỂU TƯỢNG ICONS: Bạn có thể thêm các biểu tượng thông tin phản hồi với class .has-feedback và các biểu tượng bên phải 
• NHÃN HIDDEN: Thêm class .sr-only cho điều khiển Form với no

Ví dụ sau đây cho thấy một số các kiểm soát hình thức trên trong một Horizontal form:

Ví dụ

<form class="form-horizontal" role="form">
  <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>

Hãy thử nó Yourself »

Và đây là một ví dụ của một số điều khiển Form trong một form Inline :

Ví dụ

<form class="form-inline" role="form">

  <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>

Bài viết cùng chủ đề:

• Bootstrap Form
• Bootstrap Form Inputs
• Bootstrao là gì? Giới thiệu về Bootstrap