in English

Formulieren

Foarbylden en gebrûksrjochtlinen foar formulierkontrôlestilen, opmaakopsjes en oanpaste komponinten foar it meitsjen fan in breed ferskaat oan formulieren.

Oersicht

De foarmkontrôles fan Bootstrap wreidzje út op ús Rebooted foarmstilen mei klassen. Brûk dizze klassen om te kiezen foar har oanpaste byldskermen foar in mear konsekwinte werjefte oer browsers en apparaten.

Wês wis dat jo in passend typeattribút brûke op alle ynputs (bygelyks emailfoar e-mailadres of numberfoar numerike ynformaasje) om foardiel te meitsjen fan nijere ynfierkontrôles lykas e-postferifikaasje, nûmerseleksje, en mear.

Hjir is in fluch foarbyld om de foarmstilen fan Bootstrap te demonstrearjen. Bliuw lêze foar dokumintaasje oer fereaske klassen, foarmyndieling, en mear.

Wy sille jo e-post nea diele mei in oar. 
<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>

Form kontrôles

Tekstfoarmkontrôles - lykas <input>s, <select>s en <textarea>s - wurde stylearre mei de .form-controlklasse. Ynbegrepen binne stilen foar algemiene uterlik, fokusstatus, maat, en mear.

Wês wis te ferkennen ús oanpaste foarmen om fierder styl <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>

Foar triem-ynfier, ruilje de .form-controlfoar .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>

Sizing

Stel hichten yn mei klassen lykas .form-control-lgen .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>

Allinnich lêze

Foegje it readonlyBooleaanske attribút ta oan in ynfier om wiziging fan 'e wearde fan' e ynfier te foarkommen. Allinnich-lês-ynputs ferskine lichter (krekt as útskeakele yngongen), mar behâlde de standert rinnerke.

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

Allinnich lêzen platte tekst

As jo <input readonly>​​eleminten yn jo formulier stylearre hawwe wolle as platte tekst, brûk dan de .form-control-plaintextklasse om de standert formulierfjildstyling te ferwiderjen en de juste marzje en padding te behâlden.

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

Stel horizontaal scrollbere berik-ynputen yn mei .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>

Checkboxes en radio's

Standert karfakjes en radio's wurde ferbettere mei help fan .form-check, ien klasse foar beide ynfiertypen dy't de yndieling en gedrach fan har HTML-eleminten ferbetteret . Checkboxes binne foar it selektearjen fan ien of meardere opsjes yn in list, wylst radio's binne foar it selektearjen fan ien opsje út in protte.

Utskeakele karfakjes en radio's wurde stipe. It disabledattribút sil in lichtere kleur tapasse om de steat fan 'e ynfier oan te jaan.

Checkboxes en radio-knoppen stypje HTML-basearre formuliervalidaasje en jouwe beknopte, tagonklike labels. As sadanich binne ús <input>s en <label>s sibling-eleminten yn tsjinstelling ta in <input>binnen in <label>. Dit is wat mear verbose as jo moatte opjaan iden forattributen om te relatearjen de <input>en <label>.

Standert (steapele)

Standert sil elk oantal karfakjes en radio's dy't direkte sibling binne fertikaal steapele wurde en op passende ôfstân mei .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>

Ynline

Groepearje karfakjes as radio's op deselde horizontale rige troch ta te foegjen .form-check-inlineoan elke .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>

Sûnder labels

Taheakje .position-staticoan ynputs binnen .form-checkdy't gjin labeltekst hawwe. Unthâld om noch in foarm fan tagonklike namme te jaan foar assistinte technologyen (bygelyks mei 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>

Opmaak

Sûnt Bootstrap jildt display: blocken width: 100%foar hast al ús formulierkontrôles, sille formulieren standert fertikaal steapele wurde. Oanfoljende klassen kinne brûkt wurde om dizze yndieling per formulier te feroarjen.

Formearje groepen

De .form-groupklasse is de maklikste manier om wat struktuer ta te foegjen oan formulieren. It biedt in fleksibele klasse dy't in goede groepearring fan etiketten, kontrôles, opsjonele helptekst en formuliervalidaasjeberjochten stimulearret. Standert jildt it allinich margin-bottom, mar it pakt ekstra stilen yn .form-inlineas nedich. Brûk it mei <fieldset>s, <div>s, of hast elk oar elemint.

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

Raster foarmje

Mear komplekse foarmen kinne wurde boud mei ús rasterklassen. Brûk dizze foar formulierlayouts dy't meardere kolommen, farieare breedtes en ekstra ôfstimmingsopsjes nedich binne.

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

Formearje rige

Jo kinne ek ruilje .rowfoar .form-row, in fariaasje fan ús standert rasterrige dy't de standert kolomgoaten oerskriuwt foar strakkere en kompakter opmaak.

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

Mear komplekse yndielingen kinne ek makke wurde mei it rastersysteem.

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

Horizontale foarm

Meitsje horizontale formulieren mei it raster troch de .rowklasse ta te foegjen om groepen te foarmjen en de .col-*-*klassen te brûken om de breedte fan jo labels en kontrôles op te jaan. Wês wis dat jo ek tafoegje .col-form-labeloan jo <label>s, sadat se fertikaal sintraal binne mei har assosjearre formulierkontrôles.

Soms moatte jo miskien marzje- of padding-hulpprogramma's brûke om dy perfekte ôfstimming te meitsjen dy't jo nedich binne. Wy hawwe bygelyks it padding-toplabel op ús opsteapele radio-ynputen fuortsmiten om de tekstbasisline better op te rjochtsjen.

Radios
Checkbox 
<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>
Horizontale foarm label sizing

Wês wis dat jo .col-form-label-smof .col-form-label-lgnei jo <label>s of <legend>s brûke om de grutte fan .form-control-lgen korrekt te folgjen .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>

Kolom grutte

Lykas yn 'e foargeande foarbylden sjen litten, lit ús rastersysteem jo elk oantal .cols binnen in .rowof pleatse .form-row. Se sille de beskikbere breedte gelyk tusken har splitse. Jo kinne ek in subset fan jo kolommen kieze om mear of minder romte yn te nimmen, wylst de oerbleaune .cols de rest lykweardich splitst, mei spesifike kolomklassen lykas .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing

It foarbyld hjirûnder brûkt in flexbox-helpmiddel om de ynhâld fertikaal te centreren en te feroarjen .colsadat .col-autojo kolommen allinich safolle romte ynnimme as nedich. Mei oare wurden, de kolom grutte sels basearre op de ynhâld.

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

Jo kinne dat dan nochris remixe mei grutte-spesifike kolomklassen.

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

En fansels wurde oanpaste foarmkontrôles stipe.

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

Brûk de .form-inlineklasse om in searje labels, formulierkontrôles en knoppen op ien horizontale rige te werjaan. Formkontrôles binnen ynline formulieren fariearje in bytsje fan har standert steaten.

  • Kontrôles binne display: flex, it ynstoarten fan elke HTML-wytromte en kinne jo ôfstimmingskontrôle leverje mei spacing- en flexbox- hulpprogramma's.
  • Kontrôles en ynfiergroepen ûntfange width: autoom de Bootstrap-standert te oerskriuwen width: 100%.
  • Kontrôles ferskine allinich ynline yn viewports dy't op syn minst 576px breed binne om rekken te hâlden mei smelle viewports op mobile apparaten.

Jo moatte miskien de breedte en ôfstimming fan yndividuele formulierkontrôles manuell oanpakke mei spacing-helpprogramma's (lykas hjirûnder werjûn). As lêste, wês wis dat jo altyd in opnimme <label>mei elke formulierkontrôle, sels as jo it moatte ferbergje foar besikers mei net-skermlêzers mei .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>

Oanpaste formulierkontrôles en seleksjes wurde ek stipe.

<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>
Alternativen foar ferburgen labels

Helpjende technologyen lykas skermlêzers sille problemen hawwe mei jo formulieren as jo gjin label foar elke ynfier opnimme. Foar dizze ynline formulieren kinne jo de labels ferbergje mei de .sr-onlyklasse. D'r binne fierdere alternative metoaden foar it leverjen fan in label foar assistinte technologyen, lykas de aria-label, aria-labelledbyof titleattribút. As net ien fan dizze oanwêzich is, kinne assistinte technologyen taflecht ta it brûken fan it placeholderattribút, as oanwêzich, mar tink derom dat it gebrûk fan placeholderas ferfanging foar oare etiketteringmetoaden net wurdt oanret.

Helptekst

Helptekst op bloknivo yn formulieren kin makke wurde mei .form-text(earder bekend as .help-blockyn v3). Inline helptekst kin fleksibel ymplementearre wurde mei elk ynline HTML-elemint en nutklassen lykas .text-muted.

Helptekst assosjearje mei formulierkontrôles

Helptekst moat eksplisyt ferbûn wurde mei de formulierkontrôle dy't it relatearret oan it brûken fan it aria-describedbyattribút. Dit sil derfoar soargje dat assistinte technologyen - lykas skermlêzers - dizze helptekst oankundigje as de brûker him rjochtet of de kontrôle yngiet.

Helptekst ûnder yngongen kin wurde stylearre mei .form-text. Dizze klasse omfettet display: blocken foeget wat topmarge ta foar maklike ôfstân fan 'e yngongen hjirboppe.

Jo wachtwurd moat 8-20 tekens lang wêze, letters en sifers befetsje, en moat gjin spaasjes, spesjale tekens of emoji befetsje. 
<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>

Inline-tekst kin elk typysk ynline HTML-elemint brûke (of it no in <small>, <span>, of wat oars is) mei neat mear as in nutklasse.

Moat 8-20 tekens lang wêze. 
<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>

Utskeakele formulieren

Foegje it disabledBooleaanske attribút ta oan in ynfier om ynteraksjes mei brûkers te foarkommen en it ljochter te meitsjen.

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

Foegje it disabledattribút oan in <fieldset>om alle kontrôles binnen út te skeakeljen.

<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>
Caveat mei ankers

Blêders behannelje alle native foarmkontrôles ( <input>, <select>, en <button>eleminten) binnen in <fieldset disabled>as útskeakele, en foarkomme sawol toetseboerd as mûs ynteraksjes op har.

As jo ​​formulier lykwols ek oanpaste knop-like eleminten omfettet, lykas <a ... class="btn btn-*">, krije dizze allinich in styl fan pointer-events: none. Lykas oanjûn yn 'e seksje oer útskeakele tastân foar knoppen (en spesifyk yn' e ûnderseksje foar anker-eleminten), is dizze CSS-eigenskip noch net standerdisearre en wurdt net folslein stipe yn Internet Explorer 10. De anker-basearre kontrôles sille ek noch wêze fokusber en te betsjinjen mei it toetseboerd. Jo moatte dizze kontrôles manuell wizigje troch ta te foegjen tabindex="-1"om foar te kommen dat se fokus krije en aria-disabled="disabled"har steat oan assistive technologyen sinjalearje.

Cross-browser kompatibiliteit

disabledWylst Bootstrap dizze stilen sil tapasse yn alle browsers, stypje Internet Explorer 11 en hjirûnder it attribút net folslein op in <fieldset>. Brûk oanpaste JavaScript om de fjildset yn dizze browsers út te skeakeljen.

Validaasje

Jou weardefolle, aksjebere feedback oan jo brûkers mei HTML5-formuliervalidaasje - beskikber yn al ús stipe browsers . Kies út de standert falidaasjefeedback fan 'e browser, of ymplementearje oanpaste berjochten mei ús ynboude klassen en JavaScript foar starters.

Wy binne ús bewust dat op it stuit de oanpaste falidaasjestilen en tooltips op it stuit net tagonklik binne, om't se net bleatsteld binne oan assistinte technologyen. Wylst wy oan in oplossing wurkje, riede wy oan om de opsje oan 'e serverkant te brûken of de standertmetoade foar blêdervalidaasje.

Ynput groep falidaasje

Ynput groepen hawwe muoite mei falidaasje stilen, spitigernôch. Us oanbefelling is om feedbackberjochten te pleatsen as sibling-eleminten fan 'e .input-groupdat hat .is-{valid|invalid}. It pleatsen fan feedbackberjochten binnen ynfiergroepen brekt de border-radius. Sjoch dizze oplossing .

Hoe't it wurket

Hjir is hoe't formuliervalidaasje wurket mei Bootstrap:

  • HTML-formuliervalidaasje wurdt tapast fia de twa pseudoklassen fan CSS, :invaliden :valid. It jildt foar <input>, <select>, en <textarea>eleminten.
  • Bootstrap scopes de :invaliden :validstilen oan âlder .was-validatedklasse, meastal tapast op de <form>. Oars wurdt elk fereaske fjild sûnder in wearde te sjen as ûnjildich by sideladen. Op dizze manier kinne jo kieze wannear't jo se aktivearje wolle (meastentiids neidat it yntsjinjen fan formulier is besocht).
  • Om it uterlik fan it formulier werom te setten (bygelyks yn it gefal fan dynamyske yntsjinjen fan formulieren mei AJAX), ferwiderje de .was-validatedklasse fan 'e <form>wer nei yntsjinjen.
  • As in fallback, .is-invaliden .is-validklassen kinne brûkt wurde ynstee fan de pseudo-klassen foar tsjinner side falidaasje . Se hawwe gjin âlderklasse nedich .was-validated.
  • Troch beheiningen yn hoe't CSS wurket, kinne wy ​​(op it stuit) gjin stilen tapasse op in <label>dat komt foar in formulierkontrôle yn 'e DOM sûnder help fan oanpaste JavaScript.
  • Alle moderne browsers stypje de betingstvalidaasje API , in searje JavaScript-metoaden foar it validearjen fan formulierkontrôles.
  • Feedbackberjochten kinne de browserstanderts brûke ( ferskillend foar elke browser, en net stylich fia CSS) as ús oanpaste feedbackstilen mei ekstra HTML en CSS.
  • Jo kinne berjochten foar oanpaste jildigens leverje setCustomValidityyn JavaScript.

Mei dat yn gedachten, beskôgje de folgjende demo's foar ús stilen foar validaasje fan oanpaste formulieren, opsjonele serversideklassen en browserstanderts.

Oanpaste stilen

Foar oanpaste berjochten foar validaasje fan Bootstrap-formulieren moatte jo it novalidateBooleaanske attribút tafoegje oan jo <form>. Dit skeakelet de browser standert feedback tooltips út, mar jout dochs tagong ta de formuliervalidaasje APIs yn JavaScript. Besykje it formulier hjirûnder yn te tsjinjen; ús JavaScript sil de knop yntsjinje ûnderskeppe en feedback nei jo trochjaan. As jo ​​​​besykje yntsjinje, sille jo de stilen :invaliden :validsjen dy't tapast wurde op jo formulierkontrôles.

Oanpaste feedbackstilen tapasse oanpaste kleuren, rânen, fokusstilen en eftergrûnikoanen om feedback better te kommunisearjen. Eftergrûnikoanen foar <select>s binne allinnich beskikber mei .custom-select, en net .form-control.

Looks good!
Looks good!
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-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>

Browser standerts

Net ynteressearre yn oanpaste validaasjefeedbackberjochten of JavaScript skriuwen om foarmgedrach te feroarjen? Alles goed, jo kinne de browserstanderts brûke. Besykje it formulier hjirûnder yn te stjoeren. Ofhinklik fan jo browser en OS, sille jo in wat oare styl fan feedback sjen.

Hoewol dizze feedbackstilen net mei CSS kinne wurde styleare, kinne jo de feedbacktekst noch oanpasse fia JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server side

Wy riede it brûken fan client-side falidaasje, mar yn gefal jo easkje server-side falidaasje, kinne jo oanjaan ûnjildige en jildich formulier fjilden mei .is-invaliden .is-valid. Tink derom dat .invalid-feedbackwurdt ek stipe mei dizze klassen.

Foar ûnjildige fjilden, soargje derfoar dat it ûnjildige feedback-/flaterberjocht is assosjearre mei it oanbelangjende formulierfjild mei aria-describedby. Dit attribút makket it mooglik om mear as ien idte ferwizen, yn gefal it fjild al ferwiist nei ekstra formuliertekst.

Sjocht der goed út!
Sjocht der goed út!
Jou asjebleaft in jildige stêd.
Selektearje asjebleaft in jildige steat.
Jou asjebleaft in jildige zip.
Jo moatte akkoard wêze foardat jo yntsjinje. 
<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>

Stipe eleminten

Validaasjestilen binne beskikber foar de folgjende formulierkontrôles en komponinten:

  • <input>s en <textarea>s mei.form-control
  • <select>s mei .form-controlof.custom-select
  • .form-checks
  • .custom-checkboxs en .custom-radios
  • .custom-file
Fier asjebleaft in berjocht yn yn it tekstgebiet.
Foarbyld ûnjildige feedbacktekst
Mear foarbyld ûnjildige feedback tekst
Foarbyld ûnjildige oanpaste selektearje feedback
Foarbyld ûnjildige feedback fan oanpaste triem
@
Foarbyld ûnjildige input groep feedback
Foarbyld ûnjildige input groep feedback
Foarbyld ûnjildige input groep feedback 
<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>

Tooltips

As jo ​​formulieropmaak it talit, kinne jo de .{valid|invalid}-feedbackklassen wikselje foar .{valid|invalid}-tooltipklassen om falidaasjefeedback te werjaan yn in stylige tooltip. Wês wis dat jo in âlder hawwe mei position: relativeop it foar tooltip posisjonearring. Yn it foarbyld hjirûnder hawwe ús kolomklassen dit al, mar jo projekt kin in alternative opset fereaskje.

Looks good!
Looks good!
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-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>

Oanpasse

Validaasje steaten kinne wurde oanpast fia Sass mei de $form-validation-stateskaart. Lizzend yn ús _variables.scssbestân, wurdt dizze Sass-kaart oerlutsen om de standert valid/ invalidfalidaasjetastân te generearjen. Ynbegrepen is in nestele kaart foar it oanpassen fan de kleur en byldkaike fan elke steat. Wylst gjin oare steaten wurde stipe troch browsers, kinne dyjingen dy't oanpaste stilen brûke, maklik kompleksere formulierfeedback taheakje.

Tink derom dat wy dizze wearden net oanbefelje oan te passen sûnder ek de form-validation-statemixin te feroarjen.

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

Input groep falidaasje workaround

Wy binne net yn steat om it brutsen border-radiusfan ynfiergroepen mei falidaasje op te lossen fanwegen selektearbeperkingen, dus hantlieding is ferplicht. As jo ​​in standert ynfiergroep brûke en de standertrânradiuswearden net oanpasse, foegje .rounded-rightdan ta oan de eleminten mei de brutsen 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>
@
Kies in brûkersnamme.

As jo ​​​​in lytse of grutte ynfiergroep brûke of de standertwearden oanpasse border-radius, foegje oanpaste CSS ta oan it elemint mei de busted 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>
@
Kies in brûkersnamme.

Oanpaste formulieren

Foar noch mear oanpassing en konsistinsje fan crossbrowser, brûk ús folslein oanpaste formuliereleminten om de browserstanderts te ferfangen. Se binne boud boppe op semantyske en tagonklike markup, sadat se solide ferfangings binne foar elke standertfoarmkontrôle.

Checkboxes en radio's

Elts karfakje en radio <input>en <label>pairing wurdt ferpakt yn in <div>te meitsjen ús oanpaste kontrôle. Struktureel is dit deselde oanpak as ús standert .form-check.

Wy brûke de sibling-selektor ( ~) foar al ús <input>steaten - lykas :checked- om ús oanpaste formulierindikator goed te stylearjen. As kombinearre mei de .custom-control-labelklasse, kinne wy ​​ek styl de tekst foar elk item basearre op <input>'e steat.

Wy ferbergje de standert <input>mei opacityen brûke de .custom-control-labelom in nije oanpaste formulieryndikator op syn plak te bouwen mei ::beforeen ::after. Spitigernôch kinne wy ​​net bouwe in oanpaste ien fan krekt de <input>omdat CSS's contentnet wurket op dat elemint.

Yn de kontrolearre steaten brûke wy base64 ynbêde SVG-ikoanen fan Open Iconic . Dit jout ús de bêste kontrôle foar styling en posysjonearring oer browsers en apparaten.

Checkboxes

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

Oanpaste karfakjes kinne de :indeterminatepseudo-klasse ek brûke as se mei de hân ynsteld wurde fia JavaScript (d'r is gjin HTML-attribút beskikber om it oan te jaan).

As jo ​​​​jQuery brûke, soe sokssawat wêze moatte:

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

Radios

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

Ynline

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

Ynvalide

Oanpaste karfakjes en radio's kinne ek útskeakele wurde. Foegje it disabledbooleanske attribút ta oan de <input>en de oanpaste yndikator en labelbeskriuwing wurde automatysk styled.

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

Switches

In switch hat de markup fan in oanpast karfakje, mar brûkt de .custom-switchklasse om in toggle switch te werjaan. Switches stypje ek it disabledattribút.

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

Selektearje menu

Oanpaste <select>menu's hawwe allinich in oanpaste klasse nedich, .custom-selectom de oanpaste stilen te triggerjen. Oanpaste stilen binne beheind ta it <select>earste uterlik fan 'e en kinne de s net wizigje <option>fanwegen browserbeperkingen.

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

Jo kinne ek kieze út lytse en grutte oanpaste seleksjes om oerien te kommen mei ús tekstynfier fan ferlykbere grutte.

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

It multipleattribút wurdt ek stipe:

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

As it sizeattribút is:

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

Berik

Meitsje oanpaste <input type="range">kontrôles mei .custom-range. It spoar (de eftergrûn) en tomme (de wearde) binne beide stylearre om itselde te ferskinen oer browsers. Om't allinich IE en Firefox it "folje" fan har spoar fan links of rjochts fan 'e tomme stypje as in middel om visueel foarútgong oan te jaan, stypje wy it op it stuit net.

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

Range-ynputen hawwe ymplisite wearden foar respektivelik minen max- 0en 100. Jo kinne nije wearden opjaan foar dyjingen dy't de attributen minen brûke.max

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

Standert, berik ynfier "snap" nei hiele wearden. Om dit te feroarjen, kinne jo in stepwearde opjaan. Yn it foarbyld hjirûnder ferdûbelje wy it oantal stappen troch te brûken step="0.5".

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

Triemblêder

De oanrikkemandearre plugin om oanpaste triemynfier te animearjen: bs-custom-file-input , dat is wat wy op it stuit brûke hjir yn ús dokuminten.

De bestânynfier is de meast knoffelichste fan it stel en fereasket ekstra JavaSkript as jo se wolle ferbine mei funksjoneel Kies bestân ... en selektearre triemnammetekst.

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

Wy ferbergje it standertbestân <input>fia opacityen stylje ynstee de <label>. De knop wurdt oanmakke en pleatst mei ::after. As lêste ferklearje wy in widthen heightop 'e <input>foar goede ôfstân foar omlizzende ynhâld.

Oersette of oanpasse de snaren mei SCSS

De :lang()pseudo-klasse wurdt brûkt om de oersetting fan de "Blêdzje" tekst yn oare talen mooglik te meitsjen. Ynstjoerings oerskriuwe of tafoegje oan 'e $custom-file-textSass-fariabele mei de oanbelangjende taaltag en lokale snaren. De Ingelske snaren kinne op deselde manier oanpast wurde. Hjir is bygelyks hoe't men in Spaanske oersetting taheakje kin (de taalkoade fan it Spaansk is es):

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

Hjir is lang(es)yn aksje op de oanpaste triem-ynfier foar in Spaanske oersetting:

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

Jo moatte de taal fan jo dokumint (of subbeam dêrfan) goed ynstelle om de juste tekst te sjen. Dit kin dien wurde mei it langattribút op it <html>elemint of de Content-LanguageHTTP-header , ûnder oare metoaden.

Oersette of oanpasse de snaren mei HTML

Bootstrap biedt ek in manier om de tekst "Blêdzje" yn HTML oer te setten mei it data-browseattribút dat kin wurde tafoege oan it oanpaste ynfierlabel (foarbyld yn it Nederlânsk):

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