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

概述

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

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

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

<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)、大小大小等樣式。

一定要探索我們的定制表格以進一步的風格<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>

上漿

使用類似的類設置高度.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一樣，但保留標準光標。

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

只讀純文本

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

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

復選框和收音機

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

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

默認%28堆棧%29

默認情況下，任何數(shù)量的復選框和收音機都將垂直堆疊，并適當?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>

內聯(lián)

將同一水平行上的復選框或收音機分組，方法是添加.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>

無標簽

加.position-static對內部的輸入.form-check沒有任何標簽文字。記住仍然要為輔助技術提供某種形式的標簽，例如，使用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%對于幾乎所有的窗體控件，窗體默認將垂直堆棧。其他類可用于根據(jù)每個表單更改此布局。

形式群

大.form-group類是向窗體添加某些結構的最簡單方法。它的唯一目的是提供margin-bottom圍繞標簽和控制配對。作為獎勵，因為它是一個類，您可以使用它<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)格類構建更復雜的表單。將這些用于需要多列、不同寬度和其他對齊選項的表單布局。

<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，這是我們標準網(wǎng)格行的一個變體，它覆蓋了默認的列排水溝，以使布局更加緊湊。

<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)建更復雜的布局。

<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-*-*類指定標簽和控件的寬度。

一定要加上.col-form-label敬你的<label>S也是如此，因此它們垂直地以其關聯(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>

水平標號尺寸

確保使用.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實用程序垂直地將內容和更改中心化。.col到.col-auto這樣，您的列只需要占用足夠的空間。換句話說，列本身根據(jù)內容大小。

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

當然還有自定義窗體控件是支持的。

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

內聯(lián)形式

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

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

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

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

您可能需要手動處理各個窗體控件的寬度和對齊方式。間距效用%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>

隱藏標簽的替代方案

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

幫助文本

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

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

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

輸入下面的幫助文本可以用.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>

內聯(lián)文本可以使用任何典型的內聯(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在輸入上設置布爾屬性，以防止用戶交互，并使其看起來更輕。

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

有錨的警告

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

跨瀏覽器兼容性

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

驗證

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

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

它是如何工作的

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

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

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

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

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

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

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

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

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

定制風格

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

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

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

瀏覽器默認值

對自定義驗證、反饋消息或編寫JavaScript來更改表單行為不感興趣？很好，您可以使用瀏覽器默認設置。試著提交下面的表格。根據(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>

服務器端

我們建議使用客戶端驗證，但如果需要服務器端，則可以使用.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>

支撐元件

我們的示例表單顯示了本機文本。<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)更多的自定義和跨瀏覽器一致性，請使用我們完全自定義的表單元素來替換瀏覽器默認設置。它們構建在語義和可訪問標記之上，因此它們是任何默認表單控件的可靠替代品。

復選框和收音機

每個復選框和收音機都封裝在<label>原因有三：

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

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

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

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

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

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

復選框

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

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

如果您正在使用jQuery，這樣的內容就足夠了：

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

收音機

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

殘廢

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

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

堆疊

自定義復選框和收音機是內聯(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>

選擇菜單

習俗<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ā)文件瀏覽器。

• 我們隱藏默認文件<input>通孔opacity...

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

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

• 我們宣布height在<input>為周圍內容的適當間隔。

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

翻譯或自定義字符串

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

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

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

 ? 2011–2017 Twitter, Inc