Source

Eyðublöð

Dæmi og notkunarleiðbeiningar fyrir eyðublaðastýringarstíla, útlitsvalkosti og sérsniðna íhluti til að búa til fjölbreytt úrval eyðublaða.

Yfirlit

Formstýringar Bootstrap stækka við endurræst formstíla okkar með flokkum. Notaðu þessa flokka til að velja sérsniðna skjái til að fá samkvæmari birtingu á milli vafra og tækja.

Vertu viss um að nota viðeigandi typeeiginleika á öllum innsendum (td emailfyrir netfang eða numberfyrir tölulegar upplýsingar) til að nýta nýrri innsláttarstýringar eins og staðfestingu tölvupósts, númeraval og fleira.

Hér er fljótlegt dæmi til að sýna fram á formstíl Bootstrap. Haltu áfram að lesa til að fá skjöl um nauðsynlega flokka, uppsetningu eyðublaða og fleira.

Við munum aldrei deila tölvupóstinum þínum með öðrum. 
<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>

Formstýringar

Textaformstýringar - eins og <input>s, <select>s og <textarea>s - eru stílaðar með .form-controlbekknum. Innifalið eru stíll fyrir almennt útlit, fókusstöðu, stærð og fleira.

Vertu viss um að skoða sérsniðin eyðublöð okkar til að auka stíl <select>s.

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

Fyrir skráarinntak skaltu skipta um .form-controlfyrir .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>

Stærð

Stilltu hæðir með því að nota flokka eins .form-control-lgog og .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>

Lesið aðeins

Bættu readonlyboolean eigindinni við inntak til að koma í veg fyrir breytingar á gildi inntaksins. Lesinntak virðist léttari (alveg eins og óvirkt inntak), en heldur venjulegum bendili.

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

Skrifvarinn venjulegur texti

Ef þú vilt hafa <input readonly>þætti á eyðublaðinu þínu stílaða sem venjulegan texta, notaðu .form-control-plaintextflokkinn til að fjarlægja sjálfgefna formreitsnið og varðveita rétta spássíu og fyllingu.

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

Range-inntak

Stilltu lárétt skrunanleg sviðsinntak með því að nota .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>

Gátreitir og útvarp

Sjálfgefin gátreitir og útvarpstæki eru endurbætt með hjálp .form-checkeins flokks fyrir báðar inntakstegundir sem bætir útlit og hegðun HTML þátta þeirra . Gátreitir eru til að velja einn eða fleiri valmöguleika á lista, en útvarp eru til að velja einn valmöguleika af mörgum.

Óvirkir gátreiti og útvarp eru studd. Eigindin disabledmun beita ljósari lit til að gefa til kynna stöðu inntaksins.

Gátreitir og valhnappar styðja HTML-undirstaða löggildingu eyðublaða og veita hnitmiðaða, aðgengilega merkimiða. Sem slík eru <input>s og <label>s systkinaþættir öfugt við <input>innan <label>. Þetta er örlítið orðrétt þar sem þú verður að tilgreina idog foreiginleika til að tengja <input>og <label>.

Sjálfgefið (staflað)

Sjálfgefið er að hvaða fjölda gátreita og útvarpsstöðva sem eru strax systkini verða lóðrétt staflað og á viðeigandi bili með .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>

Í línu

Flokkaðu gátreiti eða útvarpstæki í sömu láréttu röðina með því að bæta .form-check-inlinevið hvaða .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>

Án merkimiða

Bæta .position-staticvið inntak innan .form-checksem eru ekki með neinn merkitexta. Mundu að gefa samt upp einhvers konar merki fyrir hjálpartækni (til dæmis með því að nota 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>

Skipulag

Þar sem Bootstrap á við display: blockog width: 100%fyrir næstum allar formstýringar okkar munu eyðublöð sjálfgefið stafla lóðrétt. Hægt er að nota fleiri flokka til að breyta þessu skipulagi eftir formi.

Myndaðu hópa

Bekkurinn .form-grouper auðveldasta leiðin til að bæta einhverri uppbyggingu við form. Það býður upp á sveigjanlegan flokk sem hvetur til réttrar flokkunar merkimiða, stýringa, valfrjáls hjálpartexta og eyðublaðsstaðfestingarskilaboða. Sjálfgefið gildir það aðeins margin-bottom, en það tekur upp viðbótarstíla .form-inlineeftir þörfum. Notaðu það með <fieldset>s, <div>s eða næstum hvaða öðrum þáttum sem er.

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

Myndaðu rist

Hægt er að búa til flóknari form með því að nota grid flokkana okkar. Notaðu þetta fyrir eyðublaðaútlit sem krefjast margra dálka, fjölbreyttrar breiddar og viðbótarjöfnunarvalkosta.

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

Myndaröð

Þú getur líka skipt út .rowfyrir .form-row, afbrigði af stöðluðu línunetslínunni okkar sem hnekkir sjálfgefnum dálkarrennum fyrir þéttari og þéttari skipulag.

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

Einnig er hægt að búa til flóknari skipulag með ristkerfinu.

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

Lárétt form

Búðu til lárétt eyðublöð með hnitanetinu með því að bæta .rowbekknum við mynda hópa og nota .col-*-*flokkana til að tilgreina breidd merkimiða og stýringa. Gakktu úr skugga um að bæta .col-form-labelvið <label>s þínum líka svo þau séu lóðrétt í miðju með tilheyrandi formstýringum.

Stundum þarftu kannski að nota spássíu- eða fyllingartæki til að búa til þá fullkomnu röðun sem þú þarft. Til dæmis höfum við fjarlægt padding-topmerkimiðann á staflaða útvarpsinntakinu okkar til að samræma grunnlínuna betur.

Útvarpstæki
Gátreitur 
<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>
Lárétt stærð merkimiða

Vertu viss um að nota .col-form-label-smeða .col-form-label-lgvið <label>s eða <legend>s til að fylgja réttri stærð .form-control-lgog .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>

Stærð súlu

Eins og sýnt er í fyrri dæmum, gerir netkerfi okkar þér kleift að setja hvaða fjölda .cols sem er innan a .roweða .form-row. Þeir munu skipta tiltækri breidd jafnt á milli sín. Þú getur líka valið hlutmengi af dálkunum þínum til að taka meira eða minna pláss, en hinir dálkarnir .colskipta jafnt afganginum, með sérstökum dálkaflokkum eins og .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>

Sjálfvirk stærð

Dæmið hér að neðan notar flexbox tól til að miðja innihaldið lóðrétt og breytist .colþannig .col-autoað dálkarnir þínir taka aðeins eins mikið pláss og þarf. Með öðrum hætti, dálkurinn stærðir sig sjálfan út frá innihaldi.

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

Þú getur síðan endurblandað það aftur með stærðarsértækum dálkaflokkum.

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

Og auðvitað eru sérsniðnar formstýringar studdar.

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

Innbyggð eyðublöð

Notaðu .form-inlinebekkinn til að sýna röð af merkjum, eyðublaðastýringum og hnöppum á einni láréttri röð. Eyðublaðastýringar innan innbyggðra eyðublaða eru örlítið frábrugðnar sjálfgefnum stöðu þeirra.

  • Stýringar eru display: flex, draga saman hvaða HTML hvíta bil sem er og leyfa þér að veita jöfnunarstýringu með bili og flexbox tólum.
  • Stýringar og inntakshópar fá width: autotil að hnekkja sjálfgefnu Bootstrap width: 100%.
  • Stýringar birtast aðeins innbyggðar í útsýnisgluggum sem eru að minnsta kosti 576px á breidd til að taka tillit til þröngra útsýnisgátta í fartækjum.

Þú gætir þurft að takast á handvirkt við breidd og röðun einstakra eyðublaðastýringa með biltólum (eins og sýnt er hér að neðan). Að lokum, vertu viss um að hafa alltaf a <label>með hverri eyðublaðastýringu, jafnvel þótt þú þurfir að fela það fyrir gestum sem ekki eru skjálesarar með .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>

Sérsniðnar formstýringar og val eru einnig studd.

<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>
Val við falin merki

Hjálpartækni eins og skjálesarar munu eiga í vandræðum með eyðublöðin þín ef þú hefur ekki merkimiða fyrir hvert inntak. Fyrir þessi innbyggðu eyðublöð geturðu falið merkimiðana með því að nota .sr-onlybekkinn. Það eru aðrar aðrar aðferðir til að útvega merki fyrir hjálpartækni, svo sem aria-label, aria-labelledbyeða titleeigindina. Ef ekkert af þessu er til staðar gæti hjálpartækni gripið til þess að nota placeholdereiginleikann, ef hann er til staðar, en athugaðu að placeholderekki er mælt með því að nota það í staðinn fyrir aðrar merkingaraðferðir.

Hjálpartexti

Hægt er að búa til hjálpartexta á blokkum á eyðublöðum með því að nota .form-text(áður þekkt sem .help-blockí v3). Hægt er að útfæra innbyggða hjálpartexta á sveigjanlegan hátt með því að nota hvaða innbyggða HTML frumefni og gagnsemisflokka eins og .text-muted.

Að tengja hjálpartexta við formstýringar

Hjálpartexti ætti að vera sérstaklega tengdur við formstýringuna sem hann tengist með því að nota aria-describedbyeigindina. Þetta mun tryggja að hjálpartækni – eins og skjálesarar – tilkynni þennan hjálpartexta þegar notandinn einbeitir sér eða fer inn í stýringuna.

Hægt er að stilla hjálpartexta fyrir neðan inntak með .form-text. Þessi flokkur inniheldur display: blockog bætir við nokkrum efstu framlegð til að auðvelda bilið frá inntakunum hér að ofan.

Lykilorðið þitt verður að vera 8-20 stafir að lengd, innihalda bókstafi og tölustafi og má ekki innihalda bil, sérstafi eða emoji. 
<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>

Innbyggður texti getur notað hvaða dæmigerða innbyggða HTML frumefni (hvort sem það er <small>, <span>, eða eitthvað annað) með ekkert annað en gagnsemisflokk.

Verður að vera 8-20 stafir að lengd. 
<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>

Óvirk eyðublöð

Bættu disabledboolean eigindinni við inntak til að koma í veg fyrir samskipti notenda og láta það virðast léttara.

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

Bættu disabledeigindinni við a <fieldset>til að slökkva á öllum stjórntækjum innan.

<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>
Fyrirvari með akkerum

Sjálfgefið er að vafrar meðhöndla allar innbyggðar formstýringar ( <input>, <select>og <button>þættir) inni í a <fieldset disabled>sem óvirka, sem kemur í veg fyrir samskipti bæði með lyklaborði og mús á þeim. Hins vegar, ef eyðublaðið þitt inniheldur einnig <a ... class="btn btn-*">þætti, munu þessir aðeins fá stíllinn pointer-events: none. Eins og fram kemur í hlutanum um óvirkt ástand fyrir hnappa (og sérstaklega í undirkaflanum fyrir akkerisþætti), er þessi CSS eign ekki enn staðlað og er ekki að fullu studd í Internet Explorer 10 og mun ekki koma í veg fyrir að lyklaborðsnotendur séu fær um að einbeita sér eða virkja þessa tengla. Svo til öryggis skaltu nota sérsniðið JavaScript til að slökkva á slíkum hlekkjum.

Samhæfni milli vafra

Þó að Bootstrap muni beita þessum stílum í öllum vöfrum, styðja Internet Explorer 11 og neðar ekki að fullu disabledeiginleikann á <fieldset>. Notaðu sérsniðið JavaScript til að slökkva á reitsettinu í þessum vöfrum.

Staðfesting

Gefðu notendum þínum verðmæta og hagnýta endurgjöf með HTML5 eyðublaði – fáanlegt í öllum studdum vöfrum okkar . Veldu úr sjálfgefnum staðfestingarviðbrögðum vafrans, eða settu í notkun sérsniðin skilaboð með innbyggðum flokkum okkar og byrjunar-JavaScript.

Eins og er mælum við með því að nota sérsniðna staðfestingarstíl, þar sem sjálfgefin staðfestingarskilaboð í innfæddum vafra eru ekki stöðugt útsett fyrir hjálpartækni í öllum vöfrum (einkum Chrome á skjáborði og farsímum).

Hvernig það virkar

Svona virkar formprófun með Bootstrap:

  • Staðfestingu HTML forms er beitt í gegnum tvo gerviflokka CSS :invalidog :valid. Það á við um <input>, <select>, og <textarea>þætti.
  • Bootstrap nær yfir :invalidog :validstíla í foreldraflokk .was-validated, venjulega notað á <form>. Annars birtast allir nauðsynlegir reitir án gildis sem ógildir við hleðslu síðu. Þannig geturðu valið hvenær þú vilt virkja þau (venjulega eftir að reynt er að senda inn eyðublað).
  • Til að endurstilla útlit eyðublaðsins (til dæmis ef um er að ræða kraftmikla innsendingar eyðublaða með AJAX), fjarlægðu .was-validatedbekkinn úr <form>aftur eftir innsendingu.
  • Sem varaflokkur .is-invalidog .is-validhægt er að nota flokka í stað gerviflokka fyrir staðfestingu á netþjóni . Þeir þurfa ekki .was-validatedforeldraflokk.
  • Vegna takmarkana á því hvernig CSS virkar, getum við (sem stendur) ekki beitt stílum á a <label>sem kemur á undan formstýringu í DOM án hjálpar sérsniðins JavaScript.
  • Allir nútíma vafrar styðja þvingunarprófunar-API , röð JavaScript-aðferða til að staðfesta formstýringar.
  • Ábendingaskilaboð kunna að nota sjálfgefnar stillingar vafrans (mismunandi fyrir hvern vafra og óstílfærðar í gegnum CSS) eða sérsniðna endurgjöfarstíla okkar með viðbótar HTML og CSS.
  • Þú getur útvegað sérsniðin gildisskilaboð með setCustomValidityJavaScript.

Með það í huga skaltu íhuga eftirfarandi kynningar fyrir sérsniðna löggildingarstíla okkar, valfrjálsa miðlaraflokka og sjálfgefna vafra.

Sérsniðin stíll

Fyrir sérsniðin staðfestingarskilaboð fyrir Bootstrap form þarftu að bæta novalidateboolean eigindinni við <form>. Þetta slekkur á sjálfgefnum ábendingum um endurgjöf vafrans, en veitir samt aðgang að eyðublaðaprófunarforritaskilum í JavaScript. Reyndu að senda inn eyðublaðið hér að neðan; JavaScript okkar mun stöðva sendingarhnappinn og senda endurgjöf til þín. Þegar þú reynir að senda inn, muntu sjá :invalidog :validstíll notaður á eyðublaðastýringum þínum.

Sérsniðin endurgjöfarstíll notar sérsniðna liti, ramma, fókusstíla og bakgrunnstákn til að miðla endurgjöfum betur. Bakgrunnstákn fyrir <select>s eru aðeins fáanleg með .custom-select, og ekki .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>

Sjálfgefnar stillingar vafra

Hefurðu ekki áhuga á sérsniðnum staðfestingarskilaboðum eða að skrifa JavaScript til að breyta hegðun eyðublaða? Allt í góðu, þú getur notað sjálfgefnar stillingar vafrans. Prófaðu að senda inn eyðublaðið hér að neðan. Það fer eftir vafranum þínum og stýrikerfi, þú munt sjá aðeins mismunandi stíl af endurgjöf.

Þó að ekki sé hægt að stíla þessa endurgjöf með CSS, geturðu samt sérsniðið endurgjöfartextann í gegnum JavaScript.

@ 
<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 hlið

Við mælum með því að nota sannprófun viðskiptavinarhliðar, en ef þú þarfnast staðfestingar á netþjóni geturðu gefið til kynna ógilda og gilda eyðublaðareiti með .is-invalidog .is-valid. Athugaðu að það .invalid-feedbacker einnig stutt með þessum flokkum.

Lítur vel út!
Lítur vel út!
@
Vinsamlegast veldu notendanafn.
Vinsamlegast gefðu upp gilda borg.
Vinsamlegast veldu gilt ástand.
Vinsamlegast gefðu upp gilt zip.
Þú verður að samþykkja áður en þú sendir inn. 
<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>

Stuðningsþættir

Staðfestingarstílar eru fáanlegir fyrir eftirfarandi formstýringar og íhluti:

  • <input>s og <textarea>s með .form-control(þar á meðal allt að einn .form-controlí inntakshópum)
  • <select>s með .form-controleða.custom-select
  • .form-checks
  • .custom-checkboxs og .custom-radios
  • .custom-file
Vinsamlega sláðu inn skilaboð í textasvæðið.
Dæmi um ógildan endurgjöfartexta
Meira dæmi um ógildan endurgjöfartexta
Dæmi um ógild endurgjöf fyrir sérsniðið val
Dæmi um ógild sérsniðin endurgjöf á skrá 
<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>

Verkfæraráð

Ef útlit eyðublaðsins þíns leyfir það geturðu skipt um .{valid|invalid}-feedbackflokka fyrir .{valid|invalid}-tooltipflokka til að birta staðfestingarviðbrögð í stíluðum verkfæraleiðbeiningum. Vertu viss um að hafa foreldri með position: relativeá því til að staðsetja tól. Í dæminu hér að neðan eru dálkaflokkarnir okkar með þetta nú þegar, en verkefnið þitt gæti þurft aðra uppsetningu.

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>

Sérsníða

Hægt er að aðlaga löggildingarstöðu í gegnum Sass með $form-validation-stateskortinu. Þetta Sass kort er staðsett í skránni okkar _variables.scssog er lykkjuð yfir til að búa til sjálfgefna valid/ invalidstaðfestingarstöðu. Innifalið er hreiður kort til að sérsníða lit og tákn hvers ríkis. Þó að engin önnur ríki séu studd af vöfrum, geta þeir sem nota sérsniðna stíl auðveldlega bætt við flóknari endurgjöf.

Vinsamlegast athugaðu að við mælum ekki með því að sérsníða þessi gildi án þess að breyta líka form-validation-stateblöndunni.

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

Sérsniðin eyðublöð

Til að sérsníða enn frekar og samkvæmni þvert yfir vafra skaltu nota algjörlega sérsniðna eyðublaðseiningar okkar til að skipta út sjálfgefnum vafrastillingum. Þau eru byggð ofan á merkingarfræðilegri og aðgengilegri merkingu, svo þau koma í staðin fyrir hvaða sjálfgefna formstýringu sem er.

Gátreitir og útvarp

Hver gátreitur og útvarp <input>og <label>pörun er pakkað inn í <div>til að búa til sérsniðna stjórnun okkar. Skipulega séð er þetta sama nálgun og sjálfgefið okkar .form-check.

Við notum systkinavalið ( ~) fyrir öll <input>fylki okkar - eins og :checked- til að stilla sérsniðna eyðublaðið okkar rétt. Þegar það er sameinað .custom-control-labelbekknum getum við líka stílað textann fyrir hvert atriði út frá <input>ástandinu 's.

Við felum sjálfgefið <input>með opacityog notum til .custom-control-labelað búa til nýjan sérsniðna eyðublaðsvísi í staðinn með ::beforeog ::after. Því miður getum við ekki smíðað sérsniðna af <input>því að CSS contentvirkar ekki á þeim þætti.

Í merktum ríkjum notum við base64 innbyggð SVG tákn frá Open Iconic . Þetta veitir okkur bestu stjórnina fyrir stíl og staðsetningu milli vafra og tækja.

Gátreitir

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

Sérsniðnir gátreitir geta einnig notað :indeterminategerviflokkinn þegar hann er stilltur handvirkt í gegnum JavaScript (engin HTML eiginleiki er tiltækur til að tilgreina hann).

Ef þú ert að nota jQuery ætti eitthvað eins og þetta að duga:

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

Útvarpstæki

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

Í línu

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

Öryrkjar

Einnig er hægt að slökkva á sérsniðnum gátreitum og útvörpum. Bættu disabledboolean eigindinni við <input>og sérsniðinn vísir og merkimiðalýsing verður sjálfkrafa stíluð.

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

Rofar

Rofi hefur merkingu sérsniðins gátreits en notar .custom-switchflokkinn til að gera skiptirofa. Rofar styðja einnig disabledeiginleikann.

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

Veldu valmynd

Sérsniðnar <select>valmyndir þurfa aðeins sérsniðinn flokk .custom-selecttil að kveikja á sérsniðnum stílum. Sérsniðnar stílar takmarkast við <select>upphaflegt útlit og geta ekki breytt <option>s vegna takmarkana vafra.

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

Þú getur líka valið úr litlum og stórum sérsniðnum valkostum til að passa við textainnslátt okkar í svipaðri stærð.

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

Eigindin multipleer einnig studd:

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

Eins er sizeeiginleiki:

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

Svið

Búðu til sérsniðnar <input type="range">stýringar með .custom-range. Lagið (bakgrunnurinn) og þumalfingur (gildið) eru báðir stílaðir til að birtast eins í vöfrum. Þar sem aðeins IE og Firefox styðja að „fylla“ lag sitt frá vinstri eða hægri á þumalfingri sem leið til að sýna framfarir sjónrænt styðjum við það ekki eins og er.

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

Sviðsinntak hafa óbein gildi fyrir minog max— 0og 100, í sömu röð. Þú getur tilgreint ný gildi fyrir þá sem nota minog maxeiginleikana.

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

Sjálfgefið er að sviðsinntak "smella" við heiltölugildi. Til að breyta þessu geturðu tilgreint stepgildi. Í dæminu hér að neðan tvöföldum við fjölda skrefa með því að nota step="0.5".

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

Skráavafri

Viðbótin sem mælt er með til að lífga sérsniðið skráarinntak: bs-custom-file-input , það er það sem við erum að nota núna hér í skjölunum okkar.

Skráarinnslátturinn er snjallastur af hópnum og krefst viðbótar JavaScript ef þú vilt tengja þau við virka Veldu skrá ... og valinn texta skráarheita.

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

Við felum sjálfgefna skrána <input>í gegnum opacityog stílum í staðinn <label>. Hnappurinn er búinn til og staðsettur með ::after. Að lokum lýsum við yfir a widthog heightá <input>fyrir rétt bil fyrir nærliggjandi efni.

Þýða eða sérsníða strengina með SCSS

Gerviflokkurinn :lang()er notaður til að leyfa þýðingu á „Browse“ textanum á önnur tungumál. Hneka eða bæta við færslum við $custom-file-textSass breytuna með viðeigandi tungumálamerki og staðfærðum strengjum. Ensku strengina er hægt að aðlaga á sama hátt. Til dæmis, hér er hvernig hægt er að bæta við spænskri þýðingu (tungumálakóði spænsku er es):

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

Hér er lang(es)í aðgerð á sérsniðnu skráarinntaki fyrir spænska þýðingu:

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

Þú þarft að stilla tungumál skjalsins þíns (eða undirtré þess) rétt til að réttur texti birtist. Þetta er hægt að gera með því að nota langeigindina á <html>frumefninu eða Content-LanguageHTTP hausnum , meðal annarra aðferða.

Þýða eða sérsníða strengina með HTML

Bootstrap býður einnig upp á leið til að þýða „Browse“ textann í HTML með data-browseeigindinni sem hægt er að bæta við sérsniðna inntaksmerkið (dæmi á hollensku):

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