Chia sẻ mọi kiến thức trong nhiều lĩnh vực và cuộc sống

Dịch vụ thiết kế web, tư vấn thiết kế web, SEO liên hệ Công ty thiết kế web chuyên nghiệp, chuẩn SEO. Email: info@osvn.com.vn website: www.osvn.com.vn - www.ithietkeweb.net

Bootstrap Forms

♠ Posted by Hà Phạm in , at 12:38 AM

Bootstrap Form Layouts

Bootstrap cung cấp ba loại hình thức bố trí:
  • Vertical Form (Form theo chiều dọc, đây là mặc định)
  • Horizontal Form (Form ngang)
  • Inline Form
Quy tắc tiêu chuẩn cho tất cả ba loại hình thức bố trí:
  • Thêm vai trò = "hình thức" để <form> yếu tố
  • Chuyển nhãn và hình thức kiểm soát trong một phần tử <div> với class = "hình thức nhóm" (cần thiết cho khoảng cách tối ưu)
  • Thêm class = "hình thức kiểm soát" cho tất cả các văn bản <input>, <textarea> và <chọn> yếu tố
Lưu ýMẹo: hình thức kiểm soát cá nhân tự động nhận được một số phong cách toàn cầu với Bootstrap. Tất cả văn bản <input>, <textarea> và <chọn> yếu tố với class = "hình thức kiểm soát" được thiết lập để width: 100%; theo mặc định.

Bootstrap Vertical Form (mặc định)

Ví dụ sau tạo một dạng thẳng đứng với hai lĩnh vực đầu vào, một hộp kiểm và nút gửi:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>Vertical (basic) form</h2>
      <form role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


Bootstrap Form Inline

Trong một hình thức nội tuyến, tất cả các yếu tố nội tuyến, canh trái, và nhãn bên cạnh.
Lưu ý: Điều này chỉ áp dụng đối với hình thức trong khung nhìn có ít nhất 768px rộng!
Quy định bổ sung cho việc tạo ra một hình thức nội tuyến:
  • Thêm class = "hình thức-nội tuyến" vào <form> yếu tố
Ví dụ sau đây tạo ra một hình thức nội tuyến với hai lĩnh vực đầu vào, một hộp kiểm và nút gửi:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>Inline form</h2>
      <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
      <form class="form-inline" role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


Mẹo: Nếu bạn không bao gồm một nhãn cho mỗi đầu vào, trình đọc màn hình sẽ gặp khó khăn với các hình thức của bạn. Bạn có thể ẩn các nhãn cho tất cả các thiết bị, ngoại trừ đọc màn hình, bằng cách sử dụng lớp .sr chỉ:

Ví dụ

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>


Bootstrap Form ngang

Một hình thức ngang đứng ngoài các hình thức khác cả về số lượng đánh dấu, và trong bài trình bày của biểu mẫu.
Quy định bổ sung cho việc tạo ra một hình thức ngang:
  • Thêm class = "hình thức ngang" vào <form> yếu tố
  • Thêm class = "kiểm soát nhãn" cho tất cả các nhãn
Mẹo: lớp lưới được xác định trước sử dụng Bootstrap để sắp xếp nhãn và nhóm của hình thức kiểm soát trong một bố cục ngang.
Ví dụ sau tạo một hình thức ngang với hai lĩnh vực đầu vào, một hộp kiểm và nút gửi:

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">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

0 comments:

Post a Comment