Source

Các hình thức

Các ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, các tùy chọn bố cục và các thành phần tùy chỉnh để tạo nhiều loại biểu mẫu.

Tổng quan

Các điều khiển biểu mẫu của Bootstrap mở rộng trên các kiểu biểu mẫu Khởi động lại của chúng tôi với các lớp. Sử dụng các lớp này để chọn tham gia các màn hình tùy chỉnh của chúng để hiển thị nhất quán hơn trên các trình duyệt và thiết bị.

Đảm bảo sử dụng một typethuộc tính thích hợp trên tất cả các đầu vào (ví dụ: emailcho địa chỉ email hoặc numbercho thông tin số) để tận dụng các điều khiển đầu vào mới hơn như xác minh email, chọn số và hơn thế nữa.

Đây là một ví dụ nhanh để chứng minh các kiểu biểu mẫu của Bootstrap. Hãy tiếp tục đọc tài liệu về các lớp bắt buộc, bố cục biểu mẫu và hơn thế nữa.

Chúng tôi sẽ không bao giờ chia sẻ email của bạn với bất kỳ ai khác. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Kiểm soát biểu mẫu

Các điều khiển dạng văn bản — như <input>s, <select>s và <textarea>s — được tạo kiểu với .form-controllớp. Bao gồm các kiểu dáng chung, trạng thái tiêu điểm, định cỡ và hơn thế nữa.

Hãy chắc chắn khám phá các biểu mẫu tùy chỉnh của chúng tôi để tạo kiểu mới hơn <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Đối với đầu vào tệp, hãy hoán đổi .form-controlcho .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Định cỡ

Đặt chiều cao bằng cách sử dụng các lớp như .form-control-lgvà .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Chỉ đọc

Thêm readonlythuộc tính boolean trên một đầu vào để ngăn việc sửa đổi giá trị của đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn (giống như đầu vào bị vô hiệu hóa), nhưng vẫn giữ lại con trỏ tiêu chuẩn.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Chỉ đọc văn bản thuần túy

Nếu bạn muốn có <input readonly>các phần tử trong biểu mẫu của mình được tạo kiểu như văn bản thuần túy, hãy sử dụng .form-control-plaintextlớp để loại bỏ kiểu trường biểu mẫu mặc định và bảo toàn lề và phần đệm chính xác.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Đầu vào phạm vi

Đặt đầu vào dải ô có thể cuộn theo chiều ngang bằng cách sử dụng .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Hộp kiểm và đài

Hộp kiểm và radio mặc định được cải thiện với sự trợ giúp của .form-check, một lớp duy nhất cho cả hai loại đầu vào giúp cải thiện bố cục và hành vi của các phần tử HTML của chúng . Hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio để chọn một tùy chọn trong số nhiều tùy chọn.

Hộp kiểm và radio bị vô hiệu hóa được hỗ trợ. Thuộc disabledtính sẽ áp dụng màu sáng hơn để giúp chỉ ra trạng thái của đầu vào.

Hộp kiểm và nút radio hỗ trợ xác thực biểu mẫu dựa trên HTML và cung cấp các nhãn ngắn gọn, dễ truy cập. Như vậy, các <input>s và <label>s của chúng ta là các phần tử anh chị em trái ngược với một <input>bên trong a <label>. Điều này hơi dài dòng hơn vì bạn phải chỉ định idvà forcác thuộc tính để liên quan đến <input>và <label>.

Mặc định (xếp chồng lên nhau)

Theo mặc định, bất kỳ số hộp kiểm và radio nào là anh em ngay lập tức sẽ được xếp chồng lên nhau theo chiều dọc và có khoảng cách thích hợp .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Nội tuyến

Nhóm các hộp kiểm hoặc đài trên cùng một hàng ngang bằng cách thêm .form-check-inlinevào bất kỳ .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Không có nhãn

Thêm .position-staticvào các đầu vào .form-checkkhông có bất kỳ văn bản nhãn nào. Hãy nhớ vẫn cung cấp một số dạng nhãn cho các công nghệ hỗ trợ (ví dụ: sử dụng aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Cách trình bày

Vì Bootstrap áp dụng display: blockvà width: 100%cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, các biểu mẫu theo mặc định sẽ xếp theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi biểu mẫu.

Nhóm hình thành

Lớp .form-grouplà cách dễ nhất để thêm một số cấu trúc vào biểu mẫu. Nó cung cấp một lớp linh hoạt khuyến khích nhóm các nhãn, điều khiển, văn bản trợ giúp tùy chọn và thông báo xác thực biểu mẫu phù hợp. Theo mặc định, nó chỉ áp dụng margin-bottom, nhưng nó chọn các kiểu bổ sung .form-inlinekhi cần thiết. Sử dụng nó với <fieldset>s, <div>s hoặc gần như bất kỳ phần tử nào khác.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Lưới biểu mẫu

Các biểu mẫu phức tạp hơn có thể được xây dựng bằng cách sử dụng các lớp lưới của chúng tôi. Sử dụng chúng cho các bố cục biểu mẫu yêu cầu nhiều cột, chiều rộng đa dạng và các tùy chọn căn chỉnh bổ sung.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Hàng biểu mẫu

Bạn cũng có thể hoán đổi .rowcho .form-row, một biến thể của hàng lưới tiêu chuẩn của chúng tôi ghi đè các rãnh cột mặc định để có bố cục chặt chẽ và nhỏ gọn hơn.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Các bố cục phức tạp hơn cũng có thể được tạo bằng hệ thống lưới.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Dạng ngang

Tạo biểu mẫu ngang với lưới bằng cách thêm .rowlớp để tạo nhóm và sử dụng các .col-*-*lớp để chỉ định chiều rộng của nhãn và điều khiển của bạn. Hãy chắc chắn thêm .col-form-labelvào các <label>s của bạn để chúng được căn giữa theo chiều dọc với các điều khiển biểu mẫu được liên kết của chúng.

Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo ra sự liên kết hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa padding-topnhãn đầu vào radio xếp chồng lên nhau của chúng tôi để căn chỉnh đường cơ sở văn bản tốt hơn.

Rađiô
Hộp kiểm 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Định cỡ nhãn dạng ngang

Đảm bảo sử dụng .col-form-label-smhoặc .col-form-label-lgcác <label>s hoặc <legend>s của bạn để tuân theo chính xác kích thước của .form-control-lgvà .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Định cỡ cột

Như được hiển thị trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số .cols nào trong dấu .rowhoặc .form-row. Họ sẽ chia đều chiều rộng có sẵn giữa chúng. Bạn cũng có thể chọn một tập hợp con các cột của mình để chiếm nhiều hơn hoặc ít hơn không gian, trong khi các cột còn lại .colchia đều phần còn lại, với các lớp cột cụ thể như .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Tự động định cỡ

Ví dụ dưới đây sử dụng tiện ích flexbox để căn giữa nội dung theo chiều dọc và thay đổi .colđể .col-autocác cột của bạn chỉ chiếm nhiều dung lượng khi cần thiết. Nói một cách khác, các kích thước cột tự nó dựa trên nội dung.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Sau đó, bạn có thể kết hợp lại điều đó một lần nữa với các lớp cột theo kích thước cụ thể.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Và tất nhiên các điều khiển biểu mẫu tùy chỉnh được hỗ trợ.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Biểu mẫu nội tuyến

Sử dụng .form-inlinelớp để hiển thị một loạt các nhãn, điều khiển biểu mẫu và các nút trên một hàng ngang. Các điều khiển biểu mẫu trong biểu mẫu nội tuyến hơi khác so với trạng thái mặc định của chúng.

  • Các điều khiển là display: flex, thu gọn bất kỳ khoảng trắng HTML nào và cho phép bạn cung cấp khả năng kiểm soát căn chỉnh với các tiện ích giãn cách và flexbox .
  • Các điều khiển và nhóm đầu vào nhận được width: autođể ghi đè mặc định của Bootstrap width: 100%.
  • Các điều khiển chỉ xuất hiện nội tuyến trong các cửa sổ xem có chiều rộng ít nhất là 576px để tính đến các cửa sổ xem hẹp trên thiết bị di động.

Bạn có thể cần phải giải quyết thủ công chiều rộng và căn chỉnh của các điều khiển biểu mẫu riêng lẻ bằng các tiện ích giãn cách (như được hiển thị bên dưới). Cuối cùng, hãy đảm bảo luôn bao gồm một <label>điều khiển mỗi biểu mẫu, ngay cả khi bạn cần ẩn nó khỏi những khách truy cập không sử dụng trình đọc màn hình .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Các điều khiển và lựa chọn biểu mẫu tùy chỉnh cũng được hỗ trợ.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Các lựa chọn thay thế cho các nhãn ẩn

Các công nghệ hỗ trợ như trình đọc màn hình sẽ gặp rắc rối với biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi đầu vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn các nhãn bằng cách sử dụng .sr-onlylớp. Có nhiều phương pháp thay thế khác để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như aria-labelhoặc aria-labelledbythuộc titletính. Nếu không có trong số này, các công nghệ hỗ trợ có thể sử dụng placeholderthuộc tính, nếu có, nhưng lưu ý rằng không nên sử dụng thuộc placeholdertính này để thay thế cho các phương pháp ghi nhãn khác.

Văn bản trợ giúp

Văn bản trợ giúp cấp khối trong biểu mẫu có thể được tạo bằng cách sử dụng .form-text(trước đây được gọi là .help-blocktrong phiên bản v3). Văn bản trợ giúp nội tuyến có thể được triển khai linh hoạt bằng cách sử dụng bất kỳ phần tử HTML nội tuyến nào và các lớp tiện ích như .text-muted.

Liên kết văn bản trợ giúp với các điều khiển biểu mẫu

Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu mà nó liên quan đến việc sử dụng aria-describedbythuộc tính. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ — chẳng hạn như trình đọc màn hình — sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc vào điều khiển.

Văn bản trợ giúp bên dưới đầu vào có thể được tạo kiểu với .form-text. Lớp này bao gồm display: blockvà thêm một số lề trên để dễ dàng giãn cách từ các đầu vào ở trên.

Mật khẩu của bạn phải dài 8-20 ký tự, chứa các chữ cái và số, đồng thời không được chứa dấu cách, ký tự đặc biệt hoặc biểu tượng cảm xúc. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội dòng điển hình nào (có thể là a <small>, <span>hoặc thứ gì đó khác) mà không có gì khác hơn ngoài một lớp tiện ích.

Phải dài 8-20 ký tự. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Biểu mẫu bị vô hiệu hóa

Thêm disabledthuộc tính boolean vào một đầu vào để ngăn các tương tác của người dùng và làm cho nó trông nhẹ hơn.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Thêm disabledthuộc tính vào a <fieldset>để tắt tất cả các điều khiển bên trong.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Báo trước với neo

Theo mặc định, các trình duyệt sẽ coi tất cả các điều khiển biểu mẫu gốc ( <input>và <select>các <button>phần tử) bên trong <fieldset disabled>là bị vô hiệu hóa, ngăn chặn cả tương tác bàn phím và chuột trên chúng. Tuy nhiên, nếu biểu mẫu của bạn cũng bao gồm <a ... class="btn btn-*">các phần tử, thì những phần tử này sẽ chỉ có kiểu là pointer-events: none. Như đã lưu ý trong phần về trạng thái bị vô hiệu hóa cho các nút (và cụ thể là trong phần phụ cho các phần tử neo), thuộc tính CSS này chưa được chuẩn hóa và không được hỗ trợ đầy đủ trong Internet Explorer 10 và sẽ không ngăn người dùng bàn phím có thể tập trung hoặc kích hoạt các liên kết này. Vì vậy, để an toàn, hãy sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết như vậy.

Khả năng tương thích trên nhiều trình duyệt

Mặc dù Bootstrap sẽ áp dụng các kiểu này trong tất cả các trình duyệt, nhưng Internet Explorer 11 trở xuống không hỗ trợ đầy đủ disabledthuộc tính trên a <fieldset>. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa tập trường trong các trình duyệt này.

Thẩm định

Cung cấp phản hồi có giá trị, có thể hành động cho người dùng của bạn với xác thực biểu mẫu HTML5– có sẵn trong tất cả các trình duyệt được hỗ trợ của chúng tôi . Chọn từ phản hồi xác thực mặc định của trình duyệt hoặc triển khai các thông báo tùy chỉnh với các lớp và JavaScript khởi động được tích hợp sẵn của chúng tôi.

Hiện tại, chúng tôi khuyên bạn nên sử dụng các kiểu xác thực tùy chỉnh, vì thông báo xác thực mặc định của trình duyệt gốc không được hiển thị nhất quán với các công nghệ hỗ trợ trong tất cả các trình duyệt (đáng chú ý nhất là Chrome trên máy tính để bàn và thiết bị di động).

Làm thế nào nó hoạt động

Đây là cách xác thực biểu mẫu hoạt động với Bootstrap:

  • Xác thực biểu mẫu HTML được áp dụng thông qua hai lớp giả của CSS :invalidvà :valid. Nó áp dụng cho <input>, <select>và <textarea>các phần tử.
  • Bootstrap mở rộng phạm vi :invalidvà các :validkiểu cho lớp cha .was-validated, thường được áp dụng cho <form>. Nếu không, bất kỳ trường bắt buộc nào không có giá trị sẽ hiển thị là không hợp lệ khi tải trang. Bằng cách này, bạn có thể chọn thời điểm kích hoạt chúng (thường là sau khi thử gửi biểu mẫu).
  • Để đặt lại giao diện của biểu mẫu (ví dụ: trong trường hợp gửi biểu mẫu động bằng AJAX), hãy xóa .was-validatedlớp khỏi lớp <form>đó sau khi gửi.
  • Là một dự phòng .is-invalidvà .is-validcác lớp có thể được sử dụng thay vì các lớp giả để xác thực phía máy chủ . Họ không yêu cầu một .was-validatedlớp cha.
  • Do những hạn chế về cách hoạt động của CSS, chúng tôi (hiện tại) không thể áp dụng các kiểu cho một <label>điều khiển biểu mẫu trong DOM mà không có sự trợ giúp của JavaScript tùy chỉnh.
  • Tất cả các trình duyệt hiện đại đều hỗ trợ API xác thực ràng buộc , một loạt các phương pháp JavaScript để xác thực các điều khiển biểu mẫu.
  • Thông báo phản hồi có thể sử dụng các mặc định của trình duyệt (khác nhau đối với từng trình duyệt và không thể xóa thông qua CSS) hoặc các kiểu phản hồi tùy chỉnh của chúng tôi với HTML và CSS bổ sung.
  • Bạn có thể cung cấp thông báo hợp lệ tùy chỉnh bằng setCustomValidityJavaScript.

Với ý nghĩ đó, hãy xem xét các bản trình diễn sau cho các kiểu xác thực biểu mẫu tùy chỉnh của chúng tôi, các lớp phía máy chủ tùy chọn và mặc định của trình duyệt.

Phong cách tùy chỉnh

Đối với thông báo xác thực biểu mẫu Bootstrap tùy chỉnh, bạn sẽ cần thêm novalidatethuộc tính boolean vào của mình <form>. Thao tác này vô hiệu hóa chú giải công cụ phản hồi mặc định của trình duyệt, nhưng vẫn cung cấp quyền truy cập vào các API xác thực biểu mẫu trong JavaScript. Cố gắng gửi biểu mẫu dưới đây; JavaScript của chúng tôi sẽ chặn nút gửi và chuyển tiếp phản hồi cho bạn. Khi cố gắng gửi, bạn sẽ thấy các kiểu :invalidvà :validkiểu được áp dụng cho các điều khiển biểu mẫu của mình.

Kiểu phản hồi tùy chỉnh áp dụng màu tùy chỉnh, đường viền, kiểu tiêu điểm và biểu tượng nền để truyền đạt phản hồi tốt hơn. Biểu tượng nền cho <select>s chỉ khả dụng với .custom-selectvà không .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Mặc định của trình duyệt

Không quan tâm đến thông báo phản hồi xác thực tùy chỉnh hoặc viết JavaScript để thay đổi hành vi của biểu mẫu? Tất cả tốt, bạn có thể sử dụng mặc định của trình duyệt. Hãy thử gửi biểu mẫu bên dưới. Tùy thuộc vào trình duyệt và hệ điều hành của bạn, bạn sẽ thấy một kiểu phản hồi hơi khác nhau.

Mặc dù không thể tạo kiểu cho các kiểu phản hồi này bằng CSS, nhưng bạn vẫn có thể tùy chỉnh văn bản phản hồi thông qua JavaScript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Phía máy chủ

Chúng tôi khuyên bạn nên sử dụng xác thực phía máy khách, nhưng trong trường hợp bạn yêu cầu xác thực phía máy chủ, bạn có thể chỉ ra các trường biểu mẫu không hợp lệ và hợp lệ với .is-invalidvà .is-valid. Lưu ý rằng .invalid-feedbackcũng được hỗ trợ với các lớp này.

Có vẻ tốt!
Có vẻ tốt!
@
Vui lòng chọn một tên người dùng.
Vui lòng cung cấp một thành phố hợp lệ.
Vui lòng chọn một trạng thái hợp lệ.
Vui lòng cung cấp một mã zip hợp lệ.
Bạn phải đồng ý trước khi gửi. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Các yếu tố được hỗ trợ

Các kiểu xác thực có sẵn cho các thành phần và điều khiển biểu mẫu sau:

  • <input>s và <textarea>s với .form-control(bao gồm tối đa một .form-controltrong các nhóm đầu vào)
  • <select>s với .form-controlhoặc.custom-select
  • .form-checkS
  • .custom-checkboxs và .custom-radios
  • .custom-file
Vui lòng nhập tin nhắn vào vùng văn bản.
Ví dụ văn bản phản hồi không hợp lệ
Thêm ví dụ về văn bản phản hồi không hợp lệ
Ví dụ về phản hồi lựa chọn tùy chỉnh không hợp lệ
Ví dụ về phản hồi tệp tùy chỉnh không hợp lệ 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Chú giải công cụ

Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể hoán đổi các .{valid|invalid}-feedbacklớp cho .{valid|invalid}-tooltipcác lớp để hiển thị phản hồi xác thực trong một chú giải công cụ được tạo kiểu. Đảm bảo có phụ huynh đi cùng position: relativeđể định vị chú giải công cụ. Trong ví dụ bên dưới, các lớp cột của chúng tôi đã có điều này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Tùy chỉnh

Trạng thái xác thực có thể được tùy chỉnh thông qua Sass với $form-validation-statesbản đồ. Nằm trong _variables.scsstệp của chúng tôi, bản đồ Sass này được lặp lại để tạo ra các trạng thái xác thực valid/ mặc định. invalidBao gồm một bản đồ lồng nhau để tùy chỉnh màu sắc và biểu tượng của từng tiểu bang. Mặc dù không có trạng thái nào khác được trình duyệt hỗ trợ, những người sử dụng kiểu tùy chỉnh có thể dễ dàng thêm phản hồi biểu mẫu phức tạp hơn.

Xin lưu ý rằng chúng tôi không khuyên bạn nên tùy chỉnh các giá trị này mà không sửa đổi form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Biểu mẫu tùy chỉnh

Để có nhiều tùy chỉnh hơn và tính nhất quán giữa các trình duyệt, hãy sử dụng các phần tử biểu mẫu hoàn toàn tùy chỉnh của chúng tôi để thay thế các mặc định của trình duyệt. Chúng được xây dựng dựa trên đánh dấu ngữ nghĩa và có thể truy cập được, vì vậy chúng là sự thay thế vững chắc cho bất kỳ điều khiển biểu mẫu mặc định nào.

Hộp kiểm và đài

Mỗi hộp kiểm và đài <input>và <label>ghép nối được bao bọc trong một <div>để tạo điều khiển tùy chỉnh của chúng tôi. Về mặt cấu trúc, đây là cách tiếp cận giống như cách tiếp cận mặc định của chúng tôi .form-check.

Chúng tôi sử dụng bộ chọn anh chị em ( ~) cho tất cả các <input>trạng thái của chúng tôi — chẳng hạn như :checked—để tạo kiểu đúng cho chỉ báo biểu mẫu tùy chỉnh của chúng tôi. Khi kết hợp với .custom-control-labellớp, chúng ta cũng có thể tạo kiểu văn bản cho từng mục dựa trên <input>trạng thái của '.

Chúng tôi ẩn mặc định <input>với opacityvà sử dụng .custom-control-labelđể tạo chỉ báo biểu mẫu tùy chỉnh mới ở vị trí của nó với ::beforevà ::after. Thật không may, chúng tôi không thể tạo một tùy chỉnh chỉ từ <input>vì CSS contentkhông hoạt động trên phần tử đó.

Ở các trạng thái đã chọn, chúng tôi sử dụng các biểu tượng SVG nhúng base64 từ Open Iconic . Điều này cung cấp cho chúng tôi khả năng kiểm soát tốt nhất để tạo kiểu và định vị trên các trình duyệt và thiết bị.

Hộp kiểm

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Các hộp kiểm tùy chỉnh cũng có thể sử dụng :indeterminatelớp giả khi được đặt thủ công qua JavaScript (không có thuộc tính HTML khả dụng để chỉ định nó).

Nếu bạn đang sử dụng jQuery, một cái gì đó như thế này là đủ:

$('.your-checkbox').prop('indeterminate', true)

Rađiô

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Nội tuyến

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Vô hiệu hóa

Hộp kiểm tùy chỉnh và radio cũng có thể bị vô hiệu hóa. Thêm disabledthuộc tính boolean vào <input>và chỉ báo tùy chỉnh và mô tả nhãn sẽ được tạo kiểu tự động.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Công tắc

Một công tắc có đánh dấu của một hộp kiểm tùy chỉnh nhưng sử dụng .custom-switchlớp để hiển thị một công tắc bật tắt. Công tắc cũng hỗ trợ disabledthuộc tính.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Chọn menu

<select>Menu tùy chỉnh chỉ cần một lớp tùy chỉnh, .custom-selectđể kích hoạt các kiểu tùy chỉnh. Các kiểu tùy chỉnh bị giới hạn ở giao diện <select>ban đầu và không thể sửa đổi <option>do các giới hạn của trình duyệt.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các đầu vào văn bản có kích thước tương tự của chúng tôi.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Thuộc multipletính này cũng được hỗ trợ:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Cũng như sizethuộc tính:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Phạm vi

Tạo <input type="range">điều khiển tùy chỉnh với .custom-range. Bản nhạc (nền) và ngón tay cái (giá trị) đều được tạo kiểu để xuất hiện giống nhau trên các trình duyệt. Vì chỉ có IE và Firefox hỗ trợ "điền" theo dõi của họ từ bên trái hoặc bên phải của ngón tay cái như một phương tiện để chỉ ra tiến trình một cách trực quan, chúng tôi hiện không hỗ trợ nó.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Các đầu vào phạm vi có các giá trị ngầm định cho minvà max- 0và 100, tương ứng. Bạn có thể chỉ định các giá trị mới cho những giá trị đó bằng cách sử dụng thuộc tính minvà max.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Theo mặc định, phạm vi đầu vào "snap" thành các giá trị số nguyên. Để thay đổi điều này, bạn có thể chỉ định một stepgiá trị. Trong ví dụ dưới đây, chúng tôi tăng gấp đôi số bước bằng cách sử dụng step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Trình duyệt tệp

Plugin được đề xuất để tạo hoạt ảnh cho đầu vào tệp tùy chỉnh: bs-custom-file-input , đó là những gì chúng tôi hiện đang sử dụng ở đây trong tài liệu của chúng tôi.

Đầu vào tệp là phần quan trọng nhất trong nhóm và yêu cầu thêm JavaScript nếu bạn muốn kết nối chúng với chức năng Chọn tệp… và văn bản tên tệp đã chọn.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Chúng tôi ẩn tệp mặc định <input>qua opacityvà thay vào đó tạo kiểu <label>. Nút được tạo và định vị bằng ::after. Cuối cùng, chúng tôi khai báo a widthvà heighton <input>để có khoảng cách thích hợp cho nội dung xung quanh.

Dịch hoặc tùy chỉnh các chuỗi với SCSS

Lớp :lang()giả được sử dụng để cho phép dịch văn bản “Duyệt qua” sang các ngôn ngữ khác. Ghi đè hoặc thêm các mục nhập vào $custom-file-textbiến Sass bằng thẻ ngôn ngữ có liên quan và các chuỗi được bản địa hóa. Các chuỗi tiếng Anh có thể được tùy chỉnh theo cùng một cách. Ví dụ: đây là cách người ta có thể thêm bản dịch tiếng Tây Ban Nha (mã ngôn ngữ của tiếng Tây Ban Nha là es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Đây là lang(es)hoạt động trên đầu vào tệp tùy chỉnh cho bản dịch tiếng Tây Ban Nha:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Bạn sẽ cần đặt chính xác ngôn ngữ cho tài liệu của mình (hoặc cây con của nó) để hiển thị đúng văn bản. Điều này có thể được thực hiện bằng cách sử dụng thuộc langtính trên <html>phần tử hoặc Content-Languagetiêu đề HTTP , trong số các phương pháp khác.

Dịch hoặc tùy chỉnh các chuỗi bằng HTML

Bootstrap cũng cung cấp một cách để dịch văn bản “Duyệt qua” trong HTML với data-browsethuộc tính có thể được thêm vào nhãn đầu vào tùy chỉnh (ví dụ bằng tiếng Hà Lan):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>