Source

Formalar

Forma gözegçilik stilleri, düzüliş opsiýalary we dürli görnüşleri döretmek üçin ýörite komponentler üçin mysallar we ulanyş görkezmeleri.

Gysgaça syn

“Bootstrap” -yň forma dolandyryşlary, “ Rebooted” görnüş stillerimizde giňelýär . Brauzerlerde we enjamlarda has yzygiderli görkezmek üçin özleşdirilen displeýleri saýlamak üçin bu synplary ulanyň.

E-poçta barlamak, san saýlamak we ş.m. ýaly täze giriş dolandyryşlaryndan peýdalanmak üçin typeähli girişlerde (meselem, emaile-poçta salgysy ýa-da san maglumatlary üçin) degişli atributdan peýdalanyň.number

“Bootstrap” -yň görnüşlerini görkezmek üçin çalt mysal. Gerekli sapaklar, forma düzülişi we ş.m. resminamalary okamak üçin dowam ediň.

E-poçtaňyzy hiç kim bilen paýlaşmarys. 
<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>

Forma dolandyryşlary

Tekst görnüşi dolandyryşlary , s <input>, <select>s we s ýaly synplar <textarea>bilen düzülendir . .form-controlUmumy görnüş, fokus ýagdaýy, ululygy we başgalar üçin stil bar.

Geljekki stilleri öwrenmek üçin adaty görnüşlerimizi<select> öwreniň.

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

Faýl girişleri .form-controlüçin çalyşyň .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>

Ölçeg

.form-control-lgWe ýaly sapaklary ulanyp belentlikleri düzüň .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Readonly

readonlyGiriş bahasynyň üýtgemeginiň öňüni almak üçin girişde boolean atributyny goşuň . Diňe okalýan girişler has ýeňil görünýär (edil ýapyk girişler ýaly), ýöne adaty kursory saklaň.

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

Diňe tekst

<input readonly>Formadaky elementleriň ýönekeý tekst görnüşinde bolmagyny isleýän bolsaňyz .form-control-plaintext, deslapky görnüş meýdanynyň stilini aýyrmak we dogry margin we padding saklamak üçin synpy ulanyň.

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

Aralyk girişler

Ulanyp, keseligine aýlanyp bolýan aralyk girişlerini düzüň .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>

Bellikler we radiolar

Bellenen bellikler we radiolar, HTML elementleriniň ýerleşişini we özüni alyp barşyny gowulandyrýan iki giriş görnüşi üçin bir synpyň.form-check kömegi bilen gowulaşýar . Bellikler gutular sanawdaky bir ýa-da birnäçe warianty saýlamak üçin, radiolar bolsa köplerden bir warianty saýlamak üçin.

Öçürilen gutular we radiolar goldanýar. Aýratynlyk disabled, girişiň ýagdaýyny görkezmek üçin has açyk reňk ulanar.

Bellikler we radio düwmeleri HTML esasly formany tassyklamagy goldaýar we gysga, elýeterli bellikleri üpjün edýär. Şeýle bolansoň, biziň <input>we s-ler, a - <label>dan tapawutlylykda dogan elementlerdir . Bu birneme has manyly , sebäbi we .<input><label>idfor<input><label>

Bellenen (gaplanan)

Düzgüne görä, ýakyn dogan bolan islendik bellik gutusy we radiolar dikligine ýerleşdiriler we degişli aralykda ýerleşdiriler .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

Topar bellikleri ýa-da şol bir gorizontal hatardaky radiolar, .form-check-inlinehaýsydyr birine goşup .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>

Etiketkasyz

Içinde bellik teksti bolmadyk .position-staticgirişlere goşuň . Kömekçi tehnologiýalar üçin (meselem, ulanmak ) .form-checkbellikleriň bir görnüşini bermegi ýatdan çykarmaň .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>

Salgy

“Bootstrap” ulanylýandygy display: blockwe width: 100%forma gözegçiliklerimiziň hemmesi diýen ýaly ulanylýandygy sebäpli, formalar deslapky görnüşde dik bolar. Bu düzülişi her forma görä üýtgetmek üçin goşmaça synplar ulanylyp bilner.

Toparlary emele getiriň

Synp .form-group, formalara käbir gurluşy goşmagyň iň aňsat usulydyr. Etiketkalary, dolandyryşlary, goşmaça kömek tekstini we tassyklama habarlaşmasyny düzmegi höweslendirýän çeýe synpy üpjün edýär. Düzgüne görä diňe ulanylýar margin-bottom, ýöne .form-inlinezerur bolanda goşmaça stilleri alýar. <fieldset>S, <div>s ýa-da başga elementler bilen ulanyň .

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

Tor paneli

Tor synplarymyzy ulanyp has çylşyrymly görnüşler gurlup bilner. Birnäçe sütün, dürli giňlik we goşmaça deňleşdiriş opsiýalaryny talap edýän forma düzülişleri üçin ulanyň.

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

Forma hatary

Şeýle hem has berk we has ykjam ýerleşişler üçin deslapky sütün çukurlaryny ýoklaýan adaty gözenek hatarymyzyň üýtgemegi .rowüçin çalşyp bilersiňiz ..form-row

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

Tor ulgamy bilen has çylşyrymly düzülişler hem döredilip bilner.

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

Gorizontal görnüş

.rowTopar döretmek üçin synp goşmak we .col-*-*bellikleriňiziň we dolandyryşlaryňyzyň giňligini kesgitlemek üçin synplary ulanyp , gözenek bilen gorizontal görnüşleri dörediň . S-leriňize hem goşuň .col-form-label, <label>şonuň bilen baglanyşykly forma dolandyryşlary bilen dikligine jemlener.

Käwagt, size gerek bolan şol ajaýyp deňleşigi döretmek üçin margin ýa-da padding enjamlaryny ulanmagyňyz gerek. Mysal üçin, padding-toptekst binýadyny has gowy sazlamak üçin, ýerleşdirilen radio giriş belligimizdäki aýyrdyk.

Radio
Bellik gutusy 
<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>
Gorizontal görnüş belliginiň ululygy

Ululygyny dogry yzarlamak üçin ýa .col-form-label-sm- da s- .col-form-label-lgleriňize we .<label><legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Sütüniň ululygy

Öňki mysallarda görkezilişi ýaly, gözenek ulgamymyz islendik sanlary bir ýa-da .coliçinde ýerleşdirmäge mümkinçilik berýär . Bar bolan giňligi olaryň arasynda deň paýlarlar. Şeýle hem has köp ýa-da az ýer tutmak üçin sütünleriňiziň bir bölegini saýlap bilersiňiz, galanlary bolsa deň sütün synplary bilen galanlaryny deň paýlaýar ..row.form-row.col.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>

Awto-ululyk

Aşakdaky mysal , sütünleriňiziň diňe zerur ýer tutmagy üçin .colmazmuny we üýtgeşmeleri dikligine merkezleşdirmek üçin flexbox kömekçi programmasyny ulanýar. .col-autoBaşgaça aýdanyňda, sütüniň mazmuny boýunça ululygy uludyr.

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

Soňra ululykdaky sütün synplary bilen ýene bir gezek remiks edip bilersiňiz.

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

Elbetde, ýörite forma dolandyryşlary goldanýar.

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

Çyzgy görnüşleri

.form-inlineBir gorizontal hatarda bellikleriň, forma dolandyryşlarynyň we düwmeleriniň toplumyny görkezmek üçin synpy ulanyň . Içerki görnüşlerdäki forma gözegçilikleri, adaty ýagdaýlaryndan azajyk üýtgeýär.

  • Dolandyryşlar display: flex, islendik HTML ak giňişligi ýykyp, aralyk we flexbox enjamlary bilen deňleşdiriş gözegçiligini üpjün etmäge mümkinçilik berýär.
  • Dolandyryşlar we giriş toparlary width: autoBootstrap deslapky görnüşini ýok etmek üçin alýarlar width: 100%.
  • Dolandyryşlar diňe ykjam enjamlardaky dar görnüşleri hasaba almak üçin iň azyndan 576px giňlikdäki görnüşlerde görünýär .

Aýry-aýry görnüş dolandyryşlarynyň giňligini we aralyk enjamlary bilen deňleşdirilmegini el bilen çözmeli bolmagyňyz mümkin (aşakda görkezilişi ýaly). Iň soňunda bolsa, <label>ekrany okamaýanlardan gizlemeli bolsaňyzam, her formany dolandyrmak bilen elmydama goşuň .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>

Formörite forma dolandyryşlary we saýlamalary hem goldanýar.

<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>
Gizlin belliklere alternatiwalar

Ekran okyjylary ýaly kömekçi tehnologiýalar, her giriş üçin bellik goşmasaňyz, formalaryňyzda kynçylyk çeker. .sr-onlyBu içerki görnüşler üçin ýazgylary synpy ulanyp gizläp bilersiňiz . aria-labelKömekçi tehnologiýalar üçin bellik bermek ýa - aria-labelledbyda titleatribut ýaly başga alternatiw usullar bar . Bularyň hiç biri ýok bolsa, kömekçi tehnologiýalar bar placeholderbolsa, atributdan peýdalanyp bilerler, ýöne bellik placeholderetmegiň beýleki usullaryny çalyşmak hökmünde ulanmak maslahat berilmeýändigini ýadyňyzdan çykarmaň.

Kömek teksti

Blok derejesindäki kömek teksti (öň v3- .form-textde bolşy ýaly ) ulanylyp döredilip bilner. .help-blockIçerki kömek teksti, islendik HTML elementini we şuňa meňzeş peýdaly sapaklary ulanyp çeýe durmuşa geçirilip bilner .text-muted.

Kömek tekstini forma dolandyryşlary bilen baglanyşdyrmak

Kömek teksti, atributy ulanmak bilen baglanyşykly forma gözegçilik bilen aç-açan baglanyşykly bolmaly aria-describedby. Bu, ekran okyjylary ýaly kömekçi tehnologiýalaryň, ulanyjy ünsi dolanda ýa-da dolandyryşa gireninde bu kömek tekstini yglan etmegini üpjün eder.

Girişleriň aşagyndaky kömek teksti bilen düzülip bilner .form-text. Bu synp display: blockýokardaky girişlerden aňsat aralyk üçin iň ýokary margin goşýar we goşýar.

Parolyňyzyň uzynlygy 8-20 simwoldan ybarat bolmaly, harplar we sanlar bolmaly, boşluklar, ýörite nyşanlar ýa-da emoji bolmaly däldir. 
<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>

Içerki tekst, peýdaly synpdan başga hiç zat bolmadyk adaty HTML elementini (a <small>, <span>ýa-da başga bir zat) ulanyp biler.

Uzynlygy 8-20 simwol bolmaly. 
<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>

Maýyp görnüşler

disabledUlanyjynyň özara täsiriniň öňüni almak we has ýeňil görünmek üçin girişde boolean atributyny goşuň .

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

Içindäki ähli dolandyryşlary öçürmek üçin disabledatribut goşuň .<fieldset>

<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>
Gämi bilen gowak

Düzgüne görä, brauzerler içindäki ähli ýerli dolandyryş dolandyryşlaryny (we elementlerini) <input>maýyp hasaplarlar <select>we klawiaturanyň hem-de syçanjygyň özara täsiriniň öňüni alarlar. Şeýle-de bolsa, görnüşiňizde elementler hem bar bolsa, bulara diňe bir stil berler . Düwmeler üçin ýapyk ýagdaý (we esasanam labyr elementleri üçin kiçi bölümde) bölüminde bellenip geçilişi ýaly , bu CSS häsiýeti entek standartlaşdyrylanok we Internet Explorer 10-da doly goldanylmaýar we klawiatura ulanyjylarynyň bolmagyna päsgel bermeýär bu baglanyşyklara ünsi jemlemegi ýa-da işjeňleşdirmegi başarýar. Howpsuz bolmak üçin şeýle baglanyşyklary öçürmek üçin ýörite JavaScript ulanyň.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Brauzeriň gabat gelmegi

disabled“Bootstrap” bu stilleri ähli brauzerlerde ulanjak bolsa, Internet Explorer 11 we aşakdakylar a -daky aýratynlygy doly goldamaýar <fieldset>. Bu brauzerlerdäki meýdançany öçürmek üçin ýörite JavaScript ulanyň.

Barlamak

Supporthli goldaýan brauzerlerimizde bar bolan HTML5 formasyny tassyklamak bilen ulanyjylaryňyza gymmatly, täsirli jogap beriň . Brauzeriň deslapky tassyklama seslenmesini saýlaň ýa-da içerki synplarymyz we başlangyç JavaScript bilen ýörite habarlary ýerine ýetiriň.

Häzirki wagtda ýerli brauzerde başlangyç tassyklama habarlary ähli brauzerlerde kömekçi tehnologiýalara yzygiderli täsir etmeýär (esasanam, iş stoly we ykjamda Chrome), adaty tassyklama stillerini ulanmagy maslahat berýäris.

Bu nähili işleýär

“Bootstrap” bilen forma tassyklamasynyň nähili işleýändigi:

  • HTML formasyny barlamak CSS-iň iki sany ýasama synpy arkaly ulanylýar :invalidwe :valid. Bu elementlere degişlidir <input>.<select><textarea>
  • “Bootstrap” , adatça ulanylýan ene-atalar synpyna :invalidwe :validstiline degişlidir . Otherwiseogsam, gymmaty bolmadyk islendik meýdan sahypa ýükünde nädogry görkezilýär. Şeýlelik bilen, haçan işjeňleşdirmelidigini saýlap bilersiňiz (adatça forma tabşyrylansoň)..was-validated<form>
  • Formanyň daşky görnüşini täzeden düzmek üçin (mysal üçin, AJAX ulanyp dinamiki forma iberen ýagdaýynda), tabşyranyňyzdan soň .was-validatedsynpy <form>täzeden aýyryň.
  • Yza gaýdyp gelmek .is-invalidwe serwer tarapyny barlamak.is-valid üçin pseudo-synplaryň ýerine sapaklar ulanylyp bilner . Ene-atalar synpyny talap etmeýärler ..was-validated
  • CSS-iň işleýşindäki çäklendirmeler sebäpli, häzirki <label>JavaScript-iň kömegi bolmazdan, DOM-da forma gözegçilikden öň gelýän stilleri ulanyp bilmeris.
  • Modernhli döwrebap brauzerler , forma dolandyryşlaryny barlamak üçin JavaScript usullarynyň bir topary bolan çäklendirme tassyklama API -ni goldaýarlar.
  • Seslenme habarlary brauzeriň defoltlaryny (her brauzer üçin tapawutly we CSS arkaly üýtgedip bolmaýar) ýa-da goşmaça HTML we CSS bilen adaty sesleniş usullarymyzy ulanyp biler.
  • setCustomValidityJavaScript-de ýörite ygtybarlylyk habarlaryny berip bilersiňiz.

Şuny göz öňünde tutup, adaty forma tassyklama stillerimiz, islege bagly serwer gapdal synplary we brauzer defoltlary üçin aşakdaky demleri göz öňünde tutuň.

Omörite stiller

novalidateBoörite “Bootstrap” formasyny tassyklamak habarlary üçin size “ boolean” atributyny goşmaly bolarsyňyz <form>. Bu, brauzeriň deslapky seslenme gurallaryny öçürýär, ýöne şonda-da JavaScript-de forma tassyklama API-lerine girişi üpjün edýär. Aşakdaky formany ibermäge synanyşyň; JavaScriptimiz tabşyrmak düwmesini saklar we size jogap berer. Ibermäge synanyşanyňyzda , forma dolandyryşlaryňyza ulanylýan stilleri :invalidwe stilleri görersiňiz .:valid

Feedbackörite seslenme stilleri has gowy habarlaşmak üçin ýörite reňkleri, serhetleri, fokus stillerini we fon nyşanlaryny ulanýar. S üçin fon nyşanlary <select>diňe elýeterli .custom-select, ýok .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>

Brauzer deslapky

Customörite tassyklama jogap habarlary ýa-da forma häsiýetini üýtgetmek üçin JavaScript ýazmak bilen gyzyklanmaýarsyňyzmy? Gowy, brauzeriň başlangyçlaryny ulanyp bilersiňiz. Aşakdaky formany iberip görüň. Brauzeriňize we OS-a baglylykda birneme üýtgeşik sesleniş stilini görersiňiz.

Bu seslenme stillerini CSS bilen düzüp bolmaýandygyna garamazdan, seslenme tekstini JavaScript arkaly düzüp bilersiňiz.

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

Serwer tarapy

Müşderi tarapyndan tassyklamany ulanmagy maslahat berýäris, ýöne serwer tarapyndan tassyklanylmagyny talap edýän bolsaňyz, nädogry we dogry forma meýdanlaryny görkezip .is-invalidbilersiňiz .is-valid. Bu synplar .invalid-feedbackbilen hem goldanýandygyny belläň.

Gowy görünýär!
Gowy görünýär!
@
Ulanyjy adyny saýlaň.
Dogry şäher bilen üpjün etmegiňizi haýyş edýäris.
Dogry ýagdaýy saýlaň.
Dogry poçta bilen üpjün etmegiňizi haýyş edýäris.
Ibermezden ozal razy bolmaly. 
<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>

Goldaw elementleri

Barlamak stilleri aşakdaky forma gözegçilikleri we komponentleri üçin elýeterlidir:

  • <input>s we <textarea>s bilen .form-control( .form-controlgiriş toparlarynda birine çenli)
  • <select>bilen .form-controlýa-da.custom-select
  • .form-checks
  • .custom-checkboxs we .custom-radios
  • .custom-file
Tekstere habar ýazmagyňyzy haýyş edýäris.
Nädogry seslenme tekstine mysal
Nädogry seslenme teksti
Nädogry adaty saýlama seslenme
Nädogry faýl seslenmesine mysal 
<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>

Gurallar

Forma düzülişiňiz muňa mümkinçilik berýän bolsa, stilleşdirilen gurallar maslahatynda tassyklama seslenmesini görkezmek .{valid|invalid}-feedbacküçin sapaklary çalşyp bilersiňiz. Gurallaryň ýerleşdirilmegi üçin .{valid|invalid}-tooltipene-atanyň bolmalydygyna göz ýetiriň . position: relativeAşakdaky mysalda, sütün synplarymyzda eýýäm bar, ýöne taslamaňyz alternatiw gurnama talap edip biler.

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>

Düzeltmek

$form-validation-statesBarlag ýagdaýlary karta bilen Sass arkaly düzülip bilner . Faýlymyzda ýerleşýän _variables.scssbu Sass kartasy, başlangyç valid/ invalidtassyklama ýagdaýlaryny döretmek üçin aýlanýar. Her ştatyň reňkini we nyşanyny sazlamak üçin ýerleşdirilen karta bar. Beýleki ştatlar brauzerler tarapyndan goldanylmasa-da, adaty stilleri ulanýanlar has çylşyrymly forma seslenmelerini aňsatlyk bilen goşup bilerler.

Garyndyny üýtgetmän, bu bahalary özleşdirmegi maslahat bermeýäris form-validation-state.

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

Omörite görnüşler

Hasam özleşdirmek we brauzeriň yzygiderliligi üçin, brauzeriň defoltlaryny çalyşmak üçin doly özboluşly forma elementlerimizi ulanyň. Olar semantik we elýeterli belligiň üstünde gurlupdyr, şonuň üçin olar islendik deslapky forma gözegçilik üçin berk çalyşmalardyr.

Bellikler we radiolar

Her bir bellik gutusy, radio <input>we jübütlemek , adaty gözegçiligimizi döretmek üçin <label>örtülendir . <div>Gurluş taýdan, bu biziň adaty ýagdaýymyz bilen deňdir .form-check.

Customörite görnüş görkezijimizi dogry düzmek ~üçin ähli <input>ştatlarymyz üçin dogan saýlaýjyny () ulanýarys . :checkedSynp bilen birleşdirilende, .custom-control-labelher bir elementiň ýagdaýyna baglylykda teksti düzüp bileris <input>.

Dymmaklygy gizleýäris we <input>ýerine täze ýörite forma görkezijisini gurmak üçin opacityulanýarys . Gynansak-da , CSS-iň bu elementde işlemeýändigi sebäpli adaty birini gurup bilmeris ..custom-control-label::before::after<input>content

Barlanan ýagdaýlarda , açyk ikonikden baz64 oturdylan SVG nyşanlaryny ulanýarys . Bu, brauzerlerde we enjamlarda stil düzmek we ýerleşdirmek üçin iň gowy gözegçiligi üpjün edýär.

Bellikler

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

Custörite bellik gutulary JavaScript arkaly el bilen gurlanda pseudo synpyny hem ulanyp biler :indeterminate(ony kesgitlemek üçin HTML atributy ýok).

JQuery ulanýan bolsaňyz, şuňa meňzeş bir zat ýeterlikdir:

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

Radio

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

Maýyp

Custörite bellikler we radiolar hem ýapylyp bilner. disabled“ Boolean” atributyny goşuň <input>we ýörite görkeziji we bellik beýany awtomatiki usulda düzüler.

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

Wyklýuçateller

Wyklýuçateliň ýörite bellik gutusy belligi bar, ýöne .custom-switchaçary üýtgetmek üçin synpy ulanýar. Wyklýuçateller hem disabledatributy goldaýar.

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

Menýu saýlaň

Customörite menýulary, adaty stilleri işletmek üçin <select>diňe ýörite synp gerek . .custom-selectOmörite stiller başlangyç görnüşi bilen çäklenýär we brauzer çäklendirmeleri sebäpli s <select>-lerini üýtgedip bilmeýär .<option>

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

Şeýle hem, meňzeş ölçegdäki tekst girişlerimize gabat gelmek üçin kiçi we uly adaty saýlamalary saýlap bilersiňiz.

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

Sypat multiplehem goldanýar:

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

Sypat bolşy ýaly size:

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

Aralyk

Bilen ýörite <input type="range">dolandyryş dolandyryşlaryny dörediň .custom-range. Trackol (fon) we barmak (baha) ikisi hem brauzerlerde birmeňzeş görünmek üçin düzülendir. Diňe IE we Firefox, ösüşi wizual görkezmek üçin serişde hökmünde çep ýa-da sagdan yzlaryny “doldurmagy” goldaýanlygy sebäpli, häzirki wagtda ony goldamaýarys.

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

Aralyk girişler degişlilikde minwe max- 0we aç-açan bahalara eýe . We atributlary 100ulanýanlar üçin täze bahalary kesgitläp bilersiňiz .minmax

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

Düzgüne görä, aralyk bahalary bitewi bahalara “gysga” girizýär. Muny üýtgetmek üçin stepbahany kesgitläp bilersiňiz. Aşakdaky mysalda, ulanyp, ädimleriň sanyny iki esse köpeldýäris step="0.5".

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

Faýl brauzeri

Customörite faýl girişini janlandyrmak üçin maslahat berilýän plugin: bs-custom-file-input , şu wagt şu ýerde resminamalarymyzda ulanýarys.

Faýl girişi, toparyň iň ýiti görnüşi we funksional “Select Select file” we faýl adynyň tekstini saýlamak isleseňiz, goşmaça JavaScript talap edýär .

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

Adaty faýly gizleýäris we ýerine stil <input>düzýäris . Düwme döredilýär we ýerleşdirilýär . Ahyrynda, töwerekdäki mazmun üçin dogry aralyk üçin a we yglan edýäris.opacity<label>::afterwidthheight<input>

Setirleri SCSS bilen terjime etmek ýa-da düzmek

:lang()Pseudo-synp “ Göz aýlamak” tekstini başga dillere terjime etmek üçin ulanylýar. $custom-file-textSass üýtgeýjisine degişli dil belligi we lokallaşdyrylan setirler bilen ýazgylary goşuň ýa-da goşuň . Iňlis setirleri hem edil şonuň ýaly düzülip bilner. Mysal üçin, ispan terjimesini nädip goşup boljakdygyny (Ispan diliniň kody es):

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

lang(es)Ispan terjimesi üçin ýörite faýl girişinde hereket :

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

Dogry tekstiň görkezilmegi üçin resminamanyňyzyň dilini (ýa-da onuň aşaky görnüşini) dogry bellemeli bolarsyňyz. Bu , beýleki usullaryň arasynda elementdäki ýa-da HTTP sözbaşysynyň atributyny ulanyp amalalang aşyrylyp bilner .<html>Content-Language

Setirleri HTML bilen terjime etmek ýa-da düzmek

“Bootstrap”, şeýle hem, “Göz aýlamak” tekstini HTML data-browse-de adaty giriş belligine goşup boljak atribut bilen terjime etmegiň usulyny hödürleýär (mysal üçin Gollandiýada):

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