Source

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 typeatribut na svim ulazima (npr. emailza adresu e-pošte ili numberza 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.

Nikada nećemo dijeliti vašu e-poštu ni sa kim. 
<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-controlklasom. 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-controlza .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-lgi .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 readonlyboolean 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-plaintextklasu 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 idi foratribute da biste povezali <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-inlineu 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-staticna ulaze .form-checkkoji 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: blocki 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-groupje 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-inlinepo 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ž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 .rowza .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 .rowklase u grupe obrazaca i korištenjem .col-*-*klasa da odredite širinu vaših oznaka i kontrola. Obavezno dodajte .col-form-labeli 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-topna našim naslaganim radio ulazima kako bismo bolje poravnali osnovnu liniju teksta.

Radio
Polje za potvrdu 
<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">
    <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-smili .col-form-label-lgna svoje <label>s ili <legend>s kako biste pravilno pratili veličinu .form-control-lgi .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 .cols unutar .rowili .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 .cols 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 .colse .col-autotako da vaši stupci zauzimaju samo onoliko prostora koliko je potrebno. Drugim riječima, kolona sama određuje veličinu 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-inlineklasu 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: autoda nadjačaju Bootstrap default width: 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-onlyklase. Postoje dodatne alternativne metode pružanja oznake za pomoćne tehnologije, kao što je aria-label, aria-labelledbyili titleatribut. Ako ništa od toga nije prisutno, pomoćne tehnologije mogu pribjeći korištenju placeholderatributa, ako postoji, ali imajte na umu da se ne preporučuje korištenje placeholderkao 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-blocku 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-describedbyatributa. 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: blocki dodaje gornju marginu za lakši razmak od gornjih unosa.

Vaša lozinka mora imati 8-20 znakova, sadržavati slova i brojeve i ne smije sadržavati razmake, specijalne znakove ili emotikone. 
<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.

Mora imati 8-20 znakova. 
<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 disabledlogič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 disabledatribut 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 disabledatribut 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 :invalidi :valid. Primjenjuje se na <input>, <select>, i <textarea>elemente.
  • Bootstrap obuhvata :invalidi :validstilove na roditeljsku .was-validatedklasu, 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-validatedklasu iz <form>ponovo nakon slanja.
  • Kao rezervni, .is-invalidklase .is-validse mogu koristiti umjesto pseudo-klasa za provjeru valjanosti na strani servera . Ne zahtijevaju .was-validatedroditeljsku 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 setCustomValidityu 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 novalidateboolean 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 :invalidi :validstilove 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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<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" 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" 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" 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" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" 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" 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"  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" 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-invalidi .is-valid. Imajte na umu da .invalid-feedbackje također podržano sa ovim klasama.

Izgleda dobro!
Izgleda dobro!
@
Molimo odaberite korisničko ime.
Molimo navedite važeći grad.
Molimo odaberite važeću državu.
Molimo navedite važeći zip.
Morate se složiti prije podnošenja. 
<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" 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" 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" 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" required>
      <div 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" 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="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" 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

Stilovi validacije dostupni su za sljedeće kontrole i komponente obrasca:

  • <input>s i <textarea>s sa .form-control(uključujući najviše jedan .form-controlu ulaznim grupama)
  • <select>s sa .form-controlili.custom-select
  • .form-checks
  • .custom-checkboxs i .custom-radios
  • .custom-file
Unesite poruku u polje za tekst.
Primjer nevažećeg povratnog teksta
Još primjera nevažećih povratnih informacija
Primjer nevažećih povratnih informacija o prilagođenom odabiru
Primjer nevažeće povratne informacije o prilagođenom fajlu 
<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}-feedbackklase za .{valid|invalid}-tooltipklase kako biste prikazali povratne informacije o validaciji u stiliziranom opisu alata. Pobrinite se da imate roditelja s position: relativenjim za pozicioniranje u opisu alata. U primjeru ispod, naše klase stupaca to već imaju, ali vaš projekt može zahtijevati alternativno podešavanje.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<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" 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" 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" 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" 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-statesmapom. Smještena u našoj _variables.scssdatoteci, ova Sass mapa je u petlji radi generiranja zadanih valid/ invalidpotvrđenih 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-statemixina.

// 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));
}

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-labelklasom, takođe možemo da stilizujemo tekst za svaku stavku na osnovu stanja <input>'.

Sakrivamo zadanu vrijednost <input>pomoću opacityi koristimo .custom-control-labelza izgradnju novog prilagođenog indikatora obrasca umjesto njega sa ::beforei ::after. Nažalost, ne možemo da napravimo prilagođeni samo iz <input>jer CSS contentne 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 :indeterminatepseudo 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 disabledlogič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-switchklasu za prikazivanje prekidača. Prekidači također podržavaju disabledatribut.

<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-selectda 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 multipleje 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 sizeatribut:

<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 mini max— 0i 100, respektivno. Možete specificirati nove vrijednosti za one koji koriste atribute mini .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 stepvrijednost. 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 opacityi umjesto toga stiliziramo <label>. Dugme se generiše i pozicionira sa ::after. Na kraju, proglašavamo a widthi heighton <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-textSass 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 langna elementu <html>ili Content-LanguageHTTP 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-browseatributom 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>