Source

Mafomu

Mienzaniso uye nhungamiro yekushandisa yemafomu ekudzora masitayipi, sarudzo dzemarongerwo, uye tsika zvikamu zvekugadzira akasiyana siyana mafomu.

Overview

Bootstrap's fomu inodzora inowedzera pane yedu Rebooted fomu masitayipi nemakirasi. Shandisa makirasi aya kuti usarudze mumaratidziro awo akagadziridzwa kuti awedzere kuenderana mumabhurawuza nemidziyo.

Iva nechokwadi chekushandisa typehunhu hwakakodzera pane zvese zvinoiswa (semuemail emailkero kana numberyeruzivo rwenhamba) kutora mukana wezvitsva zvidzoreso zvekuisa senge email yekuongorora, kusarudza nhamba, nezvimwe.

Heino muenzaniso wekukurumidza kuratidza Bootstrap's fomu masitaera. Ramba uchiverengera zvinyorwa pamakirasi anodiwa, chimiro chemafomu, nezvimwe.

Hatife takagovana email yako nemumwe munhu. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-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>

Zvidzoreso zvemafomu

Manyorerwo emafomu ekutonga-senge <input>s, <select>s, uye <textarea>s-akanyorwa .form-controlnekirasi. Inosanganisirwa masitayera echitarisiko chakajairwa, chimiro chekutarisa, saizi, nezvimwe.

Iva nechokwadi chekuongorora mafomu edu echinyakare kuti uwedzere maitiro <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>

Kuti uwane mamepu efaira, chinjanisa iyo .form-controlye .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>

Kukura

Seta hurefu uchishandisa makirasi akadai .form-control-lguye .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>

Read only

Wedzera iyo readonlyboolean hunhu pane yekuisa kudzivirira kugadziridzwa kweiyo kukosha kwekuisa. Zvekuverenga-chete zvinowoneka zvakareruka (sezvakangoita zvakadzimwa), asi chengetedza chiyero chekare.

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

Verenga chete mavara akajeka

Kana iwe uchida kuve <input readonly>nezvikamu mufomu yako zvakataera semavara akajeka, shandisa .form-control-plaintextkirasi kubvisa iyo yakasarudzika fomu yemunda styling uye chengetedza iyo chaiyo margin uye padding.

<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" placeholder="Password">
    </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>

Range Inputs

Seta zvakachinjika zvinotenderedzwa siyana zvekushandisa uchishandisa .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>

Checkboxes nemaredhiyo

Default checkboxes nemaredhiyo anovandudzwa nerubatsiro rwe .form-check, kirasi imwe chete yemhando mbiri dzekuisa inovandudza marongerwo nemaitiro ezvimiro zvavo zveHTML . Mabhokisi ekutarisa ndeekusarudza imwe kana akati wandei sarudzo mune runyorwa, nepo maredhiyo ari ekusarudza imwe sarudzo kubva kune akawanda.

Mabhokisi ekutarisa akaremara uye maredhiyo anotsigirwa, asi kuti upe not-allowedcursor pane hover yemubereki <label>, unozofanira kuwedzera disabledhunhu kune .form-check-input. Hunhu hwakaremara huchaisa ruvara rwakareruka kubatsira kuratidza mamiriro ezvakaiswa.

Mabhokisi ekutarisa uye kushandiswa kwemaredhiyo akavakwa kuti atsigire HTML-yakavakirwa fomu kusimbiswa uye kupa mapfupi, anowanikwa mavara. Saka nekudaro, yedu <input>uye isu <label>zvinhu zvehama zvinopesana nemukati <input>me <label>. Izvi zvine verbose zvishoma sezvaunofanirwa kutsanangura iduye forhunhu hune hukama <input>ne <label>.

Default (yakaturikidzana)

Nekumisikidza, chero nhamba yemabhokisi ekutarisa uye maredhiyo ari epedyo hama anozorongedzerwa akamira uye akapatsanurwa zvakafanira ne .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

Boka mabhokisi ekutarisa kana maredhiyo pamutsara wakachinjika wakafanana nekuwedzera .form-check-inlinekune chero .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>

Pasina mavara

Wedzera .position-statickune zvinoiswa mukati .form-checkizvo hazvina chero mavara mavara. Rangarira uchiri kupa imwe fomu yelabel yekubatsira matekinoroji (semuenzaniso, kushandisa 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>

Layout

Sezvo Bootstrap ichishanda display: blockuye width: 100%kune angangoita ese emafomu edu anodzora, mafomu achaita nekusarudzika stack vertically. Makirasi ekuwedzera anogona kushandiswa kusiyanisa dhizaini iyi pane imwe-fomu.

Gadzira mapoka

Kirasi .form-groupndiyo nzira iri nyore yekuwedzera imwe chimiro kune mafomu. Inopa kirasi inochinjika inokurudzira kuunganidzwa kwakafanira kwemavara, zvinodzora, mameseji erubatsiro esarudzo, uye meseji yekusimbisa fomu. Nekusarudzika inongoshanda chete margin-bottom, asi inotora mamwe masitayera mukati .form-inlinesezvinodiwa. Ishandise ne <fieldset>s, <div>s, kana chero chimwe chinhu.

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

Fomu grid

Mamwe mafomu akaoma anogona kuvakwa pachishandiswa grid makirasi edu. Shandisa izvi kune zvimiro zvemafomu zvinoda makoramu akawanda, upamhi hwakasiyana, uye dzimwe sarudzo dzekugadzirisa.

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

Fomu mutsara

Iwe unogona zvakare kuchinjisa .row, .form-rowmutsauko weyakajairwa gidhi mutsara iyo inodarika iyo default column gutters kune yakasimba uye yakawanda compact marongero.

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

Mamwe magadzirirwo akaomarara anogona zvakare kugadzirwa neiyo grid system.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <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>

Horizontal fomu

Gadzira mafomu akachinjika negridi nekuwedzera .rowkirasi kuti aumbe mapoka uye nekushandisa .col-*-*makirasi kutsanangura hupamhi hwemavara ako uye zvidzoreso. Iva nechokwadi chekuwedzera .col-form-labelkune yako <label>zvakare kuitira kuti ivo vakamira pakati nepakati neavo vane hukama mafomu ekutonga.

Dzimwe nguva, iwe ungangoda kushandisa margin kana padding zvishandiso kuti ugadzire iyo yakakwana kurongeka kwaunoda. Semuyenzaniso, takabvisa padding-toplabel yeredhiyo yedu yakarongedzerwa kuti ienderane nani mavara ekutanga.

Redhiyo
Checkbox 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-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>
Horizontal fomu label saizi

Iva nechokwadi chekushandisa .col-form-label-smkana .col-form-label-lgkune yako <label>kana <legend>s kutevedzera nemazvo saizi ye .form-control-lguye .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>

Column saizi

Sezvinoratidzwa mumienzaniso yapfuura, grid system yedu inokutendera kuti uise chero nhamba ye .cols mukati .rowkana .form-row. Vanozopatsanura hupamhi huripo zvakaenzana pakati pavo. Iwe unogona zvakare kutora subset yemakoramu ako kuti utore yakawanda kana shoma nzvimbo, nepo yasara .cols yakaenzana kupatsanura yasara, ine chaiwo makoramu makirasi senge .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>

Auto-kukura

Muenzaniso uri pazasi unoshandisa flexbox utility kudzika pakati pezviri mukati uye shanduko .colkuitira .col-autokuti makoramu ako atore nzvimbo yakawanda sezvinodiwa. Isa imwe nzira, iyo column saizi pachayo zvichienderana nezviri mukati.

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

Iwe unogona ipapo kusanganisa izvo zvakare nehukuru-chaiyo makoramu makirasi.

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

Uye zvechokwadi maitiro ekugadzirisa fomu anotsigirwa.

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

Inline mafomu

Shandisa .form-inlinekirasi kuratidza nhevedzano yemavara, zvidzoreso zvemafomu, uye mabhatani pamutsara mumwe wakachinjika. Zvidzoreso zvemafomu mukati memafomu emukati zvinosiyana zvishoma kubva kune yavo yakasarudzika.

  • Zvidzoreso ndezve display: flex, kudonhedza chero HTML chena nzvimbo uye ichikubvumidza iwe kuti upe kurongeka kwekutonga ne spacing uye flexbox zvishandiso.
  • Zvinodzora uye mapoka width: autoekuisa anogashira kudarika iyo Bootstrap default width: 100%.
  • Zvidzoreso zvinongooneka zviri mukati mezviteshi zvekutarisa zvinosvika 576px pahupamhi kuzvidavirira kune nhete dzekutarisa pane nharembozha.

Ungangoda kugadzirisa nemaoko hupamhi uye kurongeka kwezvidzoreso zvemafomu ega ega nezvinzvimbo zvekushandisa (sezvinoratidzwa pazasi). Chekupedzisira, ive shuwa kuti unogara uchisanganisira a <label>ine yega yega fomu control, kunyangwe iwe uchifanira kuiviga kubva kune vasiri-screenreader vashanyi vane .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>

Tsika fomu kudzora uye anosarudza anotsigirwa zvakare.

<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>
Zvimwe kune zvinyorwa zvakavanzwa

Matekinoroji ekubatsira akadai seaverengi ezvidzitiro achave nedambudziko nemafomu ako kana ukasabatanidza label yeese mapindiro. Kune aya mafomu emukati, unogona kuvanza mavara uchishandisa .sr-onlykirasi. Kune dzimwe nzira dzekupa label yekubatsira matekinoroji, senge aria-label, aria-labelledbykana titlehunhu. Kana pasina chimwe cheizvi chiripo, tekinoroji dzekubatsira dzinogona kushandisa placeholderhunhu, kana huripo, asi cherechedza kuti kushandiswa placeholderkwechinzvimbo chedzimwe nzira dzekunyora hakukurudzirwe.

Batsira mameseji

Mameseji erubatsiro eBlock-level mumafomu anogona kugadzirwa uchishandisa .form-text(yaimbozivikanwa sekuti .help-blockmuv3). Inline rubatsiro mameseji anogona kuitwa zviri nyore kushandisa chero inline HTML chinhu uye utility makirasi senge .text-muted.

Kubatanidza mavara erubatsiro nemafomu ekudzora

Runyoro rwekubatsira runofanira kubatanidzwa zvakajeka nefomu rekutonga rine chekuita nekushandisa aria-describedbyhunhu. Izvi zvinogonesa kuti tekinoroji dzinobatsira — dzakaita sezviverengi zvemasikirini — dzichazivisa mavara erubatsiro aya kana mushandisi akatarisa kana kupinda mukutonga.

Mavara ekubatsira ari pazasi anogona kunyorwa ne .form-text. Kirasi iyi inosanganisira display: blockuye inowedzera imwe yepamusoro margin kuitira nyore kupatsanura kubva kune izvo zviri pamusoro.

Password yako inofanira kuva nemavara 8-20 kureba, iine mavara nenhamba, uye haifanire kunge iine nzvimbo, mavara akasarudzika, kana 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>

Inline text inogona kushandisa chero yakajairwa inline HTML element (ingave a <small>, <span>, kana chimwewo chinhu) isina chimwe chinhu kunze kwekirasi yekushandisa.

Inofanira kuva nemabhii 8-20 kureba. 
<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>

Mafomu akaremara

Wedzera iyo disabledboolean hunhu pane inopinza kudzivirira kusangana kwevashandisi uye kuita kuti iite seyakareruka.

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

Wedzera disabledhunhu kune a <fieldset>kudzima zvese zvinodzora mukati.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat nezvibatiso

Nekumisikidza, mabhurawuza anobata ese ekuzvarwa mafomu ekutonga ( <input>, <select>uye <button>zvinhu) mukati <fieldset disabled>seakaremara, kudzivirira zvese zviri zviviri keyboard uye mbeva kupindirana pazviri. Nekudaro, kana fomu rako richisanganisira <a ... class="btn btn-*">zvinhu, izvi zvinongopihwa maitiro e pointer-events: none. Sezvacherechedzwa muchikamu nezve yakaremara nyika yemabhatani (uye kunyanya muchikamu chidiki che anchor elements), iyi CSS pfuma haisati yamira uye haisati yanyatso tsigirwa muInternet Explorer 10, uye haizodzivise vashandisi inokwanisa kutarisisa kana kumisa zvinongedzo izvi. Saka kuti uve wakachengeteka, shandisa tsika JavaScript kudzima zvinongedzo zvakadaro.

Cross-browser kuenderana

Nepo Bootstrap ichizoshandisa masitaera aya mumabhurawuza ese, Internet Explorer 11 uye pazasi haitsigire zvizere disabledhunhu pane <fieldset>. Shandisa JavaScript yakajairwa kudzima iyo fieldset mumabrowser aya.

Validation

Ipa mhinduro yakakosha, inoshanda kune vashandisi vako neHTML5 fomu yekusimbisa- inowanikwa mumabhurawuza edu ese anotsigirwa . Sarudza kubva kubrowser yekusimbisa mhinduro, kana shandisa mameseji echinyakare nemakirasi edu akavakirwa-mukati uye yekutanga JavaScript.

Isu pari zvino tinokurudzira kushandisa masitaera ekusimbisa, sezvo mameseji ekutanga ebrowser echokwadi haarambe achiratidzwa kune anobatsira matekinoroji mumabhurawuza ese (kunyanya, Chrome padesktop uye nharembozha).

Zvinoshanda sei

Heano maitiro ekusimbisa fomu neBootstrap:

  • HTML fomu yekusimbisa inoiswa kuburikidza neCSS maviri ekunyepedzera-makirasi, :invaliduye :valid. Inoshanda kune <input>, <select>, uye <textarea>zvinhu.
  • Bootstrap inoyera iyo :invaliduye :validmasitaera kukirasi yevabereki .was-validated, inowanzoiswa kune iyo <form>. Zvikasadaro, chero munda unodiwa usina kukosha unoratidza seusina kusimba pakurodha peji. Nenzira iyi, unogona kusarudza nguva yekuamisa (kazhinji mushure mekutumira fomu kwaedza).
  • Kuti ugadzirise zvakare chitarisiko chefomu (semuenzaniso, kana iri dhizaini yekutumira fomu uchishandisa AJAX), bvisa .was-validatedkirasi kubva <form>zvakare mushure mekutumira.
  • Sekudzokera kumashure, .is-invaliduye .is-validmakirasi anogona kushandiswa pachinzvimbo chemanyepo-makirasi evhavha parutivi kusimbiswa . Havadi .was-validatedkirasi yevabereki.
  • Nekuda kwezvimhingamipinyi mumashandiro anoita CSS, hatigone (parizvino) kushandisa masitayipi kune <label>anouya pamberi pefomu rekutonga muDOM pasina rubatsiro rwetsika JavaScript.
  • Ese mabhurawuza emazuva ano anotsigira API yekumisikidzwa , nhevedzano yeJavaScript nzira dzekusimbisa mafomu ekutonga.
  • Mameseji emhinduro anogona kushandisa kusarudzika kwebrowser (yakasiyana pabrowser yega yega, uye isinganyoreki kuburikidza neCSS) kana maitiro edu emhinduro neHTML neCSS.
  • Unogona kupa mameseji echokwadi echinyakare setCustomValiditymuJavaScript.

Uine izvo mupfungwa, funga anotevera dhemo kune yedu tsika fomu yekusimbisa masitayipi, sarudzo ye server padivi makirasi, uye browser defaults.

Zvitaera zvetsika

Kune mameseji ekusimbisa fomu yeBootstrap, iwe unofanirwa kuwedzera iyo novalidateboolean hunhu kune yako <form>. Izvi zvinodzima matipi emhinduro dzebrowser, asi zvichingopa mukana weiyo fomu yekusimbisa maAPI muJavaScript. Edza kuendesa fomu riri pazasi; yedu JavaScript inotambira bhatani rekutumira uye nekudzosera mhinduro kwauri.

Paunenge uchiedza kutumira, iwe uchaona iwo :invaliduye :validmasitaera akaiswa kune ako emafomu ekutonga.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide 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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <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>

Browser defaults

Haufariri mameseji emhinduro yekusimbisa kana kunyora JavaScript kuti uchinje maitiro? Zvese zvakanaka, unogona kushandisa zvimiro zvebrowser. Edza kutumira fomu riri pazasi. Zvichienderana nebrowser yako neOS, uchaona imwe nzira yakasiyana yemhinduro.

Nepo aya masitayera emhinduro asingagone kunyorwa neCSS, unogona kugadzirisa mameseji emhinduro kuburikidza neJavaScript.

@ 
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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>

Server side

Isu tinokurudzira kushandisa mutengi divi rekusimbisa, asi kana iwe uchida sevha divi, unogona kuratidza isiriyo uye inoshanda fomu maminda ane .is-invaliduye .is-valid. Ziva izvo .invalid-feedbackzvinotsigirwawo nemakirasi aya.

Zvinotaridzika zvakanaka!
Zvinotaridzika zvakanaka!
@
Ndapota sarudza zita rekushandisa.
Ndokumbira upe guta rinoshanda.
Ndokumbirawo mupe nyika inodiwa.
Ndokumbira upe zip inoshanda.
Unofanira kubvumirana usati watumira. 
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <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>

Zvinhu zvinotsigirwa

Mafomu edu emuenzaniso anoratidza manyorerwo echinyakare ari <input>pamusoro, asi masitaera ekusimbisa mafomu anowanikwa kune edu echinyakare fomu kudzora, zvakare.

Muenzaniso mashoko emhinduro haashandi
Mimwe muenzaniso mavara emhinduro isiriyo
Sarudzo yemhinduro inosarudzika
Muenzaniso hausiwo mhinduro yefaira 
<form class="was-validated">
  <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>

Tooltips

Kana chimiro chefomu chako chichichibvumira, unogona kuchinjanisa .{valid|invalid}-feedbackmakirasi .{valid|invalid}-tooltipemakirasi kuratidza mhinduro yekusimbisa mune yakashongedzwa tooltip. Iva neshuwa kuti une mubereki position: relativepairi wetip yekumisikidza. Mumuenzaniso uri pazasi, makirasi edu emakoramu ane izvi nechekare, asi purojekiti yako ingangoda imwe yekuseta.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide 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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Tsika mafomu

Kuti uwedzere kugadzirisa uye kuchinjika kwebrowser kuenderana, shandisa edu akazara maitiro emafomu kutsiva iyo browser defaults. Iwo akavakirwa pamusoro pe semantic uye inosvikika markup, saka iwo akasimba ekutsiva kune chero default fomu rekutonga.

Checkboxes nemaredhiyo

Bhokisi rega rega recheki neredhiyo zvakaputirwa muine <div>munin'ina <span>kugadzira tsika yedu yekutonga uye <label>yezvinyorwa zvinoperekedza. Zvimiro, iyi ndiyo nzira imwe chete neyedu yekusarudzika .form-check.

Isu tinoshandisa sibling selector ( ~) kune ese edu <input>ematunhu-se- :checkedkunyatso dhizaini yedu fomu fomu chiratidzo. Kana zvabatanidzwa .custom-control-labelnekirasi, tinokwanisa zvakare kutaira mavara echinhu chimwe nechimwe zvichienderana nemamiriro <input>ezvinhu.

Isu tinovanza iyo yakasarudzika <input>nayo opacityuye tinoshandisa iyo .custom-control-labelkuvaka nyowani yemhando fomu chiratidzo panzvimbo yayo ::beforene ::after. Nehurombo isu hatigone kuvaka imwe tsika kubva chete <input>nekuti CSS's contenthaishande pane icho chinhu.

Munzvimbo dzakatariswa, tinoshandisa base64 yakamisikidzwa SVG icons kubva Open Iconic . Izvi zvinotipa kudzora kwakanakisa kwekutaira uye kuisa chinzvimbo mumabrowser nemidziyo.

Checkboxes

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

Tsika dzekutarisa mabhokisi anogona zvakare kushandisa iyo :indeterminatepseudo kirasi kana yaiswa nemaoko kuburikidza neJavaScript (hapana iripo HTML hunhu hwekuitsanangura).

Kana uri kushandisa jQuery, chimwe chinhu chakadai chinofanira kukwana:

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

Redhiyo

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

Yakaremara

Tsika dzekutarisa mabhokisi nemaredhiyo anogona zvakare kudzimwa. Wedzera iyo disabledboolean hunhu kune iyo <input>uye yetsika chiratidzo uye tsananguro yezita inozoitwa otomatiki.

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

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

Sarudza menyu

Mamenu <select>echivanhu anoda chete kirasi yetsika, .custom-selectkukonzeresa masitaera etsika. Zvitaera zvechivanhu zvinogumira <select>pakuonekwa kwekutanga uye hazvigone kushandura <option>s nekuda kwekugumira kwebrowser.

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

Iwe unogona zvakare kusarudza kubva kudiki uye hombe tsika yakasarudzwa kuti ienderane nehukuru hwedu hwemavara mamepu.

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

Hunhu multiplehunotsigirwawo:

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

Sezvakaita sizehunhu:

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

Range

Gadzira zvidzoreso zvetsika <input type="range">ne .custom-range. Iyo track (yekumashure) uye chigunwe (ukoshi) zvese zvakadhindwa kuti zvioneke zvakafanana pamabhurawuza. Sezvo chete IE neFirefox inotsigira "kuzadza" track yavo kubva kuruboshwe kana kurudyi kwechigunwe senzira yekuratidza kufambira mberi, isu hatizvitsigire parizvino.

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

Rudzi rwekupinza rune hunhu hwe minuye max- 0uye 100, zvichiteerana. Unogona kutsanangura hutsva hutsva kune avo vanoshandisa minuye maxhunhu.

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

Nekumisikidza, renji inoiswa "snap" kune yakazara kukosha. Kuti uchinje izvi, unogona kutsanangura stepkukosha. Mumuenzaniso uri pasi apa, tinopeta nhamba yematanho nekushandisa step="0.5".

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

Faira browser

Iyo faira yekuisa ndiyo yakanyanya gnarly yeboka uye inoda yekuwedzera JavaScript kana iwe uchida kuibatanidza ne inoshanda Sarudza faira… uye yakasarudzwa zita refaira mavara.

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

Isu tinovanza iyo yakasarudzika faira <input>kuburikidza opacityuye panzvimbo payo maitiro iyo <label>. Bhatani rinogadzirwa uye rakamisikidzwa ne ::after. Chekupedzisira, tinozivisa a widthuye heightpane iyo <input>nzvimbo yakakodzera yezvinhu zvakatenderedza.

Kushandura kana kugadzirisa mitsara

Pseudo :lang()-class inoshandiswa kubvumira kushandurwa kwemavara ekuti "Bhurawuza" kune mimwe mitauro. Pindura kana wedzera zvinyorwa $custom-file-textkuSass musiyano netagi yemutauro wakakodzera uye tambo dzemuno. Tambo dzechiRungu dzinogona kugadzirwa nenzira imwechete. Semuyenzaniso, heino nzira iyo munhu angawedzera nayo shanduro yechiSpanish (kodhi yemutauro wechiSpanish ndeye es):

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

Hezvino lang(es)zviri kuitika pane zvakajairwa faira rekuisa pashanduro yechiSpanish:

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

Iwe unozofanirwa kuseta mutauro wegwaro rako (kana subtree yacho) nenzira kwayo kuitira kuti iwo mavara aratidze. Izvi zvinogona kuitwa uchishandisa hunhulang pane <html>chinhu kana Content-LanguageHTTP musoro , pakati pedzimwe nzira .