Vorms
Voorbeelde en gebruiksriglyne vir vormbeheerstyle, uitlegopsies en pasgemaakte komponente vir die skep van 'n wye verskeidenheid vorms.
Oorsig
Bootstrap se vormkontroles brei uit op ons Herlaaide vormstyle met klasse. Gebruik hierdie klasse om in te teken op hul pasgemaakte skerms vir 'n meer konsekwente weergawe oor blaaiers en toestelle.
Maak seker dat jy 'n toepaslike type
kenmerk op alle invoere gebruik (bv. email
vir e-posadres of number
vir numeriese inligting) om voordeel te trek uit nuwer invoerkontroles soos e-posverifikasie, nommerkeuse en meer.
Hier is 'n vinnige voorbeeld om Bootstrap se vormstyle te demonstreer. Hou aan om te lees vir dokumentasie oor vereiste klasse, vormuitleg en meer.
<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>
Vormkontroles
Tekstuele vormkontroles—soos <input>
s, <select>
s en s—word saam met die klas <textarea>
gestileer . .form-control
Ingesluit is style vir algemene voorkoms, fokustoestand, grootte, en meer.
Maak seker dat u ons pasgemaakte vorms verken om styl <select>
s verder te bevorder.
<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>
Vir lêerinvoer, ruil die .form-control
vir .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>
Grootte
Stel hoogtes deur klasse soos .form-control-lg
en .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>
Leesalleen
Voeg die readonly
Boole-kenmerk by 'n invoer om verandering van die invoer se waarde te voorkom. Leesalleen-insette lyk ligter (net soos gedeaktiveerde insette), maar behou die standaardwyser.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Leesalleen gewone teks
As jy <input readonly>
elemente in jou vorm as gewone teks wil hê, gebruik die .form-control-plaintext
klas om die verstek vormveldstilering te verwyder en die korrekte kantlyn en opvulling te behou.
<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>
Reeks insette
Stel horisontaal skuifbare reeksinsette met behulp van .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>
Merkblokkies en radio's
Verstekmerkblokkies en radio's word verbeter met behulp van .form-check
' n enkele klas vir beide invoertipes wat die uitleg en gedrag van hul HTML-elemente verbeter . Merkblokkies is om een of meer opsies in 'n lys te kies, terwyl radio's is om een opsie uit baie te kies.
Gedeaktiveerde merkblokkies en radio's word ondersteun. Die disabled
kenmerk sal 'n ligter kleur toepas om die toevoer se toestand aan te dui.
Merkblokkies en radioknoppies ondersteun HTML-gebaseerde vormvalidering en verskaf bondige, toeganklike etikette. As sodanig is ons <input>
s en <label>
s broers en susters elemente in teenstelling met 'n <input>
binne 'n <label>
. Dit is effens meer breedvoerig aangesien jy moet spesifiseer id
en for
kenmerke om die <input>
en in verband te bring <label>
.
Verstek (gestapel)
By verstek sal enige aantal merkblokkies en radio's wat onmiddellike broers en susters is, vertikaal gestapel word en toepaslik gespasieer word met .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>
In lyn
Groepeer merkblokkies of radio's op dieselfde horisontale ry deur by .form-check-inline
enige .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>
Sonder etikette
Voeg .position-static
by invoere binne .form-check
wat geen etiketteks het nie. Onthou om steeds 'n vorm van toeganklike naam vir hulptegnologieë te verskaf (byvoorbeeld deur gebruik te maak van 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>
Uitleg
Aangesien Bootstrap van toepassing is display: block
en width: 100%
op byna al ons vormkontroles, sal vorms by verstek vertikaal gestapel word. Bykomende klasse kan gebruik word om hierdie uitleg op 'n per-vorm basis te verander.
Vorm groepe
Die .form-group
klas is die maklikste manier om struktuur by vorms te voeg. Dit bied 'n buigsame klas wat behoorlike groepering van etikette, kontroles, opsionele hulpteks en vormvalideringsboodskappe aanmoedig. By verstek is dit slegs van toepassing margin-bottom
, maar dit tel bykomende style in .form-inline
soos nodig. Gebruik dit met <fieldset>
s, <div>
s, of byna enige ander element.
<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>
Vorm rooster
Meer komplekse vorms kan gebou word deur ons roosterklasse te gebruik. Gebruik dit vir vormuitlegte wat veelvuldige kolomme, verskillende breedtes en bykomende belyningsopsies benodig.
<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>
Vorm ry
Jy kan ook ruil .row
vir .form-row
, 'n variasie van ons standaard-roosterry wat die verstekkolomgeute ignoreer vir strenger en meer kompakte uitlegte.
<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>
Meer komplekse uitlegte kan ook met die roosterstelsel geskep word.
<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>
Horisontale vorm
Skep horisontale vorms met die rooster deur die .row
klas by te voeg om groepe te vorm en die .col-*-*
klasse te gebruik om die breedte van jou etikette en kontroles te spesifiseer. Maak seker dat jy ook .col-form-label
by jou <label>
s voeg sodat hulle vertikaal gesentreer is met hul verwante vormkontroles.
Soms moet jy dalk marge- of opvullingshulpmiddels gebruik om die perfekte belyning te skep wat jy nodig het. Ons het byvoorbeeld die padding-top
etiket op ons gestapelde radio-insette verwyder om die teksbasislyn beter te belyn.
<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>
Horisontale vorm etiket grootte
Maak seker dat jy .col-form-label-sm
of .col-form-label-lg
na jou <label>
s of <legend>
s gebruik om die grootte van .form-control-lg
en korrek te volg .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>
Kolomgrootte
Soos in die vorige voorbeelde getoon, laat ons roosterstelsel jou toe om enige aantal .col
s binne 'n .row
of te plaas .form-row
. Hulle sal die beskikbare breedte eweredig tussen hulle verdeel. Jy kan ook 'n subset van jou kolomme kies om meer of minder spasie op te neem, terwyl die oorblywende .col
s die res eweredig verdeel, met spesifieke kolomklasse soos .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>
Outo-grootte
Die voorbeeld hieronder gebruik 'n flexbox-nutsding om die inhoud vertikaal te sentreer en verander .col
na .col-auto
sodat jou kolomme net soveel spasie opneem as wat nodig is. Anders gestel, die kolom groottes self gebaseer op die inhoud.
<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>
Jy kan dit dan weer meng met grootte-spesifieke kolomklasse.
<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>
En natuurlik word persoonlike vormkontroles ondersteun.
<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>
Inlyn vorms
Gebruik die .form-inline
klas om 'n reeks etikette, vormkontroles en knoppies op 'n enkele horisontale ry te vertoon. Vormkontroles binne inlynvorms verskil effens van hul verstektoestande.
- Kontroles is
display: flex
om enige HTML-wit spasie in te vou en jou in staat te stel om belyningsbeheer met spasiëring en flexbox- nutsmiddels te verskaf. - Kontroles en invoergroepe ontvang
width: auto
om die Bootstrap-standaard te ignoreerwidth: 100%
. - Kontroles verskyn net inlyn in kykpoorte wat ten minste 576px wyd is om vir noue uitsigpoorte op mobiele toestelle rekening te hou.
Jy sal dalk die breedte en belyning van individuele vormkontroles met die spasiëringhulpmiddels moet aanspreek (soos hieronder getoon). Laastens, maak seker dat jy altyd 'n <label>
by elke vormkontrole insluit, selfs al moet jy dit wegsteek vir nie-skermleserbesoekers met .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>
Pasgemaakte vormkontroles en keuses word ook ondersteun.
<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>
Alternatiewe vir versteekte etikette
Hulptegnologieë soos skermlesers sal probleme met jou vorms hê as jy nie 'n etiket vir elke invoer insluit nie. Vir hierdie inlynvorms kan jy die byskrifte versteek deur die .sr-only
klas te gebruik. Daar is verdere alternatiewe metodes om 'n etiket vir ondersteunende tegnologieë te verskaf, soos die aria-label
, aria-labelledby
of title
kenmerk. Indien nie een van hierdie teenwoordig is nie, kan ondersteunende tegnologie gebruik maak van die placeholder
kenmerk, indien teenwoordig, maar let daarop dat die gebruik daarvan placeholder
as 'n plaasvervanger vir ander etiketteringmetodes nie aangeraai word nie.
Hulp teks
Blokvlak-hulpteks in vorms kan geskep word deur .form-text
(voorheen bekend as .help-block
in v3). Inlyn-hulpteks kan buigsaam geïmplementeer word deur enige inlyn HTML-element en nutsklasse soos .text-muted
.
Assosieer hulpteks met vormkontroles
Hulpteks moet uitdruklik geassosieer word met die vormkontrole waarmee dit verband hou met die gebruik van die aria-describedby
kenmerk. Dit sal verseker dat ondersteunende tegnologieë – soos skermlesers – hierdie hulpteks sal aankondig wanneer die gebruiker fokus of die beheer betree.
Hulpteks onder insette kan met .form-text
. Hierdie klas sluit in display: block
en voeg 'n paar boonste marge by vir maklike spasiëring van die insette hierbo.
<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>
Inlyn teks kan enige tipiese inlyn HTML-element gebruik (of dit nou 'n <small>
, <span>
, of iets anders is) met niks meer as 'n nutsklas nie.
<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>
Gestremde vorms
Voeg die disabled
Boolese kenmerk by 'n invoer om gebruikersinteraksies te voorkom en dit ligter te laat lyk.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Voeg die disabled
kenmerk by a <fieldset>
om al die kontroles binne te deaktiveer.
<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>
Waarskuwing met ankers
Blaaiers hanteer alle inheemse vormkontroles ( <input>
, <select>
, en <button>
elemente) binne 'n <fieldset disabled>
as gedeaktiveer, wat beide sleutelbord- en muisinteraksies op hulle voorkom.
As jou vorm egter ook gepasmaakte knoppieagtige elemente soos , insluit <a ... class="btn btn-*">
, sal dit slegs 'n styl van kry pointer-events: none
. Soos opgemerk in die afdeling oor gedeaktiveerde toestand vir knoppies (en spesifiek in die onderafdeling vir ankerelemente), is hierdie CSS-eienskap nog nie gestandaardiseer nie en word dit nie ten volle in Internet Explorer 10 ondersteun nie. Die ankergebaseerde kontroles sal ook steeds wees fokusbaar en bedienbaar met die sleutelbord. Jy moet hierdie kontroles handmatig wysig deur by te voeg tabindex="-1"
om te verhoed dat hulle fokus ontvang en aria-disabled="disabled"
om hul toestand aan ondersteunende tegnologieë aan te dui.
Kruisblaaierversoenbaarheid
Terwyl Bootstrap hierdie style in alle blaaiers sal toepas, ondersteun Internet Explorer 11 en onder nie die disabled
kenmerk op 'n <fieldset>
. Gebruik pasgemaakte JavaScript om die veldstel in hierdie blaaiers te deaktiveer.
Bekragtiging
Verskaf waardevolle, uitvoerbare terugvoer aan jou gebruikers met HTML5-vormbekragtiging – beskikbaar in al ons ondersteunde blaaiers . Kies uit die blaaier verstek validering terugvoer, of implementeer pasgemaakte boodskappe met ons ingeboude klasse en begin JavaScript.
Hoe dit werk
Hier is hoe vormvalidering met Bootstrap werk:
- HTML-vorm validering word toegepas via CSS se twee pseudo-klasse,
:invalid
en:valid
. Dit is van toepassing op<input>
,<select>
, en<textarea>
elemente. - Bootstrap omvang die
:invalid
en:valid
style na ouerklas.was-validated
, gewoonlik toegepas op die<form>
. Andersins verskyn enige vereiste veld sonder 'n waarde as ongeldig tydens bladsylaai. Op hierdie manier kan jy kies wanneer om hulle te aktiveer (gewoonlik nadat die vorm ingedien is). - Om die voorkoms van die vorm terug te stel (byvoorbeeld in die geval van dinamiese vormvoorleggings wat AJAX gebruik), verwyder die
.was-validated
klas van die<form>
weer na indiening. - As 'n terugval,
.is-invalid
en.is-valid
klasse kan gebruik word in plaas van die pseudo-klasse vir bedienerkant-validering . Hulle benodig nie 'n.was-validated
ouerklas nie. - As gevolg van beperkings in hoe CSS werk, kan ons (tans) nie style toepas op 'n
<label>
wat voor 'n vormbeheer in die DOM kom sonder die hulp van pasgemaakte JavaScript nie. - Alle moderne blaaiers ondersteun die beperking validering API , 'n reeks JavaScript-metodes vir die validering van vormkontroles.
- Terugvoerboodskappe kan die blaaierverstekstellings gebruik ( verskillende vir elke blaaier, en onstyleerbaar via CSS) of ons pasgemaakte terugvoerstyle met bykomende HTML en CSS.
- Jy kan pasgemaakte geldigheidsboodskappe
setCustomValidity
in JavaScript verskaf.
Met dit in gedagte, oorweeg die volgende demo's vir ons pasgemaakte vormvalidasiestyle, opsionele bedienerkantklasse en blaaierverstekings.
Pasgemaakte style
Vir pasgemaakte Bootstrap-vorm-bekragtigingboodskappe, sal jy die novalidate
Booleaanse kenmerk by jou <form>
. Dit deaktiveer die blaaier se verstekterugvoernutswenke, maar bied steeds toegang tot die vormvaliderings-API's in JavaScript. Probeer om die vorm hieronder in te dien; ons JavaScript sal die indien-knoppie onderskep en terugvoer aan jou oordra. Wanneer jy probeer indien, sal jy die :invalid
en :valid
style sien wat op jou vormkontroles toegepas word.
Pasgemaakte terugvoerstyle pas pasgemaakte kleure, grense, fokusstyle en agtergrondikone toe om terugvoer beter te kommunikeer. Agtergrond ikone vir <select>
s is slegs beskikbaar met .custom-select
, en nie .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>
Blaaier verstek
Stel u nie belang in gepasmaakte validering-terugvoerboodskappe of die skryf van JavaScript om vormgedrag te verander nie? Alles goed, jy kan die blaaier verstekke gebruik. Probeer om die vorm hieronder in te dien. Afhangende van jou blaaier en bedryfstelsel, sal jy 'n effens ander styl van terugvoer sien.
Alhoewel hierdie terugvoerstyle nie met CSS gestileer kan word nie, kan jy steeds die terugvoerteks deur JavaScript pasmaak.
<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>
Bedienerkant
Ons beveel aan om kliënt-kant-validering te gebruik, maar as jy bedienerkant-validering benodig, kan jy ongeldige en geldige vormvelde met .is-invalid
en aandui .is-valid
. Let daarop dat .invalid-feedback
dit ook met hierdie klasse ondersteun word.
Vir ongeldige velde, maak seker dat die ongeldige terugvoer/foutboodskap geassosieer word met die relevante vormveld deur gebruik te maak van aria-describedby
. Hierdie eienskap laat toe om na meer as een id
te verwys, ingeval die veld reeds na addisionele vormteks wys.
<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>
Ondersteunde elemente
Bekragtigingstyle is beskikbaar vir die volgende vormkontroles en komponente:
<input>
s en<textarea>
s met.form-control
<select>
s met.form-control
of.custom-select
.form-check
s.custom-checkbox
s en.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>
Gereedskapwenke
As jou vormuitleg dit toelaat, kan jy die .{valid|invalid}-feedback
klasse vir .{valid|invalid}-tooltip
klasse omruil om valideringterugvoer in 'n gestileerde nutswenk te vertoon. Maak seker dat jy 'n ouer position: relative
daarop het vir nutspunt-posisionering. In die voorbeeld hieronder het ons kolomklasse dit reeds, maar jou projek mag dalk 'n alternatiewe opstelling vereis.
<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>
Pasmaak
Bekragtigingstate kan aangepas word via Sass met die $form-validation-states
kaart. Hierdie Sass-kaart, wat in ons _variables.scss
lêer geleë is, word omgelus om die verstek- valid
/ invalid
valideringstoestande te genereer. Ingesluit is 'n geneste kaart om elke staat se kleur en ikoon aan te pas. Alhoewel geen ander state deur blaaiers ondersteun word nie, kan diegene wat pasgemaakte style gebruik maklik meer komplekse vormterugvoer byvoeg.
Neem asseblief kennis dat ons nie aanbeveel om hierdie waardes aan te pas sonder om ook die form-validation-state
mixin te verander nie.
// 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));
}
Invoergroepvalidering
Om op te spoor watter elemente afgeronde hoeke binne 'n invoergroep met validering benodig, benodig 'n invoergroep 'n bykomende .has-validation
klas.
<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>
Pasgemaakte vorms
Vir nog meer aanpassing en kruisblaaier-konsekwentheid, gebruik ons heeltemal pasgemaakte vormelemente om die blaaier-standaarde te vervang. Hulle is bo-op semantiese en toeganklike opmaak gebou, so hulle is soliede plaasvervangers vir enige verstekvormbeheer.
Merkblokkies en radio's
Elke merkblokkie en radio <input>
en <label>
paring is toegedraai in 'n <div>
om ons persoonlike beheer te skep. Struktureel is dit dieselfde benadering as ons standaard .form-check
.
Ons gebruik die broer of suster ( ~
) vir al ons <input>
state—soos— :checked
om ons pasgemaakte vormaanwyser behoorlik te styl. Wanneer dit met die klas gekombineer .custom-control-label
word, kan ons ook die teks vir elke item styl op grond van die <input>
se toestand.
Ons verberg die verstek <input>
met opacity
en gebruik die .custom-control-label
om 'n nuwe pasgemaakte vormaanwyser in sy plek met ::before
en te bou ::after
. Ongelukkig kan ons nie 'n pasgemaakte een van net die bou nie, <input>
want CSS'e content
werk nie op daardie element nie.
In die gemerkte state gebruik ons base64 ingebedde SVG-ikone van Open Iconic . Dit bied ons die beste beheer vir stilering en posisionering oor blaaiers en toestelle.
Merkblokkies
<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>
Gepasmaakte merkblokkies kan ook die :indeterminate
pseudo-klas gebruik wanneer dit met die hand ingestel word via JavaScript (daar is geen beskikbare HTML-kenmerk om dit te spesifiseer nie).
As jy jQuery gebruik, behoort iets soos hierdie voldoende te wees:
$('.your-checkbox').prop('indeterminate', true)
Radio's
<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>
In lyn
<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>
Gestrem
Gepasmaakte merkblokkies en radio's kan ook gedeaktiveer word. Voeg die disabled
Boolese kenmerk by die <input>
en die pasgemaakte aanwyser en etiketbeskrywing sal outomaties gestileer word.
<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>
Skakelaars
'n Skakelaar het die opmaak van 'n pasgemaakte merkblokkie, maar gebruik die .custom-switch
klas om 'n wisselskakelaar te lewer. Skakelaars ondersteun ook die disabled
kenmerk.
<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>
Kies spyskaart
Pasgemaakte <select>
spyskaarte benodig slegs 'n pasgemaakte klas .custom-select
om die pasgemaakte style te aktiveer. Pasgemaakte style is beperk tot die <select>
aanvanklike voorkoms en kan nie die <option>
s verander nie weens blaaierbeperkings.
<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>
Jy kan ook kies uit klein en groot persoonlike keuses om by ons soortgelyke grootte teksinvoer te pas.
<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>
Die multiple
kenmerk word ook ondersteun:
<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>
Soos die size
kenmerk:
<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>
Reeks
Skep pasgemaakte <input type="range">
kontroles met .custom-range
. Die snit (die agtergrond) en duim (die waarde) is albei gestileer om dieselfde oor blaaiers te vertoon. Aangesien slegs IE en Firefox die "vul" van hul spoor van die linker- of regterkant van die duim ondersteun as 'n manier om visueel vordering aan te dui, ondersteun ons dit nie tans nie.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Reeksinsette het implisiete waardes vir min
en max
- 0
en 100
, onderskeidelik. Jy kan nuwe waardes spesifiseer vir diegene wat die min
en max
kenmerke gebruik.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
By verstek "snap" reeksinsette na heelgetalwaardes. Om dit te verander, kan jy 'n step
waarde spesifiseer. In die voorbeeld hieronder verdubbel ons die aantal stappe deur step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Lêerblaaier
Die lêerinvoer is die mees knoestige van die klomp en vereis bykomende JavaScript as jy hulle wil koppel met funksionele Kies lêer ... en geselekteerde lêernaamteks.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Ons versteek die versteklêer <input>
via opacity
en styleer eerder die <label>
. Die knoppie word gegenereer en geposisioneer met ::after
. Laastens verklaar ons 'n width
en height
op die <input>
vir behoorlike spasiëring vir omliggende inhoud.
Vertaal of pasmaak van die snare met SCSS
Die :lang()
pseudo-klas word gebruik om die vertaling van die "Blaai"-teks in ander tale moontlik te maak. Ignoreer of voeg inskrywings by die $custom-file-text
Sass-veranderlike met die relevante taalmerker en gelokaliseerde stringe. Die Engelse snare kan op dieselfde manier aangepas word. Byvoorbeeld, hier is hoe 'n mens 'n Spaanse vertaling kan byvoeg (Spaans se taalkode is es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Hier is lang(es)
in aksie oor die pasgemaakte lêerinvoer vir 'n Spaanse vertaling:
<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>
Jy sal die taal van jou dokument (of subboom daarvan) korrek moet stel sodat die korrekte teks gewys kan word. Dit kan gedoen word deur onder andere die lang
kenmerk op die <html>
element of die Content-Language
HTTP-kopskrif te gebruik.
Vertaal of pasmaak van die snare met HTML
Bootstrap bied ook 'n manier om die "Blaai"-teks in HTML te vertaal met die data-browse
kenmerk wat by die pasgemaakte invoeretiket gevoeg kan word (voorbeeld in Nederlands):
<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>