表單控件樣式、布局選項和自定義組件的示例和使用指南，用于創(chuàng)建多種窗體。

概述

引導(dǎo)程序的窗體控件擴(kuò)展到我們重新啟動的表單樣式上課。使用這些類選擇它們的自定義顯示，以便在瀏覽器和設(shè)備之間進(jìn)行更一致的呈現(xiàn)。

確保使用適當(dāng)?shù)?code>type屬性對所有輸入%28e。g.email有關(guān)電子郵件地址或number關(guān)于數(shù)字信息%29，以利用較新的輸入控件，如電子郵件驗證，號碼選擇，等等。

下面是一個演示Bootstrap表單樣式的快速示例。繼續(xù)閱讀有關(guān)所需類、表單布局等方面的文檔。

<form>  <div class="form-group">    <label for="exampleInputEmail1">Email address</label>    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">    <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" placeholder="Password">  </div>  <div class="form-check">    <label class="form-check-label">      <input type="checkbox" class="form-check-input">
      Check me out    </label>  </div>  <button type="submit" class="btn btn-primary">Submit</button></form>

表單控件

文本窗體控件<input>S，<select>S，和<textarea>s-是用.form-control上課。包括一般外觀、焦點狀態(tài)、大小大小等樣式。

一定要探索我們的定制表格以進(jìn)一步的風(fēng)格<select>S.

<form>  <div class="form-group">    <label for="exampleFormControlInput1">Email address</label>    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">  </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>

對于文件輸入，交換.form-control為.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>

上漿

使用類似的類設(shè)置高度.form-control-lg和.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>

雷德

添加readonly屬性，以防止修改輸入的值。只讀輸入看起來更輕%28，就像禁用的輸入%29一樣，但保留標(biāo)準(zhǔn)光標(biāo)。

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

只讀純文本

如果你想<input readonly>元素樣式為純文本的窗體中的元素，請使用.form-control-plaintext類以移除默認(rèn)窗體字段的樣式，并保留正確的頁邊距和填充。

<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@example.com">    </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" placeholder="Password">    </div>  </div></form>

<form class="form-inline">  <div class="form-group">    <label for="staticEmail2" class="sr-only">Email</label>    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">  </div>  <div class="form-group mx-sm-3">    <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">Confirm identity</button></form>

復(fù)選框和收音機(jī)

默認(rèn)復(fù)選框和收音機(jī)是在以下幫助下進(jìn)行改進(jìn)的：.form-check，，，為這兩種輸入類型提供一個單獨的類，以改進(jìn)它們的HTML元素的布局和行為復(fù)選框用于選擇列表中的一個或多個選項，而收音機(jī)則用于從多個選項中選擇一個選項。

支持禁用復(fù)選框和收音機(jī)，但要提供not-allowed光標(biāo)在父節(jié)點的懸停上。<label>，則需要添加.disabled類傳遞給父類。.form-check禁用類還將減輕文本顏色，以幫助指示輸入的狀態(tài)。

默認(rèn)%28堆棧%29

默認(rèn)情況下，任何數(shù)量的復(fù)選框和收音機(jī)都將垂直堆疊，并適當(dāng)?shù)赜?code>.form-check...

<div class="form-check">  <label class="form-check-label">    <input class="form-check-input" type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great  </label></div><div class="form-check disabled">  <label class="form-check-label">    <input class="form-check-input" type="checkbox" value="" disabled>
    Option two is disabled  </label></div>

<div class="form-check">  <label class="form-check-label">    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great  </label></div><div class="form-check">  <label class="form-check-label">    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one  </label></div><div class="form-check disabled">  <label class="form-check-label">    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    Option three is disabled  </label></div>

內(nèi)聯(lián)

將同一水平行上的復(fù)選框或收音機(jī)分組，方法是添加.form-check-inline給任何人.form-check...

<div class="form-check form-check-inline">  <label class="form-check-label">    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1  </label></div><div class="form-check form-check-inline">  <label class="form-check-label">    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2  </label></div><div class="form-check form-check-inline disabled">  <label class="form-check-label">    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3  </label></div>

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

無標(biāo)簽

加.position-static對內(nèi)部的輸入.form-check沒有任何標(biāo)簽文字。記住仍然要為輔助技術(shù)提供某種形式的標(biāo)簽，例如，使用aria-label29%。

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

布局

因為Bootstrap適用display: block和width: 100%對于幾乎所有的窗體控件，窗體默認(rèn)將垂直堆棧。其他類可用于根據(jù)每個表單更改此布局。

形式群

大.form-group類是向窗體添加某些結(jié)構(gòu)的最簡單方法。它的唯一目的是提供margin-bottom圍繞標(biāo)簽和控制配對。作為獎勵，因為它是一個類，您可以使用它<fieldset>S，<div>S或幾乎任何其他元素。

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

表格網(wǎng)格

可以使用我們的網(wǎng)格類構(gòu)建更復(fù)雜的表單。將這些用于需要多列、不同寬度和其他對齊選項的表單布局。

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

表格行

你也可以交換.row為.form-row，這是我們標(biāo)準(zhǔn)網(wǎng)格行的一個變體，它覆蓋了默認(rè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>

還可以用網(wǎng)格系統(tǒng)創(chuàng)建更復(fù)雜的布局。

<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" placeholder="Email">    </div>    <div class="form-group col-md-6">      <label for="inputPassword4">Password</label>      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">    </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">      <label class="form-check-label">        <input class="form-check-input" type="checkbox"> Check me out      </label>    </div>  </div>  <button type="submit" class="btn btn-primary">Sign in</button></form>

水平形式

通過添加.row類來形成組，并使用.col-*-*類指定標(biāo)簽和控件的寬度。

一定要加上.col-form-label敬你的<label>S也是如此，因此它們垂直地以其關(guān)聯(lián)的窗體控件為中心。為<legend>元素，您可以使用.col-form-legend使它們看起來像普通的<label>元素。

<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" placeholder="Email">    </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" placeholder="Password">    </div>  </div>  <fieldset class="form-group">    <div class="row">      <legend class="col-form-legend col-sm-2">Radios</legend>      <div class="col-sm-10">        <div class="form-check">          <label class="form-check-label">            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            Option one is this and that&mdash;be sure to include why it's great          </label>        </div>        <div class="form-check">          <label class="form-check-label">            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one          </label>        </div>        <div class="form-check disabled">          <label class="form-check-label">            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            Option three is disabled          </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">        <label class="form-check-label">          <input class="form-check-input" type="checkbox"> Check me out        </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>

水平標(biāo)號尺寸

確保使用.col-form-label-sm或.col-form-label-lg敬你的<label>s正確地跟隨.form-control-lg和.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>

柱上漿

如前面的示例所示，我們的網(wǎng)格系統(tǒng)允許您放置任意數(shù)量的.col在.row或.form-row.他們會平分可用的寬度。您還可以選擇列的一個子集來占用更多或更少的空間，而其余的部分則會占用.cols與其他列類平分，具體列類如下.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>

自動上漿

下面的示例使用一個Flexbox實用程序垂直地將內(nèi)容和更改中心化。.col到.col-auto這樣，您的列只需要占用足夠的空間。換句話說，列本身根據(jù)內(nèi)容大小。

<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 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">    </div>    <div class="col-auto">      <label class="sr-only" for="inlineFormInputGroup">Username</label>      <div class="input-group mb-2 mb-sm-0">        <div class="input-group-addon">@</div>        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">      </div>    </div>    <div class="col-auto">      <div class="form-check mb-2 mb-sm-0">        <label class="form-check-label">          <input class="form-check-input" type="checkbox"> Remember me        </label>      </div>    </div>    <div class="col-auto">      <button type="submit" class="btn btn-primary">Submit</button>    </div>  </div></form>

然后，您可以再次將其與特定大小的列類混合。

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

當(dāng)然還有自定義窗體控件是支持的。

<form>  <div class="form-row align-items-center">    <div class="col-auto">      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>      <select class="custom-select mb-2 mr-sm-2 mb-sm-0" 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">      <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">        <input type="checkbox" class="custom-control-input">        <span class="custom-control-indicator"></span>        <span class="custom-control-description">Remember my preference</span>      </label>    </div>    <div class="col-auto">      <button type="submit" class="btn btn-primary">Submit</button>    </div>  </div></form>

內(nèi)聯(lián)形式

使用.form-inline類以在單個水平行上顯示一系列標(biāo)簽、窗體控件和按鈕。內(nèi)聯(lián)窗體中的窗體控件與其默認(rèn)狀態(tài)略有不同。

• 控件是display: flex，折疊任何HTML空白，并允許您提供對齊控制間距和撓曲箱公用設(shè)施。

• 控件和輸入組接收width: auto若要重寫引導(dǎo)默認(rèn)設(shè)置，請執(zhí)行以下操作width: 100%...

• 控制僅在寬度至少為576 px的視圖中顯示內(nèi)聯(lián)。說明移動設(shè)備上的窄視口。

您可能需要手動處理各個窗體控件的寬度和對齊方式。間距效用%28，如%29所示。最后，確保始終包括<label>使用每個窗體控件，即使您需要對非屏幕閱讀器訪問者隱藏它.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 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>  <div class="input-group mb-2 mr-sm-2 mb-sm-0">    <div class="input-group-addon">@</div>    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">  </div>  <div class="form-check mb-2 mr-sm-2 mb-sm-0">    <label class="form-check-label">      <input class="form-check-input" type="checkbox"> Remember me    </label>  </div>  <button type="submit" class="btn btn-primary">Submit</button></form>

還支持自定義窗體控件和選擇。

<form class="form-inline">  <label class="mr-sm-2" for="inlineFormCustomSelectPref">Preference</label>  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelectPref">    <option selected>Choose...</option>    <option value="1">One</option>    <option value="2">Two</option>    <option value="3">Three</option>  </select>  <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">    <input type="checkbox" class="custom-control-input">    <span class="custom-control-indicator"></span>    <span class="custom-control-description">Remember my preference</span>  </label>  <button type="submit" class="btn btn-primary">Submit</button></form>

隱藏標(biāo)簽的替代方案

如果沒有為每個輸入都包含一個標(biāo)簽，屏幕閱讀器等輔助技術(shù)就會給表單帶來麻煩。對于這些內(nèi)聯(lián)窗體，可以使用.sr-only上課。還有其他為輔助技術(shù)提供標(biāo)簽的方法，例如aria-label，，，aria-labelledby或title屬性。如果這些技術(shù)都沒有出現(xiàn)，輔助技術(shù)可能會使用placeholder屬性(如果存在)，但請注意placeholder作為其他標(biāo)簽方法的替代品，不建議使用其他標(biāo)簽方法。

幫助文本

可以使用以下方法創(chuàng)建窗體中的塊級幫助文本：.form-text%28以前稱為.help-block在v3%29。內(nèi)聯(lián)幫助文本可以使用任何內(nèi)聯(lián)HTML元素和實用程序類靈活實現(xiàn)，如.text-muted...

將幫助文本與窗體控件關(guān)聯(lián)

幫助文本應(yīng)該顯式地與它所關(guān)聯(lián)的窗體控件關(guān)聯(lián)，使用aria-describedby屬性。這將確保輔助技術(shù)--如屏幕閱讀器--在用戶聚焦或進(jìn)入控件時宣布此幫助文本。

輸入下面的幫助文本可以用.form-text本課程包括display: block并在上面的輸入中添加一些頂部空間，以便于間距。

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

內(nèi)聯(lián)文本可以使用任何典型的內(nèi)聯(lián)HTML元素%28<small>，，，<span>，或者其他%29的東西，只有一個實用程序類。

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

殘疾表格

添加disabled在輸入上設(shè)置布爾屬性，以防止用戶交互，并使其看起來更輕。

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

添加disabled屬性為<fieldset>若要禁用所有控件，請執(zhí)行以下操作。

<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-check">      <label class="form-check-label">        <input class="form-check-input" type="checkbox"> Can't check this      </label>    </div>    <button type="submit" class="btn btn-primary">Submit</button>  </fieldset></form>

有錨的警告

默認(rèn)情況下，瀏覽器將處理所有本機(jī)窗體控件%28<input>，，，<select>和<button>元素%29在<fieldset disabled>由于禁用，防止鍵盤和鼠標(biāo)在它們上的交互。但是，如果您的表單還包括<a ... class="btn btn-*">元素，這些元素只會被賦予pointer-events: none.如有關(guān)按鈕禁用狀態(tài)%28，特別是在錨元素%29的子部分中，此css屬性尚未標(biāo)準(zhǔn)化，并且在Opera 18及以下或InternetExplorer 10中不完全支持，也不會阻止鍵盤用戶聚焦或激活這些鏈接。因此，為了安全起見，請使用自定義JavaScript禁用此類鏈接。

跨瀏覽器兼容性

雖然Bootstrap將在所有瀏覽器中應(yīng)用這些樣式，但I(xiàn)nternetExplorer 11及以下版本并不完全支持disabled屬性的<fieldset>使用自定義JavaScript禁用這些瀏覽器中的字段集。

驗證

通過HTML 5表單驗證向用戶提供有價值的、可操作的反饋-在我們支持的所有瀏覽器中都可以使用。從瀏覽器默認(rèn)驗證反饋中選擇，或者使用內(nèi)置類和初學(xué)者JavaScript實現(xiàn)自定義消息。

我們極力推薦本機(jī)瀏覽器默認(rèn)的自定義驗證樣式不會通知屏幕閱讀器。

它是如何工作的

下面是表單驗證如何與Bootstrap一起工作：

• HTML表單驗證通過css的兩個偽類應(yīng)用，:invalid和:valid它適用于<input>，，，<select>，和<textarea>元素。

• 引導(dǎo)范圍:invalid和:valid風(fēng)格到父母.was-validated類，通常應(yīng)用于<form>否則，任何沒有值的必需字段在頁面加載時都會顯示為無效。通過這種方式，您可以選擇何時激活它們(通常是在表單提交嘗試%29之后)。

• 作為退路，.is-invalid和.is-valid類可以代替?zhèn)晤?。服?wù)器端驗證.他們不需要.was-validated家長班。

• 由于css工作方式上的限制，目前%29不能將樣式應(yīng)用到<label>在DOM中的表單控件之前，無需自定義JavaScript的幫助。

• 所有現(xiàn)代瀏覽器都支持約束驗證API，用于驗證表單控件的一系列JavaScript方法。

• 反饋消息可以利用瀏覽器默認(rèn)值%28不同的每個瀏覽器，和無法通過CSS%29或我們的自定義反饋樣式與額外的HTML和CSS。

• 您可以提供自定義有效性消息。setCustomValidity用JavaScript寫的。

考慮到這一點，請考慮以下演示，用于我們的自定義表單驗證樣式、可選服務(wù)器端類和瀏覽器默認(rèn)值。

定制風(fēng)格

對于自定義引導(dǎo)窗體驗證消息，您需要添加novalidate的布爾屬性<form>這將禁用瀏覽器默認(rèn)反饋工具提示，但仍然提供對JavaScript表單驗證API的訪問。嘗試提交下面的表單；我們的JavaScript將攔截Submit按鈕并將反饋轉(zhuǎn)發(fā)給您。

嘗試提交時，您將看到:invalid和:valid應(yīng)用于窗體控件的樣式。

<form class="container" id="needs-validation" novalidate>  <div class="row">    <div class="col-md-6 mb-3">      <label for="validationCustom01">First name</label>      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>    </div>    <div class="col-md-6 mb-3">      <label for="validationCustom02">Last name</label>      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>    </div>  </div>  <div class="row">    <div class="col-md-6 mb-3">      <label for="validationCustom03">City</label>      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>      <div class="invalid-feedback">
        Please provide a valid city.      </div>    </div>    <div class="col-md-3 mb-3">      <label for="validationCustom04">State</label>      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" required>      <div class="invalid-feedback">
        Please provide a valid zip.      </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() {    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();      }
      form.classList.add('was-validated');    }, false);  }, false);})();</script>

瀏覽器默認(rèn)值

對自定義驗證、反饋消息或編寫JavaScript來更改表單行為不感興趣？很好，您可以使用瀏覽器默認(rèn)設(shè)置。試著提交下面的表格。根據(jù)瀏覽器和操作系統(tǒng)的不同，您將看到一種略有不同的反饋樣式。

雖然這些反饋樣式不能使用CSS樣式，但仍然可以通過JavaScript定制反饋文本。

<form>  <div class="row">    <div class="col-md-6 mb-3">      <label for="validationDefault01">First name</label>      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>    </div>    <div class="col-md-6 mb-3">      <label for="validationDefault02">Last name</label>      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>    </div>  </div>  <div class="row">    <div class="col-md-6 mb-3">      <label for="validationDefault03">City</label>      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>      <div class="invalid-feedback">
        Please provide a valid city.      </div>    </div>    <div class="col-md-3 mb-3">      <label for="validationDefault04">State</label>      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>      <div class="invalid-feedback">
        Please provide a valid state.      </div>    </div>    <div class="col-md-3 mb-3">      <label for="validationDefault05">Zip</label>      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>      <div class="invalid-feedback">
        Please provide a valid zip.      </div>    </div>  </div>  <button class="btn btn-primary" type="submit">Submit form</button></form>

服務(wù)器端

我們建議使用客戶端驗證，但如果需要服務(wù)器端，則可以使用.is-invalid和.is-valid注意.invalid-feedback也支持這些類。

<form>  <div class="row">    <div class="col-md-6 mb-3">      <label for="validationServer01">First name</label>      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>    </div>    <div class="col-md-6 mb-3">      <label for="validationServer02">Last name</label>      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>    </div>  </div>  <div class="row">    <div class="col-md-6 mb-3">      <label for="validationServer03">City</label>      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>      <div class="invalid-feedback">
        Please provide a valid city.      </div>    </div>    <div class="col-md-3 mb-3">      <label for="validationServer04">State</label>      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" required>      <div class="invalid-feedback">
        Please provide a valid zip.      </div>    </div>  </div>  <button class="btn btn-primary" type="submit">Submit form</button></form>

支撐元件

我們的示例表單顯示了本機(jī)文本。<input>S以上，但表單驗證樣式也適用于我們的自定義窗體控件。

<form class="was-validated">  <label class="custom-control custom-checkbox">    <input type="checkbox" class="custom-control-input" required>    <span class="custom-control-indicator"></span>    <span class="custom-control-description">Check this custom checkbox</span>  </label>  <div class="custom-controls-stacked d-block my-3">    <label class="custom-control custom-radio">      <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required>      <span class="custom-control-indicator"></span>      <span class="custom-control-description">Toggle this custom radio</span>    </label>    <label class="custom-control custom-radio">      <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>      <span class="custom-control-indicator"></span>      <span class="custom-control-description">Or toggle this other custom radio</span>    </label>  </div>  <select class="custom-select d-block my-3" required>    <option value="">Open this select menu</option>    <option value="1">One</option>    <option value="2">Two</option>    <option value="3">Three</option>  </select>  <label class="custom-file">    <input type="file" id="file" class="custom-file-input" required>    <span class="custom-file-control"></span>  </label></form>

定制表格

為了實現(xiàn)更多的自定義和跨瀏覽器一致性，請使用我們完全自定義的表單元素來替換瀏覽器默認(rèn)設(shè)置。它們構(gòu)建在語義和可訪問標(biāo)記之上，因此它們是任何默認(rèn)表單控件的可靠替代品。

復(fù)選框和收音機(jī)

每個復(fù)選框和收音機(jī)都封裝在<label>原因有三：

• 它為檢查控件提供了更大的命中區(qū)域。

• 它提供了一個有用的語義包裝器來幫助我們替換默認(rèn)的<input>S.

• 它觸發(fā)<input>自動，意味著不需要JavaScript。

我們隱藏缺省值<input>帶著opacity并使用.custom-control-indicator若要在其位置生成新的自定義窗體指示器，請執(zhí)行以下操作。不幸的是，我們不能僅僅從<input>因為CSS的content不適用于那個元素。

我們使用兄弟姐妹選擇器%28~%29<input>類州:checked-正確的樣式，我們的定制表格指示器。當(dāng)與.custom-control-description類，我們還可以根據(jù)<input>狀態(tài)。

在檢查狀態(tài)中，我們使用Base 64嵌入式SVG圖標(biāo)從開放標(biāo)志這為我們在瀏覽器和設(shè)備之間設(shè)置樣式和定位提供了最好的控制。

復(fù)選框

<label class="custom-control custom-checkbox">  <input type="checkbox" class="custom-control-input">  <span class="custom-control-indicator"></span>  <span class="custom-control-description">Check this custom checkbox</span></label>

自定義復(fù)選框也可以利用:indeterminate類，當(dāng)通過JavaScript%28手動設(shè)置時，沒有可用的HTML屬性來指定它%29。

如果您正在使用jQuery，這樣的內(nèi)容就足夠了：

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

收音機(jī)

<label class="custom-control custom-radio">  <input id="radio1" name="radio" type="radio" class="custom-control-input">  <span class="custom-control-indicator"></span>  <span class="custom-control-description">Toggle this custom radio</span></label><label class="custom-control custom-radio">  <input id="radio2" name="radio" type="radio" class="custom-control-input">  <span class="custom-control-indicator"></span>  <span class="custom-control-description">Or toggle this other custom radio</span></label>

殘廢

也可以禁用自定義復(fù)選框和收音機(jī)。添加disabled屬性的布爾屬性。<input>并且，自定義指示器和標(biāo)簽描述將自動樣式化。

<label class="custom-control custom-checkbox">  <input type="checkbox" class="custom-control-input" disabled>  <span class="custom-control-indicator"></span>  <span class="custom-control-description">Check this custom checkbox</span></label><label class="custom-control custom-radio">  <input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled>  <span class="custom-control-indicator"></span>  <span class="custom-control-description">Toggle this custom radio</span></label>

堆疊

自定義復(fù)選框和收音機(jī)是內(nèi)聯(lián)啟動。添加具有類的父級.custom-controls-stacked以確保每個窗體控件位于單獨的行上。

<div class="custom-controls-stacked">  <label class="custom-control custom-radio">    <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">    <span class="custom-control-indicator"></span>    <span class="custom-control-description">Toggle this custom radio</span>  </label>  <label class="custom-control custom-radio">    <input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">    <span class="custom-control-indicator"></span>    <span class="custom-control-description">Or toggle this other custom radio</span>  </label></div>

選擇菜單

習(xí)俗<select>菜單只需要一個自定義類，.custom-select以觸發(fā)自定義樣式。

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

文件瀏覽器

文件輸入是其中最粗糙的，如果您想將它們與函數(shù)連接起來，則需要額外的JavaScript。選擇文件…和選定的文件名文本。

<label class="custom-file">  <input type="file" id="file2" class="custom-file-input">  <span class="custom-file-control"></span></label>

下面是它的工作原理：

• 我們把<input>在...<label>因此，自定義控件正確地觸發(fā)文件瀏覽器。

• 我們隱藏默認(rèn)文件<input>通孔opacity...

• 我們用::after生成自定義背景和指令%28選擇文件…29%。

• 我們用::before若要生成并定位瀏覽紐扣。

• 我們宣布height在<input>為周圍內(nèi)容的適當(dāng)間隔。

換句話說，它是一個完全自定義的元素，都是通過CSS生成的。

翻譯或自定義字符串

大:lang()偽類用于方便地將“瀏覽”和“選擇文件…”文本翻譯成其他語言。簡單地重寫或添加條目到$custom-file-text相關(guān)的SCSS變量語言標(biāo)記和本地化字符串。英文字符串也可以用同樣的方式定制。例如，下面是如何添加西班牙語翻譯%28西班牙語代碼的方法es29%：

$custom-file-text: (
  placeholder: (
    en: "Choose file...",
    es: "Seleccionar archivo..."  ),
  button-label: (
    en: "Browse",
    es: "Navegar"  ));

您需要正確設(shè)置文檔%28或其子樹%29的語言，以便顯示正確的文本。這可以使用大lang屬性或者Content-Languagehttp報頭，以及其他方法。

 ? 2011–2017 Twitter, Inc