Bootstrap Form Inputs2

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

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

Read More

Bootstrap Form Inputs

♠ Posted by Hà Phạm in Bootstrap,Bootstrap Form Inputs,học Bootstrap

Bài hôm nay, Thiết kế web Hà Nội sẽ cùng các bạn tìm hiểu tiếp về Bootstrap Form Inputs. Các bạn hãy làm luôn code để có thể trải nghiệm luôn nhé!

Hỗ trợ điều khiển Form

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

• Input
• Textarea
• Checkbox
• Radio
• Select

---

Bootstrap Input

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

Lưu ý: Đầu vào sẽ không được theo kiểu hoàn toàn nếu loại của họ không được khai báo đúng!

Ví dụ sau đây có hai yếu tố đầu vào; một trong các loại văn bản và một trong những loại mật khẩu:

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>

Xem thêm: Bootstrap Form

---

Bootstrap Textarea 

Ví dụ sau đây có chứa một vùng văn bản:

Ví dụ

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

---

Bootstrap CheckBoxes

Hộp kiểm tra được sử dụng nếu bạn muốn người dùng lựa chọn bất kỳ số lượng tùy chọn từ một danh sách các tùy chọn cài sẵn.

Ví dụ sau đây chứa ba hộp kiểm tra. Trường hợp cuối cùng là vô hiệu hóa (disabed):

Ví dụ

<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 hộp kiểm để xuất hiện trên cùng một 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

Nút radio được sử dụng nếu bạn muốn giới hạn người sử dụng chỉ là một lựa chọn từ một danh sách các tùy chọn cài sẵn.

Ví dụ sau có ba nút radio. Trường hợp cuối cùng là vô hiệu hóa (disabed):

Ví dụ

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

Sử 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 một 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>

---

Bootstrap List

Chọn danh sách được sử dụng nếu bạn muốn cho phép người dùng chọn từ nhiều lựa chọn.

Ví dụ sau đây có chứa một danh sách thả xuống (danh sách lựa chọn):

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>

Read More