Source

Ụdị

Ọmụmatụ na ntuziaka ojiji maka ụdị njikwa ụdị, nhọrọ nhazi, na ngwa ọdịnala maka imepụta ụdị dị iche iche.

Nchịkọta

Njikwa ụdị Bootstrap na-agbasawanye n'ụdị anyị ewegharịrị na klas. Jiri klaasị ndị a banye n'ime ihe ngosi haziri ahazi maka ntụgharị na-agbanwe agbanwe n'ofe ihe nchọgharị na ngwaọrụ.

Jide n'aka na ị ga-eji njirimara kwesịrị ekwesị typena ntinye niile (dịka ọmụmaatụ, emailmaka adreesị ozi-e ma ọ bụ numbermaka ozi ọnụọgụ) iji nweta uru njikwa ndenye ọhụrụ dị ka nkwenye email, nhọrọ nọmba, na ndị ọzọ.

Nke a bụ ọmụmaatụ ngwa ngwa iji gosipụta ụdị ụdị Bootstrap. Nọgidenụ na-agụ maka akwụkwọ na klas achọrọ, nhazi ụdị, na ndị ọzọ.

Anyị agaghị ekekọrịta email gị na onye ọ bụla ọzọ. 
<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>

Njikwa ụdị

A na- ahazi njikwa ụdị ederede-dị ka <input>s, <select>s, na <textarea>s na .form-controlklaasị. Ọ gụnyere ụdị maka ọdịdị izugbe, ọnọdụ elekwasị anya, nha nha, na ndị ọzọ.

Jide n'aka na inyocha ụdị omenala anyị ka ị nwetakwuo ụdị <select>s.

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

Maka ntinye faịlụ, gbanwee ya .form-controlmaka .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>

Nha nha

Tọọ elu site na iji klas dịka .form-control-lgna .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>

Naanị ịgụ

Tinye njirimara readonlyboolean na ntinye iji gbochie mgbanwe nke uru ntinye. Ntinye naanị ọgụgụ na-apụta ọkụ (dị ka ntinye nwere nkwarụ), mana jigide cursor ọkọlọtọ.

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

Naanị ederede doro anya

Ọ bụrụ n’ịchọrọ ka <input readonly>emebere ihe ndị dị n’ụdị gị dị ka ederede doro anya, jiri .form-control-plaintextklaasị ahụ wepụ ụdị nhazi ubi ndabara wee chekwaa oke na padding ziri ezi.

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

Ntinye nso

Tọọ ntinye nso n'ahịrị atụgharị na-eji .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>

Igbe nlele na redio

A na-emelite igbe nrịbama na redio ndị ọzọ site n'enyemaka nke .form-checkotu klaasị maka ụdị ntinye abụọ nke na-eme ka nhazi na omume nke ihe HTML ha dị mma . Igbe nlele bụ maka ịhọrọ otu ma ọ bụ ọtụtụ nhọrọ na ndepụta, ebe redio bụ maka ịhọrọ otu nhọrọ n'ime ọtụtụ.

A na-akwado igbe nrịbama na redio nwere nkwarụ. Njirimara disableda ga-etinye agba dị nfe iji nyere aka gosi steeti ntinye.

Igbe nrịbama na bọtịnụ redio na-akwado nkwado ụdị dabere HTML ma nye akara nkenke, enwere ike ịnweta. N'ihi ya, ndị anyị <input>na ndị anyị <label>bụ ihe nwanne na-emegide nke <input>dị n'ime a <label>. Nke a dị ntakịrị karịa verbose ka ị ga-ezipụta idna fornjirimara iji mekọrịta <input>na <label>.

Ndi an-kpọ (kpakọtara)

Site na ndabara, ọnụọgụ igbe nlele na redio ọ bụla bụ nwanne ozugbo ga-edobe na kwụ ọtọ ma kesaa ya nke ọma na .form-check.

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

N'ahịrị

Igbe nrịbama otu ma ọ bụ redio n'otu ahịrị kwụ ọtọ site n'ịgbakwunye .form-check-inlinena nke ọ bụla .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>

Enweghị akara

Tinye .position-staticna ntinye n'ime .form-checknke enweghị ederede akara ọ bụla. Cheta ka ịnye ụfọdụ ụdị akara maka teknụzụ enyemaka (dịka ọmụmaatụ, iji 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>

Nhazi

Ebe Bootstrap na-emetụta display: blockyana width: 100%ihe fọrọ nke nta ka ọ bụrụ njikwa ụdị anyị niile, ụdị ga-abụ na ndabara tojupụtara na kwụ ọtọ. Enwere ike iji klaasị ndị ọzọ gbanwee okirikiri nhọrọ ukwuu n'ụdị n'ụdị.

Mepụta otu

Klas .form-groupbụ ụzọ kachasị mfe iji tinye usoro ụfọdụ na ụdị. Ọ na-enye klaasị na-agbanwe agbanwe nke na-agba ume ịchịkọta akara kwesịrị ekwesị, njikwa, ederede enyemaka nhọrọ, yana ozi nkwado ụdị. Site na ndabara ọ na-emetụta naanị margin-bottom, mana ọ na-ewelite ụdị ndị ọzọ dị .form-inlineka achọrọ. Jiri ya na <fieldset>s, <div>s, ma ọ bụ ihe fọrọ nke nta ka ọ bụrụ mmewere ọ bụla ọzọ.

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

grid ụdị

Enwere ike ịmepụta ụdị mgbagwoju anya karịa site na iji klas grid anyị. Jiri ndị a maka nhazi ụdị nke chọrọ ọtụtụ ogidi, obosara dị iche iche na nhọrọ nhazi agbakwunyere.

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

Ụdị ahịrị

Ị nwekwara ike gbanwee .rowmaka .form-row, mgbanwe nke ahịrị grid anyị nke na-agafe gọọlụ kọlụm ndabara maka nhazi kọmpat na karị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>

Enwere ike ịmepụta nhazi ndị dị mgbagwoju anya site na usoro 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>

Ụdị kwụ ọtọ

Mepụta ụdị kwụ ọtọ na grid site na ịgbakwunye .rowklaasị iji mepụta otu yana iji .col-*-*klaasị kọwaa obosara nke akara na njikwa gị. Jide n'aka na ị ga-agbakwunye .col-form-labelna s gị <label>ka ha wee dabere n'ụzọ kwụ ọtọ na njikwa ụdị ha jikọtara ya.

Mgbe ụfọdụ, ọ ga-adị mkpa ka ị jiri oke ma ọ bụ padding utilities mepụta nhazi ahụ zuru oke nke ịchọrọ. Dịka ọmụmaatụ, anyị ewepụla akara padding-topndenye redio anyị ekpokọtara iji kwado usoro ederede nke ọma.

Redio
Igbe nbanye 
<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>
Nha akara n'ahịrị kwụ ọtọ

Jide n'aka na ị na-eji .col-form-label-smma ọ bụ .col-form-label-lgna <label>s ma ọ bụ <legend>s gị iji soro nha .form-control-lgna .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>

Nha kọlụm

Dịka egosiri na ọmụmaatụ ndị gara aga, sistemụ grid anyị na-enye gị ohere idowe ọnụọgụ .cols ọ bụla n'ime a .rowma ọ bụ .form-row. Ha ga-ekewa obosara dị otu nha n'etiti ha. Ị nwekwara ike ịhọrọ akụkụ nke kọlụm gị ka ị weghara ohere ma ọ bụ dị ntakịrị, ebe ndị fọdụrụ .colna-ekewa nke ọzọ, yana klas kọlụm dị ka .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>

Nhazi nha akpaaka

Ọmụmaatụ dị n'okpuru na-eji ike flexbox iji kwụ ọtọ n'etiti ọdịnaya wee gbanwee .colka .col-autoogidi gị wee were naanị ohere ọ bụla achọrọ. N'ikwu ya n'ụzọ ọzọ, kọlụm nha onwe ya dabere na ọdịnaya.

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

Ị nwere ike megharịa nke ahụ ọzọ site na iji klaasị kọlụm akọwapụtara nke ọma.

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

Na n'ezie a na-akwado njikwa ụdị omenala .

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

Ụdị ntanetị

Jiri .form-inlineklaasị ahụ gosipụta usoro akara, njikwa ụdị na bọtịnụ n'otu ahịrị kwụ ọtọ. Njikwa ụdị n'ime ụdị ahịrị dị iche iche site na steeti ndabara ha.

  • Njikwa bụ display: flex, na-akụda oghere ọ bụla HTML na-enye gị ohere ịnye njikwa nhazi na spacing na flexbox utilities.
  • Njikwa na otu ntinye aka na-enweta width: autoiji kagbuo ndabara Bootstrap width: 100%.
  • Njikwa na-apụta naanị n'ahịrị n'ọdụ ụgbọ mmiri opekata mpe 576px maka akaụntụ maka nlele dị warara na ngwaọrụ mkpanaka.

Ị nwere ike iji aka tinye obosara na nhazi nke njikwa ụdị n'onwe ya na ngwa oghere (dị ka egosiri n'okpuru). N'ikpeazụ, jide n'aka na ị na-etinye oge niile <label>na njikwa ụdị ọ bụla, ọbụlagodi na ị ga-ezobe ya n'aka ndị ọbịa na-abụghị ndị na-agụ akwụkwọ na .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>

A na-akwadokwa njikwa ụdị omenala na nhọrọ.

<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>
Nhọrọ na akara ezoro ezo

Teknụzụ enyemaka dị ka ndị na-agụ ihuenyo ga-enwe nsogbu na ụdị gị ma ọ bụrụ na itinyeghị akara maka ntinye ọ bụla. Maka ụdị inline ndị a, ị nwere ike zoo akara n'iji .sr-onlyklas ahụ. Enwere ụzọ ọzọ nke ịnye akara maka teknụzụ enyemaka, dị ka aria-label, aria-labelledbyma ọ bụ titlenjirimara. Ọ bụrụ na ọ nweghị nke ọ bụla n'ime ihe ndị a dị, teknụzụ enyemaka nwere ike ịmalite iji placeholdernjirimara ahụ, ọ bụrụ na ọ dị, mana rịba ama na placeholdera naghị akwado iji dochie usoro akara ndị ọzọ.

Ederede enyemaka

Enwere ike ịmepụta ederede enyemaka mgbochi n'ụdị site na iji .form-text(nke a na-akpọbu .help-blockna v3). Enwere ike mejuputa ederede enyemaka dị n'ahịrị site na iji ihe HTML inline na klaasị ọ bụla dị ka .text-muted.

Na-ejikọta ederede enyemaka na njikwa ụdị

Ekwesịrị ijikọ ederede enyemaka nke ọma na njikwa ụdị ọ metụtara iji aria-describedbynjirimara ahụ. Nke a ga-ahụ na teknụzụ enyemaka-dị ka ndị na-agụ ihuenyo-ga-akpọsa ederede enyemaka a mgbe onye ọrụ lekwasịrị anya ma ọ bụ banye na njikwa.

Enwere ike iji hazie ederede enyemaka n'okpuru ntinye .form-text. Klas a na-agụnye display: blockma na-agbakwụnye ụfọdụ oke elu maka ohere dị mfe site na ntinye dị n'elu.

Okwuntughe gị ga-abụrịrị ogologo mkpụrụedemede 8-20, nwere mkpụrụedemede na ọnụọgụ, ma ọ gaghị enwe oghere, mkpụrụedemede pụrụ iche, ma ọ bụ 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>

Ederede inline nwere ike iji ihe ọ bụla HTML inline inline (ma ọ bụrụ a <small>, <span>, ma ọ bụ ihe ọzọ) na-enweghị ihe ọ bụla karịa klas uru.

Ga-enwerịrị mkpụrụedemede 8-20 ogologo. 
<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>

Ụdị nkwarụ

Tinye njirimara disabledboolean na ntinye iji gbochie mmekọrịta ndị ọrụ wee mee ka ọ dị ọkụ.

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

Tinye disablednjirimara na a <fieldset>iji gbanyụọ njikwa niile dị n'ime.

<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>
Ejikwa arịlịka gbachie anya

Site na ndabara, ihe nchọgharị ga-emeso njikwa ụdị ala ala niile ( <input>, <select>na <button>ọcha) n'ime onye <fieldset disabled>nwere nkwarụ, na-egbochi ma keyboard na òké mmekọrịta na ha. Agbanyeghị, ọ bụrụ na ụdị gị gụnyekwara <a ... class="btn btn-*">ihe ndị a, a ga-enye naanị ụdị pointer-events: none. Dị ka ekwuru na ngalaba gbasara ọnọdụ nkwarụ maka bọtịnụ (yana kpọmkwem na mpaghara mpaghara maka ihe arịlịka), ihe onwunwe CSS a ahazibeghị nke ọma na akwadobeghị ya na Internet Explorer 10, ọ gaghị egbochi ndị ọrụ ahụigodo ịbụ. nwee ike ilekwasị anya ma ọ bụ rụọ ọrụ njikọ ndị a. Ya mere, ka ọ dịrị nchebe, jiri Javascript omenala iji gbanyụọ njikọ ndị a.

Ndakọrịta ihe nchọgharị gafere

Ọ bụ ezie na Bootstrap ga-etinye ụdị ndị a na ihe nchọgharị niile, Internet Explorer 11 na nke dị n'okpuru anaghị akwado disablednjirimara na faịlụ <fieldset>. Jiri Javascript omenala iji gbanyụọ ntọala ubi na ihe nchọgharị ndị a.

Nkwado

Nye ndị ọrụ gị nzaghachi bara uru, nke nwere ike ịrụ ọrụ na nkwado ụdị HTML- dị na ihe nchọgharị anyị niile na-akwado . Họrọ nzaghachi nkwado ndabere nke ihe nchọgharị ahụ, ma ọ bụ mejuputa ozi omenala site na iji klaasị arụnyere na mmalite Javascript.

Anyị na-akwado ugbu a iji ụdị nkwado omenala, ebe ọ bụ na anaghị ekpughe ozi nkwado ndabere nke ihe nchọgharị ala na teknụzụ enyemaka na ihe nchọgharị niile (nke kachasị, Chrome na desktọpụ na mkpanaka).

Ka o si arụ ọrụ

Nke a bụ ka nkwado fọm si arụ ọrụ na Bootstrap:

  • A na-etinye nkwado ụdị HTML site na klaasị pseudo abụọ nke CSS, :invalidyana :valid. Ọ na-emetụta <input>, <select>, na <textarea>ọcha.
  • Bootstrap na-agbasa :invalidna :validụdị na .was-validatedklaasị nne na nna, a na-etinyekarị ya na faịlụ <form>. Ma ọ bụghị ya, ubi ọ bụla achọrọ na-enweghị uru na-egosi na ezighi ezi na ibu ibe. N'ụzọ dị otú a, ị nwere ike họrọ mgbe ịgbalite ha (na-emekarị mgbe a nwara nrubeisi ụdị).
  • Iji tọgharịa ọdịdị nke ụdị ahụ (dịka ọmụmaatụ, n'ihe gbasara ntinye ụdị ike na-eji AJAX), wepụ .was-validatedklas ahụ <form>ọzọ mgbe nrubeisi gasịrị.
  • Dị ka ndaghachi azụ, .is-invalidna .is-validklaasị nwere ike iji kama pseudo-klas maka nkwado akụkụ sava . Ha achọghị .was-validatedklas nne na nna.
  • N'ihi mmachi dị na ka CSS si arụ ọrụ, anyị enweghị ike (ugbu a) itinye ụdị na nke <label>na-abịa n'ihu njikwa ụdị na DOM na-enweghị enyemaka nke JavaScript omenala.
  • Ihe nchọgharị ọgbara ọhụrụ niile na-akwado API nkwado mgbochi , usoro Javascript maka njikwa ụdị.
  • Ozi nzaghachi nwere ike iji ndabara ihe nchọgharị ahụ (dị iche maka ihe nchọgharị ọ bụla, yana nke na-adịghị mma site na CSS) ma ọ bụ ụdị nzaghachi omenala anyị nwere HTML na CSS agbakwunyere.
  • Ị nwere ike ịnye ozi nkwado ndabere na setCustomValiditympaghara Javascript.

N'iburu nke ahụ n'uche, tụlee ngosi ngosi ndị a maka ụdị nkwado ụdị omenala anyị, klaasị akụkụ ihe nkesa nhọrọ, yana ndabara ihe nchọgharị.

Ụdị omenala

Maka ozi nkwado ụdị Bootstrap omenala, ị ga-achọ ịgbakwunye njirimara novalidateboolean na faịlụ <form>. Nke a na-ewepụ ntụzịaka ngwaọrụ nzaghachi ndabara ihe nchọgharị, mana ọ ka na-enye ohere ịnweta API nkwado ụdị na Javascript. Gbalịa nyefee ụdị n'okpuru; Javascript anyị ga-egbochi bọtịnụ ntinye ma nyefee gị nzaghachi. Mgbe ị na-agbalị ịnyefe, ị ga-ahụ :invalidna :validụdị ndị etinyere na njikwa ụdị gị.

Ụdị nzaghachi omenala na-etinye agba, oke, ụdị elekwasị anya, na akara ndabere iji nweta nzaghachi ka mma. Akara ngosi ndabere maka <select>s dị naanị .custom-selectna ọ bụghị .form-control.

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

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

Nchọgharị ndabara

Enweghị mmasị na ozi nzaghachi nkwado omenala ma ọ bụ ide Javascript iji gbanwee omume ụdị? Ọ dị mma, ịnwere ike iji ndabara ihe nchọgharị ahụ. Gbalịa ịnyefe fọm dị n'okpuru. Dabere na ihe nchọgharị gị na OS, ị ga-ahụ ụdị nzaghachi dịtụ iche.

Ọ bụ ezie na enweghị ike iji CSS hazie ụdị nzaghachi ndị a, ị ka nwere ike hazie ederede nzaghachi site na 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>

Akụkụ nkesa

Anyị na-akwado iji nkwado n'akụkụ ndị ahịa, mana ọ bụrụ na ịchọrọ nkwado n'akụkụ nkesa, ị nwere ike igosi oghere na ezighi ezi yana dị irè yana .is-invalidyana .is-valid. Rịba ama na .invalid-feedbackakwadoro ya na klaasị ndị a.

Ọ mara mma!
Ọ mara mma!
@
Biko họrọ aha njirimara.
Biko nye obodo bara uru.
Biko họrọ steeti bara uru.
Biko nye zip ziri ezi.
Ị ga-ekwenyerịrị tupu ịnyefe. 
<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>

Ihe akwadoro

Ụdị nkwado dị maka njikwa ụdị na ihe ndị a:

  • <input>s na <textarea>s nwere .form-control(gụnyere ihe ruru otu n'ime otu .form-controlntinye)
  • <select>s na .form-controlma ọ bụ.custom-select
  • .form-checks
  • .custom-checkboxs na .custom-radios
  • .custom-file
Biko tinye ozi na mpaghara ederede.
Ọmụmaatụ ederede nzaghachi na-ezighi ezi
Ihe atụ ọzọ ederede nzaghachi na-ezighi ezi
Ọmụmaatụ nzaghachi omenala ezighi ezi
Ọmụmaatụ nzaghachi faịlụ ahaziri ezighi ezi 
<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>

Ntuziaka ngwaọrụ

Ọ bụrụ na nhazi ụdị gị na-enye ya ohere, ị nwere ike gbanwee .{valid|invalid}-feedbackklaasị maka .{valid|invalid}-tooltipklaasị iji gosipụta nzaghachi nkwado n'ụdị ngwa ọrụ ahaziri. Jide n'aka na ị ga-enwe nne na nna position: relativena ya maka idobe ngwa ọrụ. N'ihe atụ dị n'okpuru, klaasị kọlụm anyị enweela nke a, mana ọrụ gị nwere ike ịchọ nhazi ọzọ.

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>

Nhazi

Enwere ike ịhazi steeti nkwado site na Sass yana $form-validation-statesmaapụ. Dị na _variables.scssfaịlụ anyị, a na-emechi maapụ Sass a ka iwepụta steeti ndabara valid/ invalidnkwado. Agụnyere bụ maapụ akwụ ụgwọ maka ịhazi agba na akara ngosi steeti ọ bụla. Ọ bụ ezie na enweghị steeti ndị ọzọ nke ihe nchọgharị na-akwado, ndị na-eji ụdị omenala nwere ike itinye nzaghachi ụdị dị mgbagwoju anya ngwa ngwa.

Biko mara na anyị anaghị akwado ịhazi ụkpụrụ ndị a na- form-validation-stateagbanweghịkwa mixin.

// 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));
}

Ụdị omenala

N'ihi na ọbụna ndị ọzọ customization na cross agbanwe agbanwe nchọgharị, na-eji anyị kpam kpam omenala ụdị ọcha dochie ihe nchọgharị ndabere. Ewubere ha n'elu akara semantic na ịnweta, yabụ na ha bụ ndị nnọchi siri ike maka njikwa ụdị ndabara ọ bụla.

Igbe nlele na redio

Igbe nrịbama ọ bụla na redio <input>na <label>njikọta ka etinyere n'ime a <div>iji mepụta njikwa omenala anyị. N'usoro, nke a bụ otu ụzọ dị ka ndabara anyị .form-check.

Anyị na-eji onye ahọpụtara nwanne ( ~) maka steeti anyị <input>niile - dị ka :checked- iji hazie akara ngosi omenala anyị nke ọma. Mgbe ejikọtara ya na .custom-control-labelklaasị, anyị nwekwara ike ịkepụta ederede maka ihe ọ bụla dabere na steeti <input>'s.

Anyị na-eji na-ezobe ndabara wee jiri <input>ya wuo ihe ngosi omenala ọhụrụ n'ọnọdụ ya yana yana . Ọ dị nwute na anyị enweghị ike iwulite omenala site na naanị n'ihi na CSS anaghị arụ ọrụ na mmewere ahụ.opacity.custom-control-label::before::after<input>content

Na steeti enyochala, anyị na-eji akara ngosi SVG agbakwunyere base64 sitere na Mepee Iconic . Nke a na-enye anyị njikwa kacha mma maka ịke na idowe n'ofe ihe nchọgharị na ngwaọrụ.

Igbe nbanye

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

Igbe nrịbama nke omenala nwekwara ike iji :indeterminateklaasị pseudo mgbe ejiri aka tinye ya site na Javascript (enweghị njiri HTML dị maka ịkọwa ya).

Ọ bụrụ na ị na-eji jQuery, ihe dị ka nke a ga-ezuru:

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

Redio

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

N'ahịrị

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

Agbanyụrụ

Enwere ike gbanyụọ igbe nrịbama na redio omenala. Tinye njirimara disabledboolean na <input>akara ngosi omenala na nkọwa akara ga-edo onwe ya na-akpaghị aka.

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

Mgbanwe

Mgbanwe nwere akara nke igbe nrịbama omenala mana ọ na-eji .custom-switchklaasị mee mgbanwe mgbanwe. Mgbanwe na-akwadokwa disablednjirimara ahụ.

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

Họrọ menu

Nchịkọta nhọrọ omenala <select>chọrọ naanị klas omenala, .custom-selectiji kpalite ụdị omenala. Ụdị omenala bụ naanị na <select>ọdịdị mbụ ya enweghị ike ịgbanwe <option>s n'ihi oke ihe nchọgharị.

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

Ị nwekwara ike họrọ n'ime obere na nnukwu omenala ahọpụtara iji dakọọ ntinye ederede anyị nhata.

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

Akwadokwa multiplenjirimara a:

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

Dị ka sizeàgwà ahụ dị:

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

Oke

Jiri <input type="range">njikwa ahaziri ahazi .custom-range. Edebere egwu ahụ (ndabere) na mkpịsị aka (ọnụahịa) ka ha pụta otu ihe n'ofe ihe nchọgharị. Dị ka naanị IE na Firefox na-akwado "mejupụta" egwu ha site n'aka ekpe ma ọ bụ aka nri nke mkpịsị aka aka dị ka ụzọ isi gosipụta ọganihu anya, anyị anaghị akwado ya ugbu a.

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

Ntinye oke nwere ụkpụrụ maka minna max- 0na 100, n'otu n'otu. Ị nwere ike ịkọwapụta ụkpụrụ ọhụrụ maka ndị na-eji minna maxnjirimara.

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

Site na ndabara, nsonye ntinye "snap" gaa na ọnụọgụ ọnụọgụgụ. Iji gbanwee nke a, ị nwere ike ịkọwa stepuru. N'ihe atụ dị n'okpuru, anyị na-agbakọ ọnụ ọgụgụ nke nzọụkwụ site na iji step="0.5".

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

Ihe nchọgharị faịlụ

Ngwa mgbakwunye a tụrụ aro ka ọ mee ka ntinye faịlụ omenala na-eme ihe: bs-custom-file-input , nke ahụ bụ ihe anyị na-eji ugbu a na docs anyị.

Ntinye faịlụ ahụ bụ nke kachasị ngọngọ nke ụyọkọ ahụ ma chọọ Javascript ọzọ ma ọ bụrụ na ịchọrọ ijikọ ha na arụ ọrụ Họrọ faịlụ… wee họrọ ederede aha faịlụ.

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

Anyị na-ezobe faịlụ ndabara <input>site opacityna kama ịke ụdị <label>. A na-emepụta bọtịnụ ma tinye ya na ::after. N'ikpeazụ, anyị na-ekwupụta a widthna heightmaka <input>ohere kwesịrị ekwesị maka ọdịnaya gbara ya gburugburu.

Iji SCSS na-atụgharị asụsụ ma ọ bụ hazie eriri ahụ

A :lang()na-eji pseudo-klas iji nye ohere ntụgharị asụsụ nke “Chọgharịa” n'asụsụ ndị ọzọ. Wepụ ma ọ bụ tinye ndenye na $custom-file-textmgbanwe Sass na mkpado asụsụ dị mkpa yana eriri mpaghara. Enwere ike ịhazi eriri bekee n'otu ụzọ ahụ. Dịka ọmụmaatụ, nke a bụ otu mmadụ nwere ike isi tinye ntụgharị asụsụ Spanish (koodu asụsụ Spanish bụ es):

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

Nke a lang(es)na-arụ ọrụ na ntinye faịlụ omenala maka ntụgharị asụsụ Spanish:

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

Ị ga-achọ ịtọ asụsụ nke akwụkwọ gị (ma ọ bụ obere osisi ya) nke ọma ka e wee gosi ederede ziri ezi. Enwere ike ime nke a site na iji njirimara langdị na <html>mmewere ma ọ bụ Content-Languagenkụnye eji isi mee HTTP , n'etiti ụzọ ndị ọzọ.

Iji HTML na-atụgharị asụsụ ma ọ bụ hazie eriri ahụ

Bootstrap na-enyekwa ụzọ iji tụgharịa asụsụ ederede “Chọgharịa” na HTML yana data-browsenjirimara enwere ike ịgbakwunye na akara ntinye omenala (ihe atụ na 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>