in English

Obrazci

Primeri in smernice za uporabo slogov nadzora obrazca, možnosti postavitve in komponent po meri za ustvarjanje najrazličnejših obrazcev.

Pregled

Kontrolniki obrazcev Bootstrap razširijo naše stile obrazcev Rebooted z razredi. Uporabite te razrede, da se odločite za njihove prilagojene prikaze za bolj dosledno upodabljanje v brskalnikih in napravah.

Prepričajte se, da uporabljate ustrezen typeatribut pri vseh vnosih (npr. emailza e-poštni naslov ali numberza številske informacije), da izkoristite novejše kontrolnike vnosa, kot je preverjanje e-pošte, izbira številk in več.

Tukaj je hiter primer za predstavitev slogov obrazcev Bootstrapa. Nadaljujte z branjem za dokumentacijo o zahtevanih razredih, postavitvi obrazca in več.

<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>

Kontrolniki obrazca

Kontrolniki besedilne oblike, kot <input>so s, <select>s in <textarea>s, so oblikovani z .form-controlrazredom. Vključeni so slogi za splošni videz, stanje fokusa, velikost in drugo.

Bodite prepričani, da raziščete naše obrazce po meri , da še dodatno oblikujete <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 vnose datotek zamenjajte .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>

Dimenzioniranje

Nastavite višine z uporabo razredov, kot sta .form-control-lgin .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>

Le za branje

Vnosu dodajte readonlylogični atribut, da preprečite spreminjanje vrednosti vnosa. Vnosi samo za branje so videti svetlejši (tako kot onemogočeni vnosi), vendar ohranijo standardni kazalec.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Navadno besedilo samo za branje

Če želite, da so <input readonly>elementi v vašem obrazcu oblikovani kot golo besedilo, uporabite .form-control-plaintextrazred, da odstranite privzeti slog polja obrazca in ohranite pravilen rob in oblazinjenje.

<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>

Vhodi obsega

Nastavite vodoravno drsne vnose obsega z uporabo .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>

Potrditvena polja in radijski sprejemniki

Privzeta potrditvena polja in radii so izboljšani s pomočjo .form-checkenega samega razreda za obe vrsti vnosa, ki izboljša postavitev in obnašanje njunih elementov HTML . Potrditvena polja so namenjena izbiri ene ali več možnosti na seznamu, medtem ko so radijski sprejemniki namenjeni izbiri ene možnosti izmed mnogih.

Podprta so onemogočena potrditvena polja in radijski sprejemniki. Atribut disabledbo uporabil svetlejšo barvo, da bo lažje označil stanje vnosa.

Potrditvena polja in izbirni gumbi podpirajo preverjanje obrazcev na podlagi HTML in zagotavljajo jedrnate, dostopne oznake. Kot taka sta naša <input>s in <label>s sorodna elementa v nasprotju z elementom <input>znotraj a <label>. To je nekoliko bolj podrobno, saj morate določiti atribute idin forza povezavo <input>in <label>.

Privzeto (naloženo)

Privzeto bo poljubno število potrditvenih polj in radijskih postaj, ki so neposredno sorodne, navpično zložene in ustrezno razmaknjene z .form-check.

Privzeto potrditveno polje

Onemogočeno potrditveno polje

<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>

Privzeti radio

Drugi privzeti radio

Onemogočen radio

<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>

V vrsti

Združite potrditvena polja ali radijske postaje v isto vodoravno vrstico tako, da jih dodate .form-check-inlinekateremu koli .form-check.

3 (onemogočeno)

<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>

3 (onemogočeno)

<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>

Brez nalepk

Dodaj .position-staticmed vnose .form-check, ki nimajo besedila oznake. Ne pozabite zagotoviti neke oblike dostopnega imena za podporne tehnologije (na primer uporaba 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>

Postavitev

Ker se Bootstrap uporablja display: blockza width: 100%skoraj vse naše kontrolnike obrazcev, bodo obrazci privzeto zloženi navpično. Dodatne razrede je mogoče uporabiti za spreminjanje te postavitve glede na obrazec.

Oblikujte skupine

Razred .form-groupje najlažji način, da obrazcem dodate nekaj strukture. Zagotavlja prilagodljiv razred, ki spodbuja pravilno združevanje oznak, kontrolnikov, neobveznega besedila pomoči in sporočil za preverjanje obrazca. Privzeto velja le margin-bottom, vendar izbere dodatne sloge.form-inline potrebi izbere dodatne sloge. Uporabite ga s <fieldset>s, <div>s ali skoraj katerim koli 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 obrazca

Bolj zapletene oblike je mogoče zgraditi z uporabo naših mrežnih razredov. Uporabite jih za postavitve obrazcev, ki zahtevajo več stolpcev, različne širine in dodatne možnosti poravnave.

<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>

Oblikujte vrstico

Zamenjate lahko tudi .rowza .form-row, različico naše standardne mrežne vrstice, ki preglasi privzete žlebove stolpcev za tesnejše in bolj kompaktne postavitve.

<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>

Z mrežnim sistemom je mogoče ustvariti tudi bolj zapletene postavitve.

<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 oblika

Ustvarite vodoravne obrazce z mrežo tako, da dodate .rowrazred skupinam obrazcev in z uporabo .col-*-*razredov določite širino svojih oznak in kontrolnikov. Prepričajte se, da dodate .col-form-labeltudi svojim <label>s, da bodo navpično centrirani s svojimi povezanimi kontrolniki obrazca.

Včasih boste morda morali uporabiti pripomočke za rob ali oblazinjenje, da ustvarite popolno poravnavo, ki jo potrebujete. Odstranili smo na primer oznako padding-topna naših zloženih radijskih vhodih, da bi bolje poravnali osnovno črto besedila.

<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 vodoravne oblike

Bodite prepričani, da uporabite .col-form-label-smali .col-form-label-lgza vaš <label>s ali <legend>s, da pravilno sledite velikosti .form-control-lgin .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>

Velikost stolpca

Kot je prikazano v prejšnjih primerih, vam naš mrežni sistem omogoča, da postavite poljubno število .cols znotraj .rowali .form-row. Razpoložljivo širino si bodo enakomerno razdelili. Izberete lahko tudi podmnožico vaših stolpcev, ki bo zavzela več ali manj prostora, medtem ko preostali .cols enakomerno razdelijo preostanek s posebnimi razredi stolpcev, kot 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>

Samodejno določanje velikosti

Spodnji primer uporablja pripomoček flexbox za navpično centriranje vsebine in spremembe .col, .col-autotako da vaši stolpci zavzamejo le toliko prostora, kot je potrebno. Povedano drugače, velikost stolpca je odvisna od vsebine.

<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>

Nato lahko to znova zmešate z razredi stolpcev, specifičnih za velikost.

<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>

In seveda so podprti kontrolniki obrazcev po meri .

<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 obrazci

Uporabite .form-inlinerazred za prikaz serije oznak, kontrolnikov obrazca in gumbov v eni vodoravni vrstici. Kontrolniki obrazcev v vgrajenih obrazcih se nekoliko razlikujejo od privzetih stanj.

Kontrolniki so display: flex, strnejo vsak prazen prostor HTML in vam omogočajo, da zagotovite nadzor poravnave s pripomočki za razmik in flexbox .
Kontrolniki in vnosne skupine prejmejo width: autopreglasitev privzete vrednosti Bootstrap width: 100%.
Kontrolniki so prikazani samo v vrsticah v pogledih, ki so široki vsaj 576 slikovnih pik, da se upoštevajo ozki pogledi na mobilnih napravah.

Morda boste morali ročno obravnavati širino in poravnavo posameznih kontrolnikov obrazca s pripomočki za razmik (kot je prikazano spodaj). Na koncu se prepričajte, da z vsakim kontrolnikom obrazca vedno vključite a <label>, tudi če ga morate skriti pred obiskovalci, ki ne uporabljajo bralnika zaslona, z .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>

Podprti so tudi kontrolniki in izbire obrazcev po meri.

<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 za skrite oznake

Podporne tehnologije, kot so bralniki zaslona, bodo imele težave z vašimi obrazci, če ne vključite oznake za vsak vnos. Za te vgrajene obrazce lahko skrijete oznake z uporabo .sr-onlyrazreda. Obstajajo še drugi alternativni načini zagotavljanja oznake za podporne tehnologije, kot je aria-labelatribut ali aria-labelledby. titleČe nobeden od teh ni prisoten, lahko podporne tehnologije uporabijo placeholderatribut, če je prisoten, vendar upoštevajte, da uporaba placeholderkot nadomestilo za druge metode označevanja ni priporočljiva.

Besedilo pomoči

Besedilo pomoči na ravni bloka v obrazcih je mogoče ustvariti z .form-text(prej znano kot .help-blockv v3). Besedilo pomoči v vrstici je mogoče prilagodljivo implementirati z uporabo katerega koli elementa HTML v vrstici in razredov pripomočkov, kot je .text-muted.

Povezovanje besedila pomoči s kontrolniki obrazca

Besedilo pomoči mora biti izrecno povezano s kontrolnikom obrazca, na katerega se nanaša z uporabo aria-describedbyatributa. To bo zagotovilo, da bodo podporne tehnologije, kot so bralniki zaslona, objavile to besedilo pomoči, ko se uporabnik osredotoči ali vstopi v kontrolnik.

Besedilo pomoči pod vnosi je mogoče oblikovati z .form-text. Ta razred vključuje display: blockin doda nekaj zgornjega roba za enostavno ločitev od zgornjih vnosov.

Geslo Vaše geslo mora biti dolgo od 8 do 20 znakov, vsebovati mora črke in številke ter ne sme vsebovati presledkov, posebnih znakov ali emojijev.

<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>

Besedilo v vrstici lahko uporablja kateri koli tipičen element HTML v vrstici (naj bo to <small>, <span>, ali kaj drugega) z nič več kot razredom uporabnosti.

<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>

Onemogočeni obrazci

V vnos dodajte disabledlogični atribut, da preprečite interakcije uporabnikov in naredite lažji.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Dodajte disabledatribut a <fieldset>, da onemogočite vse kontrole znotraj.

<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>

Opozorilo s sidri

Brskalniki obravnavajo vse izvorne kontrolnike obrazca ( <input>, <select>, in <button>elemente) znotraj <fieldset disabled>kot onemogočene, kar preprečuje interakcije s tipkovnico in miško na njih.

Če pa vaš obrazec vključuje tudi elemente, podobne gumbom po meri, kot <a ... class="btn btn-*">je , bodo ti dobili samo slog pointer-events: none. Kot je navedeno v razdelku o onemogočenem stanju za gumbe (in posebej v podrazdelku za sidrne elemente), ta lastnost CSS še ni standardizirana in ni v celoti podprta v Internet Explorerju 10. Tudi kontrolniki, ki temeljijo na sidrih, bodo še vedno fokusiran in upravljan s tipkovnico. Te kontrolnike morate ročno spremeniti z dodajanjem tabindex="-1", da preprečite, da bi prejeli fokus, in aria-disabled="disabled"sporočite njihovo stanje podpornim tehnologijam.

Združljivost med brskalniki

Medtem ko bo Bootstrap uporabil te sloge v vseh brskalnikih, Internet Explorer 11 in novejši ne podpirajo v celoti disabledatributa na <fieldset>. Uporabite JavaScript po meri, da onemogočite nabor polj v teh brskalnikih.

Validacija

Zagotovite svojim uporabnikom dragocene in koristne povratne informacije s preverjanjem obrazca HTML5 – na voljo v vseh naših podprtih brskalnikih . Izbirajte med privzetimi povratnimi informacijami o preverjanju brskalnika ali implementirajte sporočila po meri z našimi vgrajenimi razredi in začetnim JavaScriptom.

Zavedamo se, da trenutno stili preverjanja po meri in opisi orodij na strani odjemalca niso dostopni, ker niso izpostavljeni podpornim tehnologijam. Medtem ko delamo na rešitvi, priporočamo uporabo možnosti na strani strežnika ali privzete metode preverjanja brskalnika.

Preverjanje vnosne skupine

Vnosne skupine imajo na žalost težave s slogi preverjanja. Naše priporočilo je, da povratna sporočila postavite kot sorodne elemente elementa, .input-groupki ima .is-{valid|invalid}. Postavitev povratnih sporočil znotraj vnosnih skupin prekine border-radius. Oglejte si to rešitev .

Kako deluje

Takole deluje preverjanje obrazca z Bootstrapom:

Preverjanje obrazca HTML se uporablja prek dveh psevdorazredov CSS :invalidin :valid. Velja za elemente <input>, <select>in .<textarea>
Bootstrap obsega :invalidin :validstile za nadrejeni .was-validatedrazred, običajno uporabljen za <form>. V nasprotnem primeru se vsako zahtevano polje brez vrednosti ob nalaganju strani prikaže kot neveljavno. Tako lahko izberete, kdaj jih želite aktivirati (običajno po poskusu oddaje obrazca).
Če želite ponastaviti videz obrazca (na primer v primeru dinamičnih oddaj obrazcev z uporabo AJAX), po oddaji znova odstranite .was-validatedrazred iz .<form>
Namesto psevdorazredov za preverjanje veljavnosti na strani strežnika.is-invalid se lahko uporabijo tudi .is-validrazredi . Ne potrebujejo nadrejenega razreda..was-validated
Zaradi omejitev delovanja CSS ne moremo (trenutno) uporabiti slogov za a <label>, ki je pred kontrolnikom obrazca v DOM, brez pomoči JavaScripta po meri.
Vsi sodobni brskalniki podpirajo API za preverjanje omejitev , niz metod JavaScript za preverjanje kontrolnikov obrazcev.
Sporočila s povratnimi informacijami lahko uporabljajo privzete nastavitve brskalnika (različne za vsak brskalnik in jih ni mogoče oblikovati prek CSS) ali naše sloge povratnih informacij po meri z dodatnima HTML in CSS.
setCustomValidityV JavaScriptu lahko zagotovite sporočila o veljavnosti po meri .

S tem v mislih razmislite o naslednjih predstavitvah za naše sloge preverjanja obrazcev po meri, izbirne razrede na strani strežnika in privzete nastavitve brskalnika.

Slogi po meri

Za sporočila o preverjanju obrazca Bootstrap po meri boste morali dodati novalidatelogični atribut v svoj <form>. To onemogoči privzete povratne informacije brskalnika, vendar še vedno omogoča dostop do API-jev za preverjanje obrazca v JavaScriptu. Poskusite oddati spodnji obrazec; naš JavaScript bo prestregel gumb za oddajo in vam posredoval povratne informacije. Ko boste poskušali oddati, boste videli sloge :invalidin uporabljene za vaše kontrolnike obrazca.:valid

Slogi povratnih informacij po meri uporabljajo barve po meri, obrobe, sloge ostrenja in ikone ozadja za boljše posredovanje povratnih informacij. Ikone ozadja za <select>s so na voljo samo z .custom-selectin ne .form-control.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Privzete nastavitve brskalnika

Vas ne zanimajo povratna sporočila preverjanja po meri ali pisanje JavaScripta za spreminjanje vedenja obrazcev? Vse v redu, lahko uporabite privzete nastavitve brskalnika. Poskusite oddati spodnji obrazec. Odvisno od vašega brskalnika in operacijskega sistema boste videli nekoliko drugačen slog povratnih informacij.

Čeprav teh slogov povratnih informacij ni mogoče oblikovati s CSS, lahko še vedno prilagodite besedilo povratnih informacij prek 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>

Strežniška stran

Priporočamo uporabo preverjanja na strani odjemalca, če pa potrebujete preverjanje na strani strežnika, lahko označite neveljavna in veljavna polja obrazca z .is-invalidin .is-valid. Upoštevajte, da .invalid-feedbackje podprt tudi s temi razredi.

Za neveljavna polja zagotovite, da je neveljavna povratna informacija/sporočilo o napaki povezano z ustreznim poljem obrazca z uporabo aria-describedby. Ta atribut omogoča idsklicevanje na več kot enega, če polje že kaže na dodatno besedilo obrazca.

<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>

Podprti elementi

Slogi preverjanja so na voljo za naslednje kontrolnike obrazca in komponente:

<input>s in <textarea>s s.form-control
<select>s z .form-controloz.custom-select
.form-checks
.custom-checkboxs in .custom-radios
.custom-file

Textarea

Prosimo, vnesite sporočilo v besedilno polje.

Označite to potrditveno polje po meri

Primer neveljavne povratne informacije

Preklopi ta radio po meri

Ali pa preklopite ta drugi radio po meri

Več primerov neveljavnih povratnih informacij

Primer neveljavne povratne informacije o izbiri po meri

Izberite datoteko...

Primer neveljavne povratne informacije o datoteki po meri

Primer povratnih informacij o neveljavni skupini vnosov

Opcije

Primer povratnih informacij o neveljavni skupini vnosov

Izberite datoteko...

Primer povratnih informacij o neveljavni skupini vnosov

<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>

Namigi orodij

Če postavitev vašega obrazca to omogoča, lahko zamenjate .{valid|invalid}-feedbackrazrede za .{valid|invalid}-tooltiprazrede, da prikažete povratne informacije o preverjanju v oblikovanem opisu orodja. Prepričajte se, da je prisoten nadrejeni position: relativeelement za pozicioniranje namigov orodij. V spodnjem primeru naši razredi stolpcev to že imajo, vendar bo vaš projekt morda zahteval alternativno nastavitev.

<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>

Prilagajanje

Stanja preverjanja je mogoče prilagoditi prek Sass z $form-validation-stateszemljevidom. _variables.scssTa zemljevid Sass, ki se nahaja v naši datoteki, je zankan, da ustvari privzeta stanja valid/ invalidstanja veljavnosti. Vključen je ugnezdeni zemljevid za prilagoditev barve in ikone vsake države. Medtem ko brskalniki ne podpirajo nobenih drugih stanj, lahko tisti, ki uporabljajo sloge po meri, enostavno dodajo bolj zapletene povratne informacije obrazca.

Upoštevajte, da ne priporočamo prilagajanja teh vrednosti, ne da bi spremenili tudi form-validation-statemixin.

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

Rešitev za preverjanje veljavnosti vnosne skupine

border-radiusZaradi omejitev izbirnika ne moremo razrešiti pokvarjenih vnosnih skupin s preverjanjem, zato so potrebne ročne preglasitve. Ko uporabljate standardno vnosno skupino in ne prilagodite privzetih vrednosti polmera obrobe, dodajte .rounded-rightelementom z zlomljeno border-radius.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Prosimo izberite uporabniško ime.

Ko uporabljate majhno ali veliko vnosno skupino ali prilagajate privzete border-radiusvrednosti, dodajte CSS po meri elementu z izločenim border-radius.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Prosimo izberite uporabniško ime.

Obrazci po meri

Za še več prilagajanja in doslednosti med brskalniki uporabite naše popolnoma prilagojene elemente obrazca, da nadomestite privzete nastavitve brskalnika. Zgrajeni so na semantičnem in dostopnem označevanju, zato so dobra zamenjava za kateri koli privzeti kontrolnik obrazca.

Potrditvena polja in radijski sprejemniki

Vsako potrditveno polje, radio <input>in <label>seznanjanje je zavito v , <div>da ustvarimo naš kontrolnik po meri. Strukturno je to enak pristop kot naš privzeti .form-check.

Izbirnik sorodnikov ( ~) uporabljamo za vsa naša <input>stanja – na primer – za :checkedpravilno oblikovanje indikatorja obrazca po meri. V kombinaciji z .custom-control-labelrazredom lahko oblikujemo tudi besedilo za vsak element glede na stanje <input>'s.

Privzeto skrijemo <input>z opacityin uporabimo .custom-control-labelza izdelavo novega indikatorja obrazca po meri na njegovem mestu z ::beforein ::after. Na žalost ne moremo ustvariti prilagojenega samo iz elementa, <input>ker CSS contentne deluje na tem elementu.

V označenih stanjih uporabljamo vdelane ikone SVG base64 iz Open Iconic . To nam zagotavlja najboljši nadzor za oblikovanje in pozicioniranje v brskalnikih in napravah.

Potrditvena polja

Označite to potrditveno polje po meri

<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>

Potrditvena polja po meri lahko uporabljajo tudi :indeterminatepsevdorazred, če so ročno nastavljena prek JavaScripta (ni razpoložljivega atributa HTML za njegovo določitev).

Označite to potrditveno polje po meri

Če uporabljate jQuery, bi moralo zadostovati nekaj takega:

$('.your-checkbox').prop('indeterminate', true)

Radijski sprejemniki

Preklopi ta radio po meri

Ali pa preklopite ta drugi radio po meri

<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>

V vrsti

Preklopi ta radio po meri

Ali pa preklopite ta drugi radio po meri

<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>

Onemogočeno

Potrditvena polja po meri in radijske postaje je mogoče tudi onemogočiti. Dodajte disabledlogični atribut <input>in indikator po meri ter opis oznake bosta samodejno oblikovana.

Označite to potrditveno polje po meri

Preklopi ta radio po meri

<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>

Stikala

Stikalo ima oznako potrditvenega polja po meri, vendar uporablja .custom-switchrazred za upodabljanje preklopnega stikala. Stikala podpirajo tudi disabledatribut.

Preklopite ta stikalni element

Onemogočen stikalni element

<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>

Meniji po meri <select>potrebujejo le razred po meri, .custom-selectda sprožijo sloge po meri. Slogi po meri so omejeni na <select>začetni videz in ne morejo spremeniti <option>s zaradi omejitev brskalnika.

<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>

Izbirate lahko tudi med majhnimi in velikimi izbirami po meri, ki ustrezajo našim vnosom besedila podobne velikosti.

<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>

Podprt je tudi multipleatribut:

<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>

Tako kot 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>

Razpon

Ustvarite <input type="range">kontrole po meri z .custom-range. Skladba (ozadje) in palec (vrednost) sta oblikovana tako, da sta videti enako v vseh brskalnikih. Ker samo IE in Firefox podpirata "polnjenje" njihove sledi z levega ali desnega roba palca kot sredstvo za vizualno označevanje napredka, tega trenutno ne podpiramo.

Primer obsega

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Vhodi obsega imajo implicitne vrednosti za minin max— 0oziroma 100. Določite lahko nove vrednosti za tiste, ki uporabljajo atribute minin .max

Primer obsega

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Privzeto se vhodi obsega »pripnejo« na celoštevilske vrednosti. Če želite to spremeniti, lahko določite stepvrednost. V spodnjem primeru podvojimo število korakov z uporabo step="0.5".

Primer obsega

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Brskalnik datotek

Priporočeni vtičnik za animiranje vnosa datoteke po meri: bs-custom-file-input , to je tisto, kar trenutno uporabljamo tukaj v naših dokumentih.

Datotečni vnos je najbolj zapleten v skupini in zahteva dodaten JavaScript, če jih želite povezati s funkcionalnim Izberite datoteko ... in izbranim besedilom imena datoteke.

Izberite datoteko

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Privzeto datoteko skrijemo <input>prek opacityin namesto tega oblikujemo <label>. Gumb je ustvarjen in postavljen z ::after. Nazadnje razglasimo widthin heightna <input>za ustrezen razmik za okoliško vsebino.

Prevajanje ali prilagajanje nizov s SCSS

Psevdorazred :lang()se uporablja za omogočanje prevoda besedila »Prebrskaj« v druge jezike. Preglasite ali dodajte vnose v $custom-file-textspremenljivko Sass z ustrezno jezikovno oznako in lokaliziranimi nizi. Angleške nize je mogoče prilagoditi na enak način. Na primer, tukaj je opisano, kako lahko dodate španski prevod (jezikovna koda španščine je es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Tukaj je lang(es)v akciji vnos datoteke po meri za španski prevod:

Seleccionar Archivo

<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>

Pravilno boste morali nastaviti jezik dokumenta (ali njegovega poddrevesa), da bo prikazano pravilno besedilo. To lahko med drugimi metodami storite z uporabo atributa elementa langali<html> glave Content-LanguageHTTP .

Prevajanje ali prilagajanje nizov s HTML

Bootstrap ponuja tudi način za prevajanje besedila »Prebrskaj« v HTML z data-browseatributom, ki ga je mogoče dodati oznaki vnosa po meri (primer v nizozemščini):

Voeg je dokument toe

<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>

Obrazci

Pregled

Kontrolniki obrazca

Dimenzioniranje

Le za branje

Navadno besedilo samo za branje

Vhodi obsega

Potrditvena polja in radijski sprejemniki

Privzeto (naloženo)

V vrsti

Brez nalepk

Postavitev

Oblikujte skupine

Mreža obrazca

Oblikujte vrstico

Horizontalna oblika

Dimenzioniranje etikete vodoravne oblike

Velikost stolpca

Samodejno določanje velikosti

Inline obrazci

Alternative za skrite oznake

Besedilo pomoči

Povezovanje besedila pomoči s kontrolniki obrazca

Onemogočeni obrazci

Opozorilo s sidri

Združljivost med brskalniki

Validacija

Preverjanje vnosne skupine

Kako deluje

Slogi po meri

Privzete nastavitve brskalnika

Strežniška stran

Podprti elementi

Namigi orodij

Prilagajanje

Rešitev za preverjanje veljavnosti vnosne skupine

Obrazci po meri

Potrditvena polja in radijski sprejemniki

Potrditvena polja

Radijski sprejemniki

V vrsti

Onemogočeno

Stikala

Izberite meni

Razpon

Brskalnik datotek

Prevajanje ali prilagajanje nizov s SCSS

Prevajanje ali prilagajanje nizov s HTML