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 synplar bilen “ Rebooted” görnüş stilimizde giňelýär. Brauzerlerde we enjamlarda has yzygiderli görkezmek üçin özleşdirilen displeýlerini saýlamak üçin bu synplary ulanyň.
E-poçta barlamak, san saýlamak we başgalar ýaly täze giriş dolandyryşlaryndan peýdalanmak üçin type
ähli girişlerde (meselem, email
e-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ň.
<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-control
Umumy 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
Classesaly sapaklary ulanyp belentlikleri .form-control-lg
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
readonly
Giriş 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 ýazgylary ü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>
id
for
<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 radiolary, .form-check-inline
islendik 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-static
girişlere goşuň . Kömekçi tehnologiýalar üçin (meselem, ulanmak ) .form-check
elýeterli at 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: block
we 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-inline
zerur 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üş
.row
Topar 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 gerekli ajaýyp deňleşmegi döretmek üçin margin ýa-da padding enjamlaryny ulanmagyňyz gerek. Mysal üçin, padding-top
tekst binýadyny has gowy sazlamak üçin, ýerleşdirilen radio giriş belligimizdäki aýyrdyk.
<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 row">
<legend class="col-form-label col-sm-2 float-sm-left 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>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<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-lg
leriň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 .col
iç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 .col
mazmuny we üýtgeşmeleri dikligine merkezleşdirmek üçin flexbox kömekçi programmasyny ulanýar. .col-auto
Baş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-inline
Bir 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: auto
Bootstrap deslapky görnüşini ýok etmek üçin alýarlarwidth: 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ş elementleriniň aralyk enjamlary bilen (aşakda görkezilişi ýaly) giňligini we deňleşdirilmegini el bilen çözmeli bolmagyňyz mümkin . 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-only
Bu içerki görnüşler üçin ýazgylary synpy ulanyp gizläp bilersiňiz . aria-label
Kömekçi tehnologiýalar üçin bellik bermek ýa - aria-labelledby
da title
atribut ýaly başga alternatiw usullar bar . Bularyň hiç biri ýok bolsa, kömekçi tehnologiýalar bar placeholder
bolsa, atributdan peýdalanyp bilerler, ýöne bellik placeholder
etmegiň 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-text
de bolşy ýaly ) ulanylyp döredilip bilner. .help-block
Iç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.
<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.
<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
disabled
Ulanyjynyň ö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 disabled
atribut goşuň .<fieldset>
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<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
Brauzerler içindäki ähli ýerli dolandyryş dolandyryşlaryny ( <input>
, <select>
we elementleri) maýyp hasaplaýarlar, klawiaturanyň we syçanjygyň özara täsiriniň öňüni alýarlar.<button>
<fieldset disabled>
Şeýle-de bolsa, formaňyz ýaly düwmä meňzeş elementleri öz içine alýan bolsa <a ... class="btn btn-*">
, bulara diňe bir stil berler pointer-events: none
. Düwmeler üçin maýyp ýagdaý (we esasanam labyr elementleri üçin kiçi bölümde) bölüminde bellenip geçilişi ýaly , bu CSS emlägi entek standartlaşdyrylanok we Internet Explorer 10-da doly goldanylmaýar. Gämi esasly dolandyryşlar hem dowam eder klawiaturany ulanyp, ünsi jemläp bolýar. Bu gözegçilikleri tabindex="-1"
ünsi almazlyk we aria-disabled="disabled"
kömekçi tehnologiýalara ýagdaýyna signal bermek üçin goşmak bilen el bilen üýtgetmeli.
Brauzeriň gabat gelmegi
disabled
“Bootstrap” bu stilleri ähli brauzerlerde ulanjak bolsa-da, 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
Goldanýan brauzerlerimizde elýeterli HTML5 formasyny tassyklamak bilen ulanyjylaryňyza gymmatly, täsirli jogap beriň . Brauzeriň deslapky tassyklama seslenmesini saýlaň ýa-da gurlan synplarymyz we başlangyç JavaScript bilen ýörite habarlary ýerine ýetiriň.
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
:invalid
we:valid
. Bu elementlere degişlidir<input>
.<select>
<textarea>
- “Bootstrap” , adatça ulanylýan ene-atalar synpyna
:invalid
we:valid
stillerine 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-validated
synpy<form>
täzeden aýyryň. - Yza gaýdyp gelmek
.is-invalid
we 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.
setCustomValidity
JavaScript-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
novalidate
Boö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 :invalid
we 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
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</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-invalid
bilersiňiz .is-valid
. Bu synplar .invalid-feedback
bilen hem goldanýandygyny belläň.
Nädogry meýdanlar üçin nädogry seslenme / ýalňyş habaryň degişli forma meýdançasy bilen baglanyşyklydygyny anyklaň aria-describedby
. id
Bu atribut , eýýäm goşmaça forma tekstini görkezýän bolsa, birden köp salgylanmaga mümkinçilik berýär .
<form>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" 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
<select>
bilen.form-control
ýa-da.custom-select
.form-check
s.custom-checkbox
s we.custom-radio
s.custom-file
<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="mb-3">
<select class="custom-select" required>
<option value="">Choose...</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 mb-3">
<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>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</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}-tooltip
ene-atanyň bolmalydygyna göz ýetiriň . position: relative
Aşakdaky mysalda, sütün synplarymyzda eýýäm bar, ýöne taslamaňyz alternatiw gurnama talap edip biler.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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-states
Barlag ýagdaýlary karta bilen Sass arkaly düzülip bilner . Faýlymyzda ýerleşýän _variables.scss
bu Sass kartasy, başlangyç valid
/ invalid
tassyklama ý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));
}
Giriş toparyny barlamak
Barlag toparyndaky haýsy elementleriň tegelek burçlara mätäçdigini anyklamak üçin giriş topary goşmaça .has-validation
synp talap edýär.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
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 . :checked
Synp bilen birleşdirilende, .custom-control-label
her 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 opacity
ulanýarys . Gynansagam , CSS-iň bu elementde işlemeýändigi sebäpli adaty bir zat 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="customRadioInline" 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="customRadioInline" 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 adaty 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-switch
açary üýtgetmek üçin synpy ulanýar. Wyklýuçateller hem disabled
atributy 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ň
Hususy menýulara , adaty stilleri işletmek üçin <select>
diňe ýörite synp gerek . .custom-select
Omö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 multiple
hem 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, barmagy çep ýa-da sag tarapdan 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 min
we max
- 0
we aç-açan bahalara eýe . We atributlary 100
ulanýanlar üçin täze bahalary kesgitläp bilersiňiz .min
max
<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 step
bahany 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
Faýl girişi, toparyň iň ýiti görnüşi we funksiýaly “ Saýlamak faýly ” 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>
::after
width
height
<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-text
Sass üý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 (Gollandiýada mysal) goşup boljak atribut bilen terjime etmegiň usulyny hödürleýär:
<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>