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">
<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>
Kontrole obrasca
Kontrole tekstualnog oblika – poput <input>
s, <select>
s i <textarea>
s – stilizovane su sa .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">
</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 okviri za potvrdu i radio. Atribut disabled
će primijeniti svjetliju boju kako bi se naznačilo stanje ulaza.
Polje za potvrdu i radio dugmad podržavaju 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 vertikalno 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 unose .form-check
koji nemaju tekst oznake. Ne zaboravite da i dalje navedete neki oblik pristupačnog imena 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 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>
Mreža obrazaca
Složeniji oblici 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">
</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>
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 kako bi bili 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">
</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>
Dimenzioniranje naljepnice horizontalne forme
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>
Auto-dimenzioniranje
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 radi lakšeg razmaka 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čem drugom) 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>
<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>
Upozorenje sa sidrima
Pretraživači tretiraju sve izvorne kontrole oblika ( <input>
, <select>
, i <button>
elemente) unutar a <fieldset disabled>
kao onemogućene, sprečavajući interakciju i tastature i miša na njima.
Međutim, ako vaš obrazac uključuje i prilagođene elemente poput gumba kao što je <a ... class="btn btn-*">
, njima će biti dodijeljen samo stil pointer-events: none
. Kao što je navedeno u odjeljku o onemogućenom stanju za dugmad (a posebno u pododjeljku za elemente sidra), ovo CSS svojstvo još uvijek nije standardizirano i nije u potpunosti podržano u Internet Exploreru 10. Kontrole zasnovane na sidru će također i dalje biti može se fokusirati i koristiti pomoću tastature. Morate ručno modificirati ove kontrole dodavanjem tabindex="-1"
kako biste spriječili primanje fokusa i aria-disabled="disabled"
signalizirali njihovo stanje pomoćnim tehnologijama.
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.
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 provjere valjanosti obrazaca, 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 kako bi bolje komunicirali 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-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>
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-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>
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.
Za nevažeća polja, osigurajte da je nevažeća povratna informacija/poruka o grešci povezana s relevantnim poljem obrasca pomoću aria-describedby
. Ovaj atribut omogućava id
referenciranje više od jednog, u slučaju da polje već ukazuje na dodatni tekst obrasca.
<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>
Podržani elementi
Stilovi validacije dostupni su za sljedeće kontrole i komponente obrasca:
<input>
s i<textarea>
s sa.form-control
<select>
s sa.form-control
ili.custom-select
.form-check
s.custom-checkbox
s i.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>
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-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>
Prilagođavanje
Stanja validacije mogu se prilagoditi putem Sass-a sa $form-validation-states
mapom. Smještena u našoj _variables.scss
datoteci, ova Sass mapa je zapetljana kako bi se generirala zadana valid
/ invalid
validacija stanja. Uključena je ugniježđena mapa za prilagođavanje boje i ikone svake države. Iako pretraživači ne podržavaju nijedno drugo stanje, oni koji koriste prilagođene stilove mogu lako dodati složenije povratne informacije obrascu.
Imajte na umu da ne preporučujemo prilagođavanje ovih vrijednosti bez modifikacije form-validation-state
mixina.
// 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));
}
Validacija ulazne grupe
Da bi otkrili koji elementi trebaju zaobljene uglove unutar ulazne grupe s validacijom, ulazna grupa zahtijeva dodatnu .has-validation
klasu.
<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>
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 bismo stvorili našu prilagođenu kontrolu. 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>
sa opacity
i koristimo .custom-control-label
za izgradnju novog prilagođenog indikatora obrasca umjesto njega sa ::before
i ::after
. Nažalost, ne možemo napraviti 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 na 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 specificiranje).
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="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>
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 opsega se „priključuju“ na cjelobrojne vrijednosti. Da biste to promijenili, možete odrediti step
vrijednost. U primjeru ispod, 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
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 prijevod na španski (kod š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>