Source

Nā palapala

Nā laʻana a me nā alakaʻi hoʻohana no nā ʻano hoʻomalu puka, nā koho hoʻonohonoho, a me nā mea maʻamau no ka hana ʻana i nā ʻano like ʻole.

Nānā nui

Hoʻonui ka mana ʻano o Bootstrap i kā mākou ʻano ʻano Rebooted me nā papa. E hoʻohana i kēia mau papa no ke koho ʻana i kā lākou mau hōʻike maʻamau no ka hāʻawi like ʻana ma waena o nā polokalamu kele pūnaewele a me nā polokalamu.

E ʻoluʻolu e hoʻohana i kahi ʻano kūpono typema nā mea hoʻokomo a pau (e laʻa, emailno ka leka uila a i ʻole numberno ka ʻike helu) e hoʻohana i nā mana hoʻokomo hou e like me ka hōʻoia leka uila, koho helu, a me nā mea hou aʻe.

Eia kahi laʻana wikiwiki e hōʻike i nā ʻano ʻano o Bootstrap. E hoʻomau i ka heluhelu ʻana no nā palapala e pili ana i nā papa i koi ʻia, ka hoʻolālā palapala, a me nā mea hou aku.

ʻAʻole mākou e kaʻana like i kāu leka uila me kekahi. 
<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>

Nā mana palapala

Kāhea ʻia nā mana kikokikona—e like me <input>s, <select>s, a me <textarea>s—me ka .form-controlpapa. Hoʻokomo ʻia nā ʻano no ka hiʻohiʻona maʻamau, ke kūlana kikoʻī, ka nui, a me nā mea hou aku.

E ʻimi pono i kā mākou mau palapala maʻamau no ke kaila hou aku <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>

No nā hoʻokomo faila, hoʻololi i .form-controlka .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>

Ka nui ana

E hoʻonoho i nā kiʻekiʻe me ka hoʻohana ʻana i nā papa like .form-control-lga me .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>

Heluhelu wale

Hoʻohui i ke readonlyʻano boolean ma kahi hoʻokomo e pale i ka hoʻololi ʻana i ka waiwai o ka mea hoʻokomo. ʻOi aku ka māmā o nā mea hoʻokomo heluhelu-wale (e like me nā mea hoʻokomo i hoʻopaʻa ʻole ʻia), akā mālama ʻia ka ʻōkuhi maʻamau.

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

Heluhelu kikokikona wale no

Inā makemake ʻoe e kapa ʻia <input readonly>nā mea i loko o kāu ʻano ma ke ʻano he kikokikona maʻalahi, e hoʻohana i ka .form-control-plaintextpapa e wehe i ke kāʻei kahua paʻamau a mālama i ka palena kūpono a me ka pale.

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

Nā mea hoʻokomo laulā

E hoʻonohonoho i nā mea hoʻokomo laulā hiki ke hoʻopaʻa ʻia me ka hoʻohana ʻana i .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>

Nā pahu pahu a me nā lekiō

Hoʻomaikaʻi ʻia nā pahu pahu paʻamau a me nā lekiō me ke kōkua o .form-check, kahi papa hoʻokahi no nā ʻano hoʻokomo ʻelua e hoʻomaikaʻi i ka hoʻolālā a me ke ʻano o kā lākou mau mea HTML . No ke koho ʻana i hoʻokahi a i ʻole kekahi mau koho i loko o kahi papa inoa, ʻo nā lekiō no ke koho ʻana i hoʻokahi koho mai nā mea he nui.

Kākoʻo ʻia nā pahu pahu a me nā lekiō. E disabledhoʻopili ke ʻano i kahi waihoʻoluʻu māmā e hōʻike i ke kūlana o ka mea hoʻokomo.

Kākoʻo nā pahu pahu a me nā pihi lekiō i ka hōʻoia ʻana i ka palapala HTML a hāʻawi i nā lepili pōkole a hiki ke loaʻa. No laila, ʻo kā mākou <input>s a me <label>s he mau mea kaikunāne e kūʻē i kahi i <input>loko o kahi <label>. ʻOi aku ka liʻiliʻi o kēia no ka mea pono ʻoe e wehewehe ida me fornā ʻano e pili ai i ka <input>a me <label>.

Paʻamau (hui ʻia)

ʻO ka mea paʻamau, e hoʻopaʻa pololei ʻia kekahi helu o nā pahu pahu a me nā lekiō he kaikunāne e pili pono ana me .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>

Inline

E hui pū i nā pahu a i ʻole nā ​​lekiō ma ka lālani hoʻokahi ma ka hoʻohui .form-check-inlineʻana i kekahi .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>

ʻAʻohe lepili

Hoʻohui .position-statici nā mea hoʻokomo i loko .form-checkʻaʻohe kikokikona lepili. E hoʻomanaʻo i ka hāʻawi ʻana i kekahi ʻano lepili no nā ʻenehana kōkua (e like me ka hoʻohana ʻana 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>

Hoʻolālā

No ka mea e pili ana ʻo Bootstrap display: blocka width: 100%kokoke i kā mākou mau mana ʻano āpau, e hoʻopaʻa paʻa ʻia nā palapala ma ke kū pololei. Hiki ke hoʻohana ʻia nā papa ʻē aʻe e hoʻololi i kēia hoʻolālā ma ke ʻano o kēlā me kēia.

Hoʻokumu i nā hui

ʻO ka .form-grouppapa ke ala maʻalahi loa e hoʻohui i kekahi hale i nā ʻano. Hāʻawi ia i kahi papa maʻalahi e paipai i ka hui pono ʻana o nā lepili, nā mana, nā kikokikona kōkua koho, a me ka hoʻokumu ʻana i ka memo hōʻoia. Ma ka maʻamau, pili wale ia margin-bottom, akā ʻohi ʻo ia i nā kaila hou aʻe e .form-inlinelike me ka mea e pono ai. E hoʻohana me <fieldset>s, <div>s, a i ʻole kekahi mea ʻē aʻe.

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

Puka puka

Hiki ke kūkulu ʻia nā ʻano mea paʻakikī me ka hoʻohana ʻana i kā mākou mau papa grid. E hoʻohana i kēia no nā hoʻolālā puka e koi ana i nā kolamu he nui, nā laula like ʻole, a me nā koho alignment hou.

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

Hana lalani

Hiki iā ʻoe ke hoʻololi .rowno .form-row, he ʻano hoʻololi o kā mākou lālani mānoanoa maʻamau e hoʻopau ana i nā auwai kolamu paʻamau no nā hoʻolālā paʻa a paʻa.

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

Hiki ke hana ʻia nā hoʻolālā paʻakikī me ka ʻōnaehana grid.

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

ʻAno ʻeleʻele

E hana i nā ʻano ākea me ka mākia ma ka hoʻohui ʻana i ka .rowpapa e hana i nā hui a me ka hoʻohana ʻana i nā .col-*-*papa e kuhikuhi i ka laulā o kāu mau lepili a me nā mana. E ʻoluʻolu e hoʻohui pū .col-form-labeli kāu <label>s no laila e kū pololei lākou me kā lākou mau mana pili.

I kekahi manawa, pono paha ʻoe e hoʻohana i ka margin a i ʻole nā ​​​​mea hana padding e hana i kēlā alignment kūpono āu e pono ai. No ka laʻana, ua wehe padding-topmākou i ka lepili hoʻokomo lekiō i hoʻopaʻa ʻia no ka hoʻopololei maikaʻi ʻana i ka pae kikokikona.

Lekiō
Pahu koho 
<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>
ʻO ka nui o ka lepili ʻano horizontal

E hoʻohana .col-form-label-sma .col-form-label-lgi kāu <label>s a i ʻole <legend>e hahai pono i ka nui o .form-control-lga me .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>

Ka nui o ke kolamu

E like me ka mea i hōʻike ʻia ma nā laʻana mua, hiki i kā mākou ʻōnaehana grid ke kau i kekahi helu o nā .cols i loko o kahi a i .rowʻole .form-row. E hoʻokaʻawale like lākou i ka laulā i loaʻa ma waena o lākou. Hiki paha iā ʻoe ke koho i kahi ʻāpana o kāu mau kolamu e hoʻonui a i ʻole ka liʻiliʻi o ka hakahaka, a ʻo ke koena .cole hoʻokaʻawale like i ke koena, me nā papa kolamu kikoʻī e like me .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>

Ka nui-aunoa

Ke hoʻohana nei ka laʻana ma lalo nei i kahi pono flexbox e hoʻokaʻawale i nā ʻike a me nā hoʻololi .coli .col-autohiki i kāu kolamu ke lawe i ka nui o ka nui e like me ka mea e pono ai. E hoʻohui i kekahi ʻano ʻē aʻe, ʻo ka nui o ke kolamu ma muli o nā mea i loko.

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

Hiki iā ʻoe ke hoʻohui hou i kēlā me nā papa kolamu nui.

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

A ʻoiaʻiʻo, kākoʻo ʻia nā mana ʻano maʻamau .

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

Nā palapala laina

E hoʻohana i ka .form-inlinepapa e hōʻike i ke ʻano o nā lepili, nā mana hana, a me nā pihi ma ka lālani hoʻokahi. ʻOkoʻa iki ka mana o nā palapala i loko o nā palapala inline mai ko lākou kūlana paʻamau.

  • ʻO nā mana display: flex, e hāʻule ana i nā wahi keʻokeʻo HTML a hiki iā ʻoe ke hāʻawi i ka mana alignment me ka spacing a me ka flexbox pono.
  • Loaʻa i nā mana a me nā pūʻulu hoʻokomo width: autoe kāpae i ka Bootstrap paʻamau width: 100%.
  • Hōʻike ʻia nā mana i loko o ka laina ʻike ma ka liʻiliʻi o 576px ākea e helu ai i nā puka ʻike haiki ma nā polokalamu kelepona.

Pono paha ʻoe e hoʻoponopono lima i ka laula a me ka hoʻolikelike ʻana o nā mana ʻano hoʻokahi me nā pono spacing (e like me ka mea i hōʻike ʻia ma lalo nei). ʻO ka hope, e hoʻokomo mau i kahi <label>me kēlā me kēia mana palapala, ʻoiai inā pono ʻoe e hūnā iā ia mai ka poʻe malihini kipa ʻole me ka .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>

Kākoʻo ʻia nā mana a me nā koho ʻano maʻamau.

<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>
Nā mea ʻē aʻe i nā lepili huna

E pilikia ana nā ʻenehana kōkua e like me nā mea heluhelu pale me kāu mau palapala inā ʻaʻole ʻoe e hoʻokomo i kahi lepili no kēlā me kēia hoʻokomo. No kēia mau palapala inline, hiki iā ʻoe ke hūnā i nā lepili me ka hoʻohana ʻana i ka .sr-onlypapa. Aia kekahi mau ala ʻē aʻe no ka hāʻawi ʻana i kahi lepili no nā ʻenehana kōkua, e like me ka aria-label, a i aria-labelledbyʻole titleka ʻano. Inā ʻaʻohe o kēia mau mea, hiki i nā ʻenehana kōkua ke hoʻohana i ka placeholderʻano, inā aia, akā e hoʻomaopopo ʻaʻole ʻōlelo ʻia ka hoʻohana ʻana placeholderi kahi pani no nā ʻano lepili ʻē aʻe.

He kikokikona kōkua

Hiki ke hana ʻia nā kikokikona kōkua pae-pale ma nā ʻano me ka hoʻohana ʻana .form-text(i ʻike mua ʻia .help-blockma v3). Hiki ke hoʻokō maʻalahi ka kikokikona kōkua inline me ka hoʻohana ʻana i kekahi mea HTML inline a me nā papa pono e like me .text-muted.

Hoʻopili ʻana i nā kikokikona kōkua me nā mana palapala

Pono e pili pono ka kikokikona kōkua me ka mana palapala e pili ana i ka hoʻohana ʻana i ke ʻano aria-describedby. E hōʻoia kēia i nā ʻenehana kōkua-e like me nā mea heluhelu pale-e hoʻolaha i kēia kikokikona kōkua ke kālele a komo ka mea hoʻohana i ka mana.

Hiki ke kāhua ʻia nā kikokikona kōkua ma lalo o nā mea hoʻokomo me .form-text. Aia kēia papa display: blocka hoʻohui i kekahi palena kiʻekiʻe no ka maʻalahi o ka hoʻokaʻawale ʻana mai nā mea hoʻokomo ma luna.

Pono kāu ʻōlelo huna he 8-20 mau huaʻōlelo ka lōʻihi, loaʻa nā leka a me nā helu, ʻaʻole pono e loaʻa nā hakahaka, nā huaʻōlelo kūikawā, a i ʻole emoji. 
<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>

Hiki ke hoʻohana i ka kikokikona inline i kekahi ʻano HTML inline maʻamau (he <small>, <span>, a i ʻole kekahi mea ʻē aʻe) me ka papa pono.

Pono he 8-20 mau huapalapala ka lōʻihi. 
<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>

Nā palapala hoʻopale

E hoʻohui i ke disabledʻano boolean ma kahi mea hoʻokomo e pale i ka launa pū ʻana o nā mea hoʻohana a hoʻomāmā.

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

E hoʻohui i ka disabledʻano i a <fieldset>e hoʻopau i nā mana āpau i loko.

<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>
Hoʻopaʻa me nā heleuma

Ma ka paʻamau, e mālama nā mākaʻikaʻi i nā mana ʻano ʻōiwi āpau ( <input>, <select>a me <button>nā mea ʻeleʻele) i loko o kahi <fieldset disabled>me he mea kīnā ʻole, me ka pale ʻana i nā pilina ʻelua a me nā ʻiole ma luna o lākou. Eia nō naʻe, inā loaʻa i kāu ʻano he mau <a ... class="btn btn-*">mea, e hāʻawi wale ʻia kēia i ke ʻano o pointer-events: none. E like me ka mea i hōʻike ʻia ma ka ʻāpana e pili ana i ka mokuʻāina kīnā no nā pihi (a ma ka ʻāpana ʻāpana no nā mea heleuma), ʻaʻole i hoʻohālikelike ʻia kēia waiwai CSS a ʻaʻole kākoʻo piha ʻia i ka Internet Explorer 10, a ʻaʻole ia e pale i nā mea hoʻohana keyboard. hiki iā ia ke kālele a ho'ā i kēia mau loulou. No laila e palekana, e hoʻohana i ka JavaScript maʻamau e hoʻopau i nā loulou.

Hoʻolike like ʻole o ka polokalamu kele pūnaewele

ʻOiai e hoʻohana ʻo Bootstrap i kēia mau ʻano ma nā mākaʻikaʻi āpau, ʻaʻole kākoʻo piha ʻo Internet Explorer 11 a ma lalo i ke disabledʻano ma kahi <fieldset>. E hoʻohana i ka JavaScript maʻamau no ka hoʻopau ʻana i ke kahua kahua ma kēia mau polokalamu kele pūnaewele.

Hōʻoia

Hāʻawi i nā manaʻo manaʻo koʻikoʻi a hiki ke hana ʻia i kāu mea hoʻohana me ka hōʻoia ʻana o ka palapala HTML5– i loaʻa i nā polokalamu kele pūnaewele āpau i kākoʻo ʻia . E koho mai i ka manaʻo manaʻo hōʻoia paʻamau o ka polokalamu kele pūnaewele, a i ʻole e hoʻokō i nā memo maʻamau me kā mākou papa i kūkulu ʻia a me ka JavaScript hoʻomaka.

Manaʻo mākou i kēia manawa e hoʻohana i nā ʻano hōʻoia maʻamau, no ka mea, ʻaʻole ʻike mau ʻia nā memo hōʻoia paʻamau o ka polokalamu kele pūnaewele i nā ʻenehana kōkua i nā polokalamu kele a pau (ʻoi loa, ʻo Chrome ma ka papapihi a me ka mobile).

Pehea e hana ai

Eia ke ʻano o ka hana ʻana o ka palapala hōʻoia me Bootstrap:

  • Hoʻohana ʻia ka hōʻoia palapala HTML ma o nā papa pseudo ʻelua o CSS, :invalida me :valid. Pili ia i <input>, <select>, a me <textarea>nā mea.
  • Hoʻopili ʻo Bootstrap i nā ʻano :invalida me :validnā ʻano i ka papa makua .was-validated, i hoʻohana pinepine ʻia i ka <form>. A i ʻole, ʻike ʻole ʻia kekahi kahua i koi ʻia me ka waiwai ʻole ma ka hoʻouka ʻana i ka ʻaoʻao. Ma kēia ala, hiki iā ʻoe ke koho i ka wā e hoʻāla ai iā lākou (maʻamau ma hope o ka hoʻāʻo ʻia ʻana o ka palapala).
  • No ka hoʻihoʻi hou ʻana i ke ʻano o ke ʻano (no ka laʻana, ma ke ʻano o ka hoʻouna ʻana i nā palapala hoʻoikaika me ka hoʻohana ʻana iā AJAX), e wehe i ka .was-validatedpapa mai ka papa <form>ma hope o ka waiho ʻana.
  • Ma ke ʻano he hāʻule, .is-invalida .is-validhiki ke hoʻohana ʻia nā papa ma kahi o nā pseudo-papa no ka hōʻoia ʻaoʻao o ka server . ʻAʻole lākou makemake i kahi .was-validatedpapa makua.
  • Ma muli o ke kaohi ʻana i ka hana ʻana o CSS, ʻaʻole hiki iā mākou (i kēia manawa) ke hoʻopili i nā kaila i kahi <label>e hiki mai ana ma mua o ka mana o ka puka ma ka DOM me ke kōkua ʻole o ka JavaScript maʻamau.
  • Kākoʻo nā mākaʻikaʻi hou a pau i ka API hoʻopaʻa paʻa , he pūʻulu o nā ala JavaScript no ka hōʻoia ʻana i nā mana palapala.
  • Hiki i nā memo manaʻo ke hoʻohana i nā mea paʻa o ka polokalamu kele pūnaewele (ʻokoʻa no kēlā me kēia polokalamu kele pūnaewele, a hiki ʻole ke hoʻopaʻa ʻia ma o CSS) a i ʻole kā mākou ʻano manaʻo manaʻo maʻamau me HTML a me CSS hou.
  • Hiki iā ʻoe ke hāʻawi i nā memo kūpono maʻamau me setCustomValidityka JavaScript.

Me ka noʻonoʻo, e noʻonoʻo i nā demos aʻe no kā mākou ʻano hōʻoia hōʻoia maʻamau, nā papa ʻaoʻao kikowaena koho, a me nā mea hoʻokele paʻa.

Nā ʻano maʻamau

No nā memo hōʻoia puka Bootstrap maʻamau, pono ʻoe e hoʻohui i ke novalidateʻano boolean i kāu <form>. Hoʻopau kēia i nā ʻōlelo aʻoaʻo manaʻo paʻamau o ka polokalamu kele pūnaewele, akā hāʻawi mau i ke komo i nā API hōʻoia palapala ma JavaScript. E ho'āʻo e waiho i ka palapala ma lalo nei; kā mākou JavaScript e hoʻopau i ke pihi hoʻouna a hāʻawi i nā manaʻo iā ʻoe. Ke ho'āʻo nei e hoʻouna, e ʻike ʻoe i nā ʻano :invalida me :validnā ʻano i hoʻopili ʻia i kāu kaohi puka.

Hoʻopili nā ʻano manaʻo manaʻo maʻamau i nā kala maʻamau, nā palena, nā ʻano kikoʻī, a me nā kiʻi ʻoniʻoni i hope e kamaʻilio maikaʻi i nā manaʻo. Loaʻa nā kiʻiona hope no <select>s me .custom-select, ʻaʻole .form-control.

Nani ka maikaʻi!
Nani ka maikaʻi!
@
E ʻoluʻolu e koho i kahi mea hoʻohana.
E ʻoluʻolu e hāʻawi i ke kūlanakauhale kūpono.
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>

Mea hoʻohana paʻamau

ʻAʻole makemake i nā memo manaʻo hōʻoia maʻamau a i ʻole ke kākau ʻana iā JavaScript e hoʻololi i nā ʻano hana? Maikaʻi nā mea a pau, hiki iā ʻoe ke hoʻohana i ka polokalamu kele pūnaewele. E ho'āʻo e hoʻouna i ka palapala ma lalo nei. Ma muli o kāu polokalamu kele pūnaewele a me OS, e ʻike ʻoe i kahi ʻano manaʻo ʻokoʻa iki.

ʻOiai ʻaʻole hiki ke kapa ʻia kēia mau ʻano manaʻo me CSS, hiki iā ʻoe ke hana i ka kikokikona manaʻo ma o 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>

ʻaoʻao kikowaena

Manaʻo mākou e hoʻohana i ka hōʻoia ʻaoʻao o ka mea kūʻai aku, akā inā makemake ʻoe i ka hōʻoia ʻaoʻao server, hiki iā ʻoe ke hōʻike i nā kahua palapala kūpono ʻole a .is-invalidme .is-valid. E hoʻomaopopo i .invalid-feedbackkākoʻo pū ʻia me kēia mau papa.

Nani ka maikaʻi!
Nani ka maikaʻi!
@
E ʻoluʻolu e koho i kahi mea hoʻohana.
E ʻoluʻolu e hāʻawi i ke kūlanakauhale kūpono.
E ʻoluʻolu e koho i kahi mokuʻāina kūpono.
E ʻoluʻolu e hāʻawi i kahi zip kūpono.
Pono ʻoe e ʻae ma mua o ka waiho ʻana. 
<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>

Nā mea i kākoʻo ʻia

Loaʻa nā ʻano hōʻoia no nā ʻano mana a me nā ʻāpana:

  • <input>s a me <textarea>s me .form-control(me ka hoʻokahi .form-controli loko o nā pūʻulu hoʻokomo)
  • <select>s me a i .form-controlole.custom-select
  • .form-checks
  • .custom-checkboxs a me .custom-radios
  • .custom-file
E ʻoluʻolu e hoʻokomo i kahi memo ma ka textarea.
He laʻana kikokikona manaʻo manaʻo kūpono ʻole
Eia kekahi laʻana kikokikona manaʻo manaʻo kūpono ʻole
Laʻana manaʻo koho maʻamau hewa ʻole
He laʻana manaʻo manaʻo kuhi hewa ʻole 
<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>

Mea kōkua

Inā ʻae kāu hoʻolālā palapala, hiki iā ʻoe ke hoʻololi i nā .{valid|invalid}-feedbackpapa no .{valid|invalid}-tooltipnā papa e hōʻike i nā manaʻo manaʻo hōʻoia i loko o kahi hāmeʻa kaila. Pono e loaʻa kahi makua me position: relativeia no ka hoʻonohonoho ʻana i nā mea hana. Ma ka laʻana ma lalo nei, ua loaʻa kēia i kā mākou papa kolamu, akā makemake paha kāu papahana i kahi hoʻonohonoho ʻokoʻa.

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>

Hoʻopilikino

Hiki ke hoʻopilikino ʻia nā mokuʻāina hōʻoia ma o Sass me ka $form-validation-statespalapala ʻāina. Aia i loko o kā mākou _variables.scssfaila, ua hoʻopili ʻia kēia palapala Sass e hana i ka paʻamau valid/invalid hōʻoia. He palapala ʻāina pūnana no ka hoʻopilikino ʻana i ke kala a me ka ikona o kēlā me kēia mokuʻāina. ʻOiai ʻaʻohe mokuʻāina ʻē aʻe i kākoʻo ʻia e nā mākaʻikaʻi, hiki i ka poʻe e hoʻohana ana i nā ʻano maʻamau ke hoʻohui maʻalahi i nā manaʻo manaʻo paʻakikī.

E ʻoluʻolu, ʻaʻole mākou e paipai i ka hoʻololi ʻana i kēia mau waiwai me ka ʻole o ka hoʻololi ʻana i ka 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));
}

Nā palapala maʻamau

No ka hoʻopilikino hou aʻe a me ka paʻa ʻana o ka polokalamu kele pūnaewele, e hoʻohana i kā mākou mau ʻano hana maʻamau e hoʻololi i nā mea paʻa. Kūkulu ʻia lākou ma luna o ka markup semantic a hiki ke loaʻa, no laila he mau pani paʻa no kēlā me kēia mana paʻamau.

Nā pahu pahu a me nā lekiō

Hoʻopili ʻia kēlā me kēia pahu pahu a me ka lekiō <input>a me nā <label>pairing i kahi <div>e hana ai i kā mākou mana maʻamau. Ma ke ʻano, ʻo ia ke ala like me kā mākou paʻamau.form-check .

Hoʻohana mākou i ka mea koho kaikunāne ( ~) no kā mākou <input>mokuʻāina a pau—e like me :checked—e hana pono i kā mākou hōʻailona puka maʻamau. Ke hui pū ʻia me ka .custom-control-labelpapa, hiki iā mākou ke hoʻokala i ke kikokikona no kēlā me kēia mea e pili ana i ke kūlana o ka <input>'āina.

Huna mākou i ka mea paʻamau <input>me opacityka hoʻohana ʻana i ke .custom-control-labelkūkulu ʻana i kahi hōʻailona maʻamau maʻamau ma kona wahi me ::beforea ::after. ʻO ka mea pōʻino, ʻaʻole hiki iā mākou ke kūkulu i kahi mea maʻamau mai ka mea wale nō no ka mea ʻaʻole hana ʻo <input>CSS i kēlā mea.content

Ma nā mokuʻāina i nānā ʻia, hoʻohana mākou i nā kiʻi SVG i hoʻokomo ʻia base64 mai Open Iconic . Hāʻawi kēia iā mākou i ka mana maikaʻi loa no ke kālai ʻana a me ka hoʻonohonoho ʻana ma waena o nā polokalamu kele pūnaewele a me nā polokalamu.

Nā pahu koho

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

Hiki nō hoʻi i nā pahu hoʻopaʻa maʻamau ke hoʻohana i ka :indeterminatepapa pseudo ke hoʻonohonoho lima ʻia ma o JavaScript (ʻaʻohe ʻano HTML i loaʻa no ka wehewehe ʻana).

Inā ʻoe e hoʻohana ana i ka jQuery, pono e like me kēia:

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

Lekiō

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

Inline

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

Kinohi

Hiki ke hoʻopau ʻia nā pahu koho a me nā lekiō. E hoʻohui i ka disabledʻano boolean i ka <input>a me ka hōʻailona maʻamau a me ka wehewehe ʻana i ka lepili e hoʻopaʻa ʻakomi ʻia.

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

Nā hoʻololi

Loaʻa i kahi hoʻololi ka hōʻailona o kahi pahu pahu maʻamau akā hoʻohana i ka .custom-switchpapa e hana i kahi hoʻololi hoʻololi. Kākoʻo nā hoʻololi i ke disabledʻano.

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

E koho i ka papa kuhikuhi

Pono nā menus <select>kuʻuna i kahi papa maʻamau, .custom-selecte hoʻoulu i nā ʻano maʻamau. Ua kaupalena ʻia nā ʻano hana maʻamau i ke ʻano <select>o ka mua a ʻaʻole hiki ke hoʻololi i ka <option>s ma muli o nā palena o ka polokalamu kele pūnaewele.

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

Hiki iā ʻoe ke koho mai nā koho maʻamau liʻiliʻi a nui e hoʻohālikelike i kā mākou mau kikokikona like ʻole.

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

Kākoʻo multipleʻia ka ʻano:

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

E like me ke sizeʻano:

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

Laulā

E hana i nā <input type="range">mana maʻamau me .custom-range. ʻO ke mele (ke kua) a me ka manamana nui (ka waiwai) ua ʻano like ʻia e like me nā polokalamu kele pūnaewele. ʻOiai ʻo IE a me Firefox wale nō e kākoʻo i ka "hoʻopiha" i kā lākou mele mai ka hema a i ʻole ka ʻākau o ka manamana nui i mea e hōʻike ʻike ai i ka holomua, ʻaʻole mākou e kākoʻo i kēia manawa.

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

Loaʻa i nā mea hoʻokomo laulā nā waiwai pili no mina max- 0a me 100, kēlā me kēia. Hiki iā ʻoe ke kuhikuhi i nā waiwai hou no ka poʻe e hoʻohana ana i ka mina me maxnā ʻano.

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

ʻO ka mea paʻamau, ʻo nā mea hoʻokomo i ka "snap" i nā waiwai integer. No ka hoʻololi i kēia, hiki iā ʻoe ke kuhikuhi i kahi stepwaiwai. Ma ka laʻana ma lalo nei, pāpālua mākou i ka helu o nā ʻanuʻu ma ka hoʻohana ʻana i step="0.5".

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

Pūnaewele waihona

ʻO ka plugin i manaʻo ʻia e hoʻoulu i ka hoʻokomo faila maʻamau: bs-custom-file-input , ʻo ia ka mea a mākou e hoʻohana nei i kēia manawa ma kā mākou docs.

ʻO ka hoʻokomo faila ka mea ʻoi loa o ka puʻupuʻu a koi i ka JavaScript hou inā makemake ʻoe e hoʻopili iā lākou me ka koho koho faila… a me nā kikokikona inoa faila i koho ʻia.

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

Hūnā mākou i ka faila paʻamau <input>ma o opacityka hana ʻana i ka <label>. Hana ʻia ka pihi a hoʻonoho ʻia me ::after. ʻO ka hope, ke haʻi aku nei mākou i ka widtha heightma ka <input>no ka hoʻokaʻawale kūpono no nā ʻike a puni.

Unuhi a hoʻopilikino paha i nā kaula me SCSS

Hoʻohana ʻia ka :lang()pseudo-class no ka unuhi ʻana o ka kikokikona "Browse" i nā ʻōlelo ʻē aʻe. Hoʻopau a hoʻohui i nā mea hoʻokomo i ka $custom-file-texthoʻololi Sass me ka hōʻailona ʻōlelo kūpono a me nā kaula kūloko. Hiki ke hoʻopilikino ʻia nā kaula English i ke ʻano like. Eia kekahi laʻana, pehea e hoʻohui ai kekahi i ka unuhi Paniolo (ʻo ke code ʻōlelo Paniolo es):

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

Eia ka lang(es)hana ma ka waihona waihona maʻamau no ka unuhi Paniolo:

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

Pono ʻoe e hoʻonohonoho pono i ka ʻōlelo o kāu palapala (a i ʻole ka lāʻau lalo) i mea e hōʻike ʻia ai ke kikokikona pololei. Hiki ke hana i kēia me ka hoʻohana ʻana i ke langʻano ma ka <html>element a i ʻole ke Content-Languagepoʻomanaʻo HTTP , ma waena o nā ʻano hana ʻē aʻe.

Unuhi a hoʻopilikino paha i nā kaula me HTML

Hāʻawi pū ʻo Bootstrap i kahi ala e unuhi ai i ka kikokikona "Browse" ma HTML me ke data-browseʻano i hiki ke hoʻohui ʻia i ka lepili hoʻokomo maʻamau (laʻana ma Dutch):

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