Forms
Primjeri i smjernice za korištenje stilova kontrole obrazaca, opcija izgleda i prilagođenih komponenti za kreiranje širokog spektra obrazaca.
Pregled
Bootstrap-ove kontrole obrasca proširuju naše Rebooted stilove obrasca sa klasama. Koristite ove klase da biste se uključili u njihove prilagođene prikaze za konzistentnije prikazivanje na svim pretraživačima i uređajima.
Obavezno koristite odgovarajući type
atribut na svim ulazima (npr. email
za adresu e-pošte ili number
za numeričke informacije) da biste iskoristili prednosti novijih kontrola unosa kao što su verifikacija e-pošte, odabir broja i još mnogo toga.
Evo kratkog primjera za demonstriranje stilova obrasca Bootstrapa. Nastavite čitati za dokumentaciju o potrebnim klasama, izgledu obrasca i još mnogo toga.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Kontrole obrasca
Kontrole tekstualnog oblika – poput <input>
s, <select>
s i <textarea>
s – stilizirane su s.form-control
klasom. Uključeni su stilovi za opći izgled, stanje fokusa, veličine i još mnogo toga.
Obavezno istražite naše prilagođene forme kako biste dodatno stilizirali <select>
.
<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>
Za unose datoteka, zamijenite .form-control
za .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>
Određivanje veličine
Postavite visine koristeći klase kao što su .form-control-lg
i .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>
Samo za čitanje
Dodajte readonly
boolean atribut na ulaz da biste spriječili promjenu vrijednosti ulaza. Unosi samo za čitanje izgledaju lakši (baš kao i onemogućeni ulazi), ali zadržavaju standardni kursor.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Običan tekst samo za čitanje
Ako želite da <input readonly>
elementi u obrascu budu stilizovani kao običan tekst, koristite .form-control-plaintext
klasu da biste uklonili podrazumevani stil polja obrasca i sačuvali ispravnu marginu i dopunu.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Ulazi za opseg
Postavite horizontalno pomične ulaze za raspon pomoću .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>
Polje za potvrdu i radio
Zadani potvrdni okviri i radio uređaji su poboljšani uz pomoć .form-check
, jedne klase za oba tipa unosa koja poboljšava izgled i ponašanje njihovih HTML elemenata . Potvrdni okviri služe za odabir jedne ili više opcija na listi, dok radio uređaji služe za odabir jedne od više opcija.
Podržani su onemogućeni potvrdni okviri i radio stanice, ali da biste omogućili not-allowed
pokazivač miša iznad nadređenog <label>
, morat ćete dodati disabled
atribut u.form-check-input
. Disabled atribut će primijeniti svjetliju boju kako bi se naznačilo stanje ulaza.
Potvrdni okviri i radio uređaji su napravljeni da podrže provjeru valjanosti obrasca zasnovanu na HTML-u i pružaju sažete, pristupačne oznake. Kao takvi, naši <input>
s i <label>
s su srodni elementi za razliku od <input>
unutar a <label>
. Ovo je malo opširnije jer morate specificirati id
i for
atribute da povežete <input>
i <label>
.
Zadano (naslagano)
Prema zadanim postavkama, bilo koji broj okvira za potvrdu i radija koji su neposredni brat ili sestra bit će okomito naslagani i na odgovarajući način razmaknuti sa .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>
U redu
Grupirajte potvrdne okvire ili radio stanice u istom horizontalnom redu dodavanjem .form-check-inline
u bilo koji .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>
Bez etiketa
Dodaj .position-static
na ulaze .form-check
koji nemaju tekst oznake. Ne zaboravite još uvijek osigurati neki oblik oznake za pomoćne tehnologije (na primjer, korištenje aria-label
).
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
Layout
Budući da se Bootstrap primjenjuje display: block
i width: 100%
na gotovo sve naše kontrole obrasca, obrasci će se po defaultu slagati okomito. Dodatne klase se mogu koristiti za variranje ovog rasporeda na osnovu oblika.
Formirajte grupe
Klasa .form-group
je najlakši način za dodavanje strukture obrascima. Pruža fleksibilnu klasu koja podstiče pravilno grupisanje oznaka, kontrola, opcionalnog teksta pomoći i poruka o validaciji obrazaca. Podrazumevano se primjenjuje samo margin-bottom
, ali .form-inline
po potrebi preuzima dodatne stilove. Koristite ga sa <fieldset>
s, <div>
s ili gotovo bilo kojim drugim elementom.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
Mreža obrazaca
Složenije forme se mogu izgraditi pomoću naših mrežnih klasa. Koristite ih za izglede obrazaca koji zahtijevaju više kolona, različite širine i dodatne opcije poravnanja.
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Forma red
Također možete zamijeniti .row
za .form-row
, varijaciju našeg standardnog reda mreže koja nadjačava zadane oluke stupaca za čvršće i kompaktnije rasporede.
<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>
Složeniji rasporedi se takođe mogu kreirati pomoću sistema mreže.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Horizontalna forma
Kreirajte horizontalne forme pomoću mreže dodavanjem .row
klase u grupe obrazaca i korištenjem .col-*-*
klasa da odredite širinu vaših oznaka i kontrola. Obavezno dodajte .col-form-label
i svoje <label>
s tako da budu okomito centrirani s pripadajućim kontrolama obrasca.
Ponekad ćete možda morati da koristite pomoćne programe za margine ili padding da biste kreirali savršeno poravnanje koje vam je potrebno. Na primjer, uklonili smo oznaku padding-top
na našim naslaganim radio ulazima kako bismo bolje poravnali osnovnu liniju teksta.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Dimenzioniranje etikete horizontalnog oblika
Obavezno koristite .col-form-label-sm
ili .col-form-label-lg
na svoje <label>
s ili <legend>
s kako biste pravilno pratili veličinu .form-control-lg
i .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>
Dimenzioniranje kolone
Kao što je prikazano u prethodnim primjerima, naš sistem mreže vam omogućava da postavite bilo koji broj .col
s unutar .row
ili .form-row
. Oni će ravnomjerno podijeliti dostupnu širinu između sebe. Također možete odabrati podskup svojih stupaca koji će zauzimati više ili manje prostora, dok preostali .col
s jednako dijele ostatak, sa specifičnim klasama stupaca kao što je .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>
Automatsko određivanje veličine
Primjer u nastavku koristi uslužni program flexbox za vertikalno centriranje sadržaja i mijenja .col
se .col-auto
tako da vaši stupci zauzimaju samo onoliko prostora koliko je potrebno. Drugim riječima, sama kolona se dimenzionira na osnovu sadržaja.
<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>
Zatim možete to još jednom remiksovati sa klasama stupaca specifičnih za veličinu.
<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>
I naravno , podržane su prilagođene kontrole obrasca .
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Inline forme
Koristite .form-inline
klasu da prikažete niz oznaka, kontrola obrasca i dugmadi u jednom horizontalnom redu. Kontrole obrasca unutar inline obrazaca neznatno se razlikuju od njihovih zadanih stanja.
- Kontrole su
display: flex
, sažimaju bilo koji HTML bijeli prostor i omogućavaju vam da pružite kontrolu poravnanja pomoću uslužnih programa za razmak i flexbox . - Kontrole i ulazne grupe primaju
width: auto
da nadjačaju Bootstrap defaultwidth: 100%
. - Kontrole se pojavljuju samo u okvirima za prikaz koji su široki najmanje 576 piksela kako bi se u obzir uzeli uski okviri za prikaz na mobilnim uređajima.
Možda ćete morati ručno riješiti širinu i poravnanje pojedinačnih kontrola obrasca pomoću uslužnih programa za razmak (kao što je prikazano ispod). Na kraju, budite sigurni da ste uvijek uključili a <label>
uz svaku kontrolu obrasca, čak i ako ga trebate sakriti od posjetitelja koji ne čitaju ekrane pomoću .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Prilagođene kontrole obrasca i odabiri su također podržani.
<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>
Alternative skrivenim oznakama
Pomoćne tehnologije kao što su čitači ekrana će imati problema s vašim obrascima ako ne uključite oznaku za svaki unos. Za ove inline obrasce možete sakriti oznake pomoću .sr-only
klase. Postoje dodatne alternativne metode pružanja oznake za pomoćne tehnologije, kao što je aria-label
, aria-labelledby
ili title
atribut. Ako ništa od toga nije prisutno, pomoćne tehnologije mogu pribjeći korištenju placeholder
atributa, ako postoji, ali imajte na umu da se ne preporučuje korištenje placeholder
kao zamjene za druge metode označavanja.
Tekst pomoći
Tekst pomoći na nivou bloka u obrascima se može kreirati pomoću .form-text
(prethodno poznatog kao .help-block
u v3). Inline tekst pomoći može se fleksibilno implementirati korištenjem bilo kojeg inline HTML elementa i uslužnih klasa kao što je .text-muted
.
Povezivanje teksta pomoći s kontrolama obrasca
Tekst pomoći bi trebao biti eksplicitno povezan s kontrolom obrasca na koju se odnosi korištenjem aria-describedby
atributa. Ovo će osigurati da će pomoćne tehnologije – kao što su čitači ekrana – objaviti ovaj tekst pomoći kada se korisnik fokusira ili uđe u kontrolu.
Tekst pomoći ispod unosa može biti stilizovan sa .form-text
. Ova klasa uključuje display: block
i dodaje gornju marginu za lakši razmak od gornjih unosa.
<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>
Umetnuti tekst može koristiti bilo koji tipičan inline HTML element (bilo da se radi o <small>
, <span>
, ili nešto treće) s ništa više od uslužne klase.
<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>
Onemogućene forme
Dodajte disabled
logički atribut na ulaz kako biste spriječili korisničke interakcije i učinili da izgleda lakše.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Dodajte disabled
atribut a <fieldset>
da biste onemogućili sve kontrole unutar.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Upozorenje sa sidrima
Prema zadanim postavkama, pretraživači će tretirati sve izvorne kontrole obrasca ( <input>
i elemente) unutar a kao onemogućene, sprečavajući interakcije <select>
i tastature i miša na njima. Međutim, ako vaš obrazac također uključuje elemente, njima će biti dodijeljen samo stil . Kao što je navedeno u odjeljku o onemogućenom stanju za dugmad (i posebno u pododjeljku za elemente sidra), ovo CSS svojstvo još nije standardizirano i nije u potpunosti podržano u Internet Exploreru 10, te neće spriječiti korisnike tastature da budu mogu fokusirati ili aktivirati ove veze. Da biste bili sigurni, koristite prilagođeni JavaScript da onemogućite takve veze.<button>
<fieldset disabled>
<a ... class="btn btn-*">
pointer-events: none
Kompatibilnost među pretraživačima
Dok će Bootstrap primijeniti ove stilove u svim pretraživačima, Internet Explorer 11 i stariji ne podržavaju u potpunosti disabled
atribut na <fieldset>
. Koristite prilagođeni JavaScript da onemogućite skup polja u ovim pretraživačima.
Validacija
Pružite vrijedne povratne informacije svojim korisnicima uz HTML5 provjeru obrasca – dostupnu u svim našim podržanim pretraživačima . Odaberite neku od zadanih povratnih informacija o validaciji pretraživača ili implementirajte prilagođene poruke s našim ugrađenim klasama i početnim JavaScriptom.
Trenutno preporučujemo korištenje prilagođenih stilova provjere valjanosti, jer standardne poruke za provjeru valjanosti izvornog pretraživača nisu dosljedno izložene pomoćnim tehnologijama u svim pretraživačima (najčešće Chrome na desktopu i mobilnom uređaju).
Kako radi
Evo kako funkcionira validacija obrasca s Bootstrapom:
- Provjera valjanosti HTML obrasca se primjenjuje preko CSS-ove dvije pseudo-klase
:invalid
i:valid
. Primjenjuje se na<input>
,<select>
, i<textarea>
elemente. - Bootstrap obuhvata
:invalid
i:valid
stilove na roditeljsku.was-validated
klasu, obično se primjenjuje na<form>
. U suprotnom, svako obavezno polje bez vrijednosti prikazuje se kao nevažeće pri učitavanju stranice. Na ovaj način možete odabrati kada ćete ih aktivirati (obično nakon pokušaja podnošenja obrasca). - Da biste resetirali izgled obrasca (na primjer, u slučaju dinamičkog podnošenja obrasca pomoću AJAX-a), uklonite
.was-validated
klasu iz<form>
ponovo nakon slanja. - Kao rezervni,
.is-invalid
klase.is-valid
se mogu koristiti umjesto pseudo-klasa za provjeru valjanosti na strani servera . Ne zahtijevaju.was-validated
roditeljsku klasu. - Zbog ograničenja u načinu na koji CSS radi, ne možemo (trenutno) primijeniti stilove na a
<label>
koji dolazi prije kontrole obrasca u DOM-u bez pomoći prilagođenog JavaScripta. - Svi moderni pretraživači podržavaju API za validaciju ograničenja , seriju JavaScript metoda za provjeru valjanosti kontrola obrasca.
- Poruke sa povratnim informacijama mogu koristiti zadane postavke pretraživača (različite za svaki pretraživač i nestilizirane putem CSS-a) ili naše prilagođene stilove povratnih informacija s dodatnim HTML-om i CSS-om.
- Možete dati prilagođene poruke valjanosti sa
setCustomValidity
u JavaScriptu.
Imajući to na umu, razmotrite sljedeće demonstracije za naše prilagođene stilove validacije obrasca, opcione klase na strani servera i zadane postavke pretraživača.
Prilagođeni stilovi
Za prilagođene poruke provjere valjanosti Bootstrap obrasca, morat ćete dodati novalidate
boolean atribut u svoj <form>
. Ovo onemogućava zadane savjete za povratne informacije preglednika, ali i dalje pruža pristup API-jima za provjeru valjanosti obrazaca u JavaScript-u. Pokušajte poslati obrazac ispod; naš JavaScript će presresti dugme za slanje i prenijeti vam povratne informacije. Kada pokušate da pošaljete, vidjet ćete :invalid
i :valid
stilove primijenjene na vaše kontrole obrasca.
Prilagođeni stilovi povratnih informacija primjenjuju prilagođene boje, ivice, stilove fokusa i pozadinske ikone da bolje komuniciraju povratne informacije. Pozadinske ikone za <select>
s dostupne su samo sa .custom-select
, ali ne i sa .form-control
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Zadane postavke pretraživača
Niste zainteresirani za prilagođene povratne informacije o validaciji ili pisanje JavaScripta za promjenu ponašanja obrasca? Sve u redu, možete koristiti zadane postavke pretraživača. Pokušajte poslati obrazac ispod. Ovisno o vašem pretraživaču i OS-u, vidjet ćete malo drugačiji stil povratnih informacija.
Iako se ovi stilovi povratnih informacija ne mogu stilizirati pomoću CSS-a, i dalje možete prilagoditi tekst povratnih informacija putem JavaScripta.
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Server side
Preporučujemo da koristite provjeru valjanosti na strani klijenta, ali u slučaju da vam je potrebna provjera valjanosti na strani servera, možete naznačiti nevažeća i važeća polja obrasca sa .is-invalid
i .is-valid
. Imajte na umu da .invalid-feedback
je također podržano sa ovim klasama.
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServerUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
</div>
<input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Podržani elementi
Naši primjeri obrazaca prikazuju izvorni tekstualni <input>
s iznad, ali stilovi provjere valjanosti su također dostupni za <textarea>
s i prilagođene kontrole obrasca.
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="form-group">
<select class="custom-select" required>
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</form>
Alati
Ako vaš izgled obrasca to dozvoljava, možete zamijeniti .{valid|invalid}-feedback
klase za .{valid|invalid}-tooltip
klase kako biste prikazali povratne informacije o validaciji u stiliziranom opisu alata. Pobrinite se da imate roditelja s position: relative
njim za pozicioniranje u opisu alata. U primjeru ispod, naše klase stupaca to već imaju, ali vaš projekt može zahtijevati alternativno podešavanje.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltipUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</div>
<input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
<div class="invalid-tooltip">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Prilagođeni obrasci
Za još veću prilagodbu i konzistentnost među pretraživačima, koristite naše potpuno prilagođene elemente obrasca da zamijenite zadane postavke preglednika. Izgrađeni su na vrhu semantičke i pristupačne oznake, tako da su solidna zamjena za svaku zadanu kontrolu obrasca.
Polje za potvrdu i radio
Svaki potvrdni okvir i radio <input>
i <label>
uparivanje su umotani u a <div>
da bi se stvorila naša prilagođena kontrola. Strukturno, ovo je isti pristup kao i naš default .form-check
.
Koristimo selektor brata i sestra ( ~
) za sva naša <input>
stanja – na primjer :checked
– da pravilno stiliziramo naš prilagođeni indikator obrasca. Kada se kombinuje sa .custom-control-label
klasom, takođe možemo da stilizujemo tekst za svaku stavku na osnovu stanja <input>
'.
Sakrivamo zadanu vrijednost <input>
pomoću opacity
i koristimo .custom-control-label
za izgradnju novog prilagođenog indikatora obrasca umjesto njega sa ::before
i ::after
. Nažalost, ne možemo da napravimo prilagođeni samo iz <input>
jer CSS content
ne radi na tom elementu.
U označenim stanjima koristimo base64 ugrađene SVG ikone iz Open Iconic . Ovo nam pruža najbolju kontrolu za stilizovanje i pozicioniranje u svim pretraživačima i uređajima.
Potvrdni okviri
<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>
Prilagođeni potvrdni okviri također mogu koristiti :indeterminate
pseudo klasu kada se ručno podese putem JavaScripta (nema dostupnog HTML atributa za njegovo navođenje).
Ako koristite jQuery, nešto poput ovoga bi trebalo biti dovoljno:
$('.your-checkbox').prop('indeterminate', true)
Radio
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
U redu
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Onemogućeno
Prilagođeni potvrdni okviri i radio također se mogu onemogućiti. Dodajte disabled
logički atribut na <input>
i prilagođeni indikator i opis oznake će biti automatski stilizovani.
<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>
Prekidači
Prekidač ima oznaku prilagođenog okvira za potvrdu, ali koristi .custom-switch
klasu za prikazivanje prekidača. Prekidači također podržavaju disabled
atribut.
<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>
Odaberite meni
Prilagođenim <select>
izbornicima je potrebna samo prilagođena klasa, .custom-select
da bi pokrenuli prilagođene stilove. Prilagođeni stilovi su ograničeni na <select>
početni izgled i ne mogu mijenjati <option>
s zbog ograničenja pretraživača.
<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>
Također možete birati između malih i velikih prilagođenih odabira koji odgovaraju našim unosima teksta slične veličine.
<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>
Atribut multiple
je također podržan:
<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>
Kao i size
atribut:
<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>
Domet
Kreirajte prilagođene <input type="range">
kontrole sa .custom-range
. Traka (pozadina) i palac (vrijednost) su oboje stilizovani tako da se pojavljuju isto u svim pretraživačima. Kako samo IE i Firefox podržavaju „ispunjavanje“ svoje staze s lijeve ili desne strane palca kao sredstvo za vizualno ukazivanje na napredak, mi to trenutno ne podržavamo.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Unosi opsega imaju implicitne vrijednosti za min
i max
— 0
i 100
, respektivno. Možete specificirati nove vrijednosti za one koji koriste atribute min
i .max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Prema zadanim postavkama, ulazi u raspon se „priključuju“ na vrijednosti cjelobrojnih. Da biste to promijenili, možete odrediti step
vrijednost. U donjem primjeru udvostručujemo broj koraka pomoću step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Pregledač datoteka
Preporučeni dodatak za animiranje prilagođenog unosa datoteke: bs-custom-file-input , to je ono što trenutno koristimo ovdje u našim dokumentima.
Unos fajla je najgrublji od gomile i zahteva dodatni JavaScript ako želite da ih povežete sa funkcionalnim Odaberi datoteku... i tekstom imena izabranog fajla.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Sakrivamo zadanu datoteku <input>
putem opacity
i umjesto toga stiliziramo <label>
. Dugme se generiše i pozicionira sa ::after
. Na kraju, proglašavamo a width
i height
on <input>
za pravilan razmak za okolni sadržaj.
Prevođenje ili prilagođavanje stringova pomoću SCSS-a
:lang()
Pseudo-klasa se koristi za omogućavanje prijevoda teksta "Pretraži" na druge jezike. Poništite ili dodajte unose u $custom-file-text
Sass varijablu s relevantnom jezičnom oznakom i lokaliziranim stringovima. Engleske žice se mogu prilagoditi na isti način. Na primjer, evo kako se može dodati španski prijevod (šifra španskog jezika je es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Evo lang(es)
u akciji na prilagođenom unosu datoteke za španski prijevod:
<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>
Morate ispravno postaviti jezik vašeg dokumenta (ili njegovog podstabla) kako bi se prikazao ispravan tekst. Ovo se može učiniti pomoću atributa lang
na elementu <html>
ili Content-Language
HTTP zaglavlja , između ostalih metoda.
Prevođenje ili prilagođavanje stringova pomoću HTML-a
Bootstrap također pruža način za prevođenje teksta "Pregledaj" u HTML sa data-browse
atributom koji se može dodati prilagođenoj oznaci unosa (primjer na holandskom):
<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>