Formoj
Ekzemploj kaj uzgvidlinioj por formo-kontrolstiloj, aranĝaj opcioj kaj kutimaj komponantoj por krei diversajn formojn.
Superrigardo
La formularaj kontroloj de Bootstrap plivastiĝas sur niaj Rebootitaj formularstiloj kun klasoj. Uzu ĉi tiujn klasojn por elekti siajn personecigitajn ekranojn por pli konsekvenca bildigo tra retumiloj kaj aparatoj.
Nepre uzu taŭgan type
atributon ĉe ĉiuj enigaĵoj (ekz. email
por retpoŝta adreso aŭ number
por nombraj informoj) por utiligi pli novajn enigajn kontrolojn kiel retpoŝtan konfirmon, nombro-elekton kaj pli.
Jen rapida ekzemplo por montri la formularajn stilojn de Bootstrap. Daŭre legu por dokumentado pri postulataj klasoj, formulararanĝo kaj pli.
<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>
Formkontroloj
Tekstaj formkontroloj—kiel <input>
s, <select>
s, kaj <textarea>
s—estas stilitaj kun la .form-control
klaso. Inkluditaj estas stiloj por ĝenerala aspekto, fokusa stato, grandeco kaj pli.
Nepre esploru niajn kutimajn formojn por plu stiligi <select>
s.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Por dosieraj enigaĵoj, interŝanĝu la .form-control
por .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>
Dimensio
Agordu altecojn uzante klasojn kiel .form-control-lg
kaj .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>
Nurlegebla
Aldonu la readonly
bulean atributon al enigo por malhelpi modifon de la valoro de la enigo. Nurlegeblaj enigaĵoj ŝajnas pli malpezaj (same kiel malebligitaj enigaĵoj), sed konservas la norman kursoron.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Nur legebla simpla teksto
Se vi volas havi <input readonly>
elementojn en via formularo stilitaj kiel simpla teksto, uzu la .form-control-plaintext
klason por forigi la defaŭltan formularan kampostiladon kaj konservi la ĝustajn marĝenojn kaj kompletigojn.
<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>
Gamaj Enigoj
Agordu horizontale ruleblajn intervalenigojn per .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>
Markobutonoj kaj radioj
Defaŭltaj markobutonoj kaj radioj estas plibonigitaj helpe de .form-check
, ununura klaso por ambaŭ enigtipoj, kiu plibonigas la aranĝon kaj konduton de iliaj HTML-elementoj . Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo, dum radioj estas por elekti unu opcion el multaj.
Malebligitaj markobutonoj kaj radioj estas subtenataj. La disabled
atributo aplikos pli malpezan koloron por helpi indiki la staton de la enigo.
Markobutonoj kaj radiobutonoj subtenas HTML-bazitan formularvalidigon kaj disponigas koncizajn, alireblajn etikedojn. Kiel tia, niaj <input>
s kaj <label>
s estas gefrataj elementoj kontraste al <input>
ene de <label>
. Ĉi tio estas iomete pli multvorta ĉar vi devas specifi id
kaj for
atributojn por rilatigi la <input>
kaj <label>
.
Defaŭlte (stakita)
Defaŭlte, ajna nombro da markobutonoj kaj radioj kiuj estas tujaj gefratoj estos vertikale stakigitaj kaj taŭge interspacigitaj per .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>
En linio
Grupigu markobutonojn aŭ radiojn sur la sama horizontala vico aldonante .form-check-inline
al iu ajn .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>
Sen etikedoj
Aldonu .position-static
al enigaĵoj ene de .form-check
kiuj ne havas ajnan etikedtekston. Memoru ankoraŭ provizi iun formon de alirebla nomo por helpaj teknologioj (ekzemple, uzante 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>
Aranĝo
Ĉar Bootstrap validas display: block
kaj width: 100%
al preskaŭ ĉiuj niaj formularaj kontroloj, formoj defaŭlte stablos vertikale. Pliaj klasoj povas esti uzataj por varii ĉi tiun aranĝon laŭ forma bazo.
Formu grupojn
La .form-group
klaso estas la plej facila maniero aldoni iom da strukturo al formoj. Ĝi disponigas flekseblan klason kiu instigas taŭgan grupigon de etikedoj, kontroloj, laŭvola helpteksto, kaj formularvalidigmesaĝado. Defaŭlte ĝi nur aplikas margin-bottom
, sed ĝi prenas pliajn stilojn .form-inline
laŭbezone. Uzu ĝin kun <fieldset>
s, <div>
s aŭ preskaŭ ajna alia elemento.
<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>
Formu kradon
Pli kompleksaj formoj povas esti konstruitaj uzante niajn kradklasojn. Uzu ĉi tiujn por formularaj aranĝoj, kiuj postulas multoblajn kolumnojn, diversajn larĝojn kaj pliajn alineajn opciojn.
<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>
Form vico
Vi ankaŭ povas interŝanĝi .row
por .form-row
, vario de nia norma kradvico, kiu anstataŭas la defaŭltajn kolonkanalojn por pli striktaj kaj pli kompaktaj aranĝoj.
<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>
Pli kompleksaj aranĝoj ankaŭ povas esti kreitaj per la kradsistemo.
<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>
Horizontala formo
Kreu horizontalajn formojn kun la krado aldonante la .row
klason por formi grupojn kaj uzante la .col-*-*
klasojn por specifi la larĝon de viaj etikedoj kaj kontroloj. Nepre aldonu .col-form-label
ankaŭ al viaj <label>
s, por ke ili estu vertikale centritaj kun siaj rilataj formularaj kontroloj.
Foje, vi eble bezonos uzi marĝenajn aŭ kompletigajn ilojn por krei tiun perfektan vicigon, kiun vi bezonas. Ekzemple, ni forigis la padding-top
etikedon de nia stakigita radio-enigo por pli bone vicigi la tekstan bazlinion.
<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>
Horizontala formo etikedo grandeco
Nepre uzu .col-form-label-sm
aŭ .col-form-label-lg
al viaj <label>
s aŭ <legend>
s por ĝuste sekvi la grandecon de .form-control-lg
kaj .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>
Kolumna grandeco
Kiel montrite en la antaŭaj ekzemploj, nia kradsistemo permesas vin meti ajnan nombron da .col
s ene de a .row
aŭ .form-row
. Ili dividos la disponeblan larĝon egale inter ili. Vi ankaŭ povas elekti subaron de viaj kolumnoj por okupi pli-malpli da spaco, dum la ceteraj .col
s egale disigas la ceterajn, kun specifaj kolumnaj klasoj kiel .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>
Aŭtomata grandeco
La ĉi-suba ekzemplo uzas flekskeston por vertikale centri la enhavon kaj ŝanĝi .col
al .col-auto
tiel ke viaj kolumnoj nur okupas tiom da spaco kiom necesas. Aliflanke, la kolumno grandigas sin surbaze de la enhavo.
<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>
Vi tiam povas remiksi tion denove kun grandeco-specifaj kolumnaj klasoj.
<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>
Kaj kompreneble kutimaj formularaj kontroloj estas subtenataj.
<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>
Enliniaj formoj
Uzu la .form-inline
klason por montri serion da etikedoj, formularaj kontroloj kaj butonoj sur unu horizontala vico. Formkontroloj ene de enliniaj formoj iomete varias de siaj defaŭltaj statoj.
- Kontroloj estas
display: flex
, kolapsante ajnan HTML-blankan spacon kaj ebligante al vi provizi vickontrolon kun interspacigaj kaj flekskesto iloj. - Kontroloj kaj eniggrupoj ricevas
width: auto
por anstataŭi la defaŭltan Bootstrapwidth: 100%
. - Kontroloj nur aperas enlinie en vidfenestroj kiuj estas almenaŭ 576px larĝaj por respondeci pri mallarĝaj vidfenestroj sur porteblaj aparatoj.
Vi eble bezonos mane trakti la larĝecon kaj vicigon de individuaj formularaj kontroloj kun interspacaj utilecoj (kiel montrite sube). Finfine, nepre ĉiam inkluzivi <label>
kun ĉiu formulara kontrolo, eĉ se vi bezonas kaŝi ĝin de ne-ekranlegantaj vizitantoj per .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>
Propraj formularaj kontroloj kaj elektoj ankaŭ estas subtenataj.
<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>
Alternativoj al kaŝitaj etikedoj
Helpaj teknologioj kiel ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj enliniaj formoj, vi povas kaŝi la etikedojn uzante la .sr-only
klason. Ekzistas pliaj alternativaj metodoj provizi etikedon por helpaj teknologioj, kiel ekzemple la aria-label
, aria-labelledby
aŭ title
atributo. Se neniu el ĉi tiuj ĉeestas, helpaj teknologioj povas uzi la placeholder
atributon, se ĉeestas, sed notu, ke uzo de placeholder
kiel anstataŭaĵo por aliaj etikedmetodoj ne estas konsilita.
Helpteksto
Bloknivela helpteksto en formoj povas esti kreita uzante .form-text
(antaŭe konata kiel .help-block
en v3). Enlinia helpteksto povas esti flekseble efektivigita uzante ajnan enlinian HTML-elementon kaj utilklasojn kiel .text-muted
.
Asocii helpan tekston kun formularaj kontroloj
Helpteksto devus esti eksplicite asociita kun la formo-kontrolo al kiu ĝi rilatas uzante la aria-describedby
atributon. Ĉi tio certigos, ke helpaj teknologioj—kiel ekranlegiloj—anoncos ĉi tiun helptekston kiam la uzanto fokusas aŭ eniras la kontrolon.
Helpteksto sub enigaĵoj povas esti stilitaj per .form-text
. Ĉi tiu klaso inkluzivas display: block
kaj aldonas iom da supra marĝeno por facila interspacigo de la enigoj supre.
<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>
Enlinia teksto povas uzi ajnan tipan enlinian HTML-elementon (ĉu ĝi <small>
, <span>
aŭ io alia) kun nenio pli ol utileca klaso.
<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>
Malebligitaj formoj
Aldonu la disabled
bulean atributon al enigo por malhelpi uzantinteragojn kaj fari ĝin aspekti pli malpeza.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Aldonu la disabled
atributon al a <fieldset>
por malŝalti ĉiujn kontrolojn ene.
<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>
Averto kun ankroj
Retumiloj traktas ĉiujn denaskajn formkontrolojn ( <input>
, <select>
, kaj <button>
elementoj) ene de <fieldset disabled>
kiel malfunkciigitaj, malhelpante ambaŭ klavarajn kaj musajn interagojn sur ili.
Tamen, se via formularo ankaŭ inkluzivas kutimajn butonsimilajn elementojn kiel ekzemple <a ... class="btn btn-*">
, ĉi tiuj nur ricevos stilon de pointer-events: none
. Kiel notite en la sekcio pri malfunkciigita stato por butonoj (kaj specife en la subsekcio por ankro-elementoj), ĉi tiu CSS-posedaĵo ankoraŭ ne estas normigita kaj ne estas plene subtenata en Internet Explorer 10. La ankro-bazitaj kontroloj ankaŭ ankoraŭ estos ankoraŭ. fokusebla kaj operaciebla uzante la klavaron. Vi devas mane modifi ĉi tiujn kontrolojn aldonante tabindex="-1"
por malhelpi ilin ricevi fokuson kaj aria-disabled="disabled"
signali ilian staton al helpaj teknologioj.
Inter-retumila kongruo
Dum Bootstrap aplikos ĉi tiujn stilojn en ĉiuj retumiloj, Internet Explorer 11 kaj sube ne plene subtenas la disabled
atributon sur <fieldset>
. Uzu kutiman JavaScript por malŝalti la kamparon en ĉi tiuj retumiloj.
Valido
Provizu valorajn, ageblajn komentojn al viaj uzantoj per HTML5-formula validigo - havebla en ĉiuj niaj subtenataj retumiloj . Elektu el la defaŭlta validumigo de la retumilo, aŭ efektivigu kutimajn mesaĝojn per niaj enkonstruitaj klasoj kaj komenca JavaScript.
Kiel ĝi funkcias
Jen kiel validado de formularoj funkcias kun Bootstrap:
- HTML-formvalidigo estas aplikata per la du pseŭdoklasoj de CSS,
:invalid
kaj:valid
. Ĝi validas por<input>
,<select>
, kaj<textarea>
elementoj. - Bootstrap ampleksas la
:invalid
kaj:valid
stilojn al gepatra.was-validated
klaso, kutime aplikita al la<form>
. Alie, ajna postulata kampo sen valoro aperas kiel nevalida ĉe paĝa ŝarĝo. Tiel, vi povas elekti kiam aktivigi ilin (tipe post kiam la formularo estas provita). - Por restarigi la aspekton de la formularo (ekzemple, en la kazo de dinamikaj formularaj sendadoj uzante AJAX), forigu la
.was-validated
klason de la<form>
denove post sendo. - Kiel rezerva,
.is-invalid
kaj.is-valid
klasoj povas esti uzataj anstataŭ la pseŭdo-klasoj por servilflanka validumado . Ili ne postulas.was-validated
gepatran klason. - Pro limoj en kiel CSS funkcias, ni ne povas (nuntempe) apliki stilojn al
<label>
kiu venas antaŭ formo-kontrolo en la DOM sen la helpo de kutima JavaScript. - Ĉiuj modernaj retumiloj subtenas la limigan validumadon API , serion de JavaScript-metodoj por validigi formularajn kontrolojn.
- Reagomesaĝoj povas utiligi la defaŭltajn retumilon (malsamajn por ĉiu retumilo, kaj malstileblajn per CSS) aŭ niajn kutimajn retrostilojn kun pliaj HTML kaj CSS.
- Vi povas provizi kutimajn validecajn mesaĝojn
setCustomValidity
en JavaScript.
Konsiderante tion, konsideru la sekvajn demonstraĵojn por niaj kutimaj formularaj validigaj stiloj, laŭvolaj servilaj flankaj klasoj kaj retumiloj defaŭltaj.
Propraj stiloj
Por kutimaj Bootstrap formularvalidigaj mesaĝoj, vi devos aldoni la novalidate
bulean atributon al via <form>
. Ĉi tio malŝaltas la defaŭltajn sugestajn konsiletojn de la retumilo, sed ankoraŭ disponigas aliron al la API-validigaj formularoj en JavaScript. Provu sendi la suban formularon; nia JavaScript kaptos la sendi butonon kaj sendos komentojn al vi. Kiam vi provas sendi, vi vidos la stilojn :invalid
kaj aplikatajn al viaj formularaj kontroloj.:valid
Propraj sugestiloj aplikas kutimajn kolorojn, randojn, fokusajn stilojn kaj fonajn ikonojn por pli bone komuniki komentojn. Fonaj piktogramoj por <select>
s disponeblas nur kun .custom-select
, kaj ne .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>
Retumilo defaŭlta
Ne interesiĝas pri kutimaj validigaj sugestaj mesaĝoj aŭ skribi JavaScript por ŝanĝi formajn kondutojn? Ĉio bone, vi povas uzi la defaŭltajn retumilon. Provu sendi la suban formularon. Depende de via retumilo kaj OS, vi vidos iomete malsaman stilon de retrosciigo.
Kvankam ĉi tiuj sugestiloj ne povas esti stilitaj per CSS, vi ankoraŭ povas personecigi la sugestajn tekstojn per JavaScript.
<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>
Servila flanko
Ni rekomendas uzi klientflankan validigon, sed se vi postulas servilflankan validigon, vi povas indiki nevalidajn kaj validajn formularajn kampojn per .is-invalid
kaj .is-valid
. Notu, ke .invalid-feedback
ankaŭ estas subtenata kun ĉi tiuj klasoj.
Por nevalidaj kampoj, certigu, ke la nevalida sugesto/erarmesaĝo estas asociita kun la koncerna formularkampo uzante aria-describedby
. Ĉi tiu atributo permesas id
referenci pli ol unu, se la kampo jam montras al plia formo-teksto.
<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>
Subtenataj elementoj
Validaj stiloj disponeblas por la sekvaj formularaj kontroloj kaj komponantoj:
<input>
s kaj<textarea>
s kun.form-control
<select>
s kun.form-control
aŭ.custom-select
.form-check
s.custom-checkbox
s kaj.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>
Konsiletoj
Se via formulararanĝo permesas ĝin, vi povas interŝanĝi la .{valid|invalid}-feedback
klasojn por .{valid|invalid}-tooltip
klasoj por montri validigajn sugestojn en stilita konsileto. Nepre havu gepatron kun position: relative
ĝi por poziciigado de konsileto. En la malsupra ekzemplo, niaj kolumnaj klasoj jam havas ĉi tion, sed via projekto eble postulas alternativan aranĝon.
<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>
Agordado
Validaj ŝtatoj povas esti personecigitaj per Sass kun la $form-validation-states
mapo. Lokita en nia _variables.scss
dosiero, ĉi tiu Sass-mapo estas cirkulita por generi la defaŭltajn valid
/ invalid
validigajn statojn. Inkludita estas nestita mapo por agordi la koloron kaj ikonon de ĉiu ŝtato. Dum neniuj aliaj ŝtatoj estas subtenataj de retumiloj, tiuj, kiuj uzas kutimajn stilojn, povas facile aldoni pli kompleksajn formularajn sugestojn.
Bonvolu noti, ke ni ne rekomendas personecigi ĉi tiujn valorojn sen ankaŭ modifi la form-validation-state
miksaĵon.
// 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));
}
Valumado de eniga grupo
Por detekti kiajn elementojn bezonas rondigitajn angulojn ene de eniga grupo kun validumado, eniga grupo postulas plian .has-validation
klason.
<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>
Propraj formoj
Por eĉ pli da personigo kaj trans-retumila konsekvenco, uzu niajn tute laŭmendajn formularelementojn por anstataŭigi la defaŭltajn retumilon. Ili estas konstruitaj sur semantika kaj alirebla markado, do ili estas solidaj anstataŭaĵoj por ajna defaŭlta formo-kontrolo.
Markobutonoj kaj radioj
Ĉiu markobutono kaj radio <input>
kaj <label>
parigo estas envolvitaj en <div>
por krei nian kutiman kontrolon. Strukture, ĉi tiu estas la sama aliro kiel nia defaŭlta .form-check
.
Ni uzas la gefratan elektilon ( ~
) por ĉiuj niaj <input>
ŝtatoj—kiel :checked
—por taŭge stiligi nian kutiman formularindikilon. Se kombinite kun la .custom-control-label
klaso, ni ankaŭ povas stiligi la tekston por ĉiu ero surbaze de la <input>
stato de la '.
Ni kaŝas la defaŭltan <input>
per opacity
kaj uzas la .custom-control-label
por konstrui novan propran formularan indikilon en ĝia loko kun ::before
kaj ::after
. Bedaŭrinde ni ne povas konstrui kutiman el nur la <input>
ĉar CSS-oj content
ne funkcias sur tiu elemento.
En la kontrolitaj ŝtatoj, ni uzas baz64-enkorpigitajn SVG-ikonojn de Open Iconic . Ĉi tio provizas al ni la plej bonan kontrolon por stilado kaj poziciigado tra retumiloj kaj aparatoj.
Markobutonoj
<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>
Propraj markobutonoj ankaŭ povas uzi la :indeterminate
pseŭdoklason kiam permane agordita per JavaScript (ne ekzistas disponebla HTML-atributo por specifi ĝin).
Se vi uzas jQuery, io tia devus sufiĉi:
$('.your-checkbox').prop('indeterminate', true)
Radioaparatoj
<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>
En linio
<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>
Malebligita
Propraj markobutonoj kaj radioj ankaŭ povas esti malŝaltitaj. Aldonu la disabled
bulean atributon al la <input>
kaj la kutima indikilo kaj etikedo priskribo estos aŭtomate stilitaj.
<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>
Ŝaltiloj
Ŝaltilo havas la markadon de kutima markobutono sed uzas la .custom-switch
klason por bildigi baskulon. Ŝaltiloj ankaŭ subtenas la disabled
atributon.
<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>
Elektu menuon
Propraj <select>
menuoj bezonas nur kutiman klason, .custom-select
por ekigi la kutimajn stilojn. Propraj stiloj estas limigitaj al la <select>
komenca aspekto de la s kaj ne povas modifi la <option>
s pro retumila limigo.
<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>
Vi ankaŭ povas elekti el malgrandaj kaj grandaj kutimaj elektoj por kongrui kun niaj samgrandaj tekstaj enigoj.
<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>
La multiple
atributo ankaŭ estas subtenata:
<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>
Kiel estas la size
atributo:
<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>
Gamo
Kreu kutimajn <input type="range">
kontrolojn per .custom-range
. La trako (la fono) kaj dikfingro (la valoro) estas ambaŭ stilitaj por aperi la sama tra retumiloj. Ĉar nur IE kaj Fajrovulpo subtenas "plenigi" ilian trakon de la maldekstra aŭ dekstre de la dikfingro kiel rimedo por vide indiki progreson, ni nuntempe ne subtenas ĝin.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Gamaj enigaĵoj havas implicajn valorojn por min
kaj max
— 0
kaj 100
, respektive. Vi povas specifi novajn valorojn por tiuj uzantaj la min
kaj max
atributojn.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Defaŭlte, intervalo enigas "krap" al entjervaloroj. Por ŝanĝi ĉi tion, vi povas specifi step
valoron. En la malsupra ekzemplo, ni duobligas la nombron da paŝoj uzante step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Dosiera retumilo
La dosiera enigo estas la plej malnobla el la aro kaj postulas plian JavaScript se vi ŝatus kunligi ilin per funkcia Elektu dosieron... kaj elektitan dosiernoman tekston.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Ni kaŝas la defaŭltan dosieron <input>
per opacity
kaj anstataŭe stiligas la <label>
. La butono estas generita kaj poziciigita per ::after
. Finfine, ni deklaras a width
kaj height
sur la <input>
por taŭga interspaco por ĉirkaŭa enhavo.
Tradukante aŭ personigante la ĉenojn per SCSS
La :lang()
pseŭdo-klaso estas uzata por permesi tradukadon de la teksto "Frumu" al aliaj lingvoj. Anstataŭigi aŭ aldonu enskribojn al la $custom-file-text
variablo Sass kun la koncerna lingvo-etikedo kaj lokalizitaj ĉenoj. La anglaj kordoj povas esti personecigitaj same. Ekzemple, jen kiel oni povus aldoni hispanan tradukon (la kodo de la hispana lingvo estas es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Jen lang(es)
en ago pri la kutima dosier-enigo por hispana traduko:
<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>
Vi devos ĝuste agordi la lingvon de via dokumento (aŭ subarbo) por ke la ĝusta teksto estu montrita. Ĉi tio povas esti farita uzante la lang
atributon sur la <html>
elemento aŭ la Content-Language
HTTP-kapo , inter aliaj metodoj.
Tradukante aŭ personigante la ĉenojn per HTML
Bootstrap ankaŭ disponigas manieron traduki la tekston "Frumu" en HTML kun la data-browse
atributo kiu povas esti aldonita al la kutima eniga etikedo (ekzemplo en la nederlanda):
<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>