Source

Vorms

Voorbeelde en gebruiksriglyne vir vormbeheerstyle, uitlegopsies en pasgemaakte komponente vir die skep van 'n wye verskeidenheid vorms.

Oorsig

Bootstrap se vormkontroles brei uit op ons Herlaaide vormstyle met klasse. Gebruik hierdie klasse om in te teken op hul pasgemaakte skerms vir 'n meer konsekwente weergawe oor blaaiers en toestelle.

Maak seker dat jy 'n toepaslike typekenmerk op alle invoere gebruik (bv. emailvir e-posadres of numbervir numeriese inligting) om voordeel te trek uit nuwer invoerkontroles soos e-posverifikasie, nommerkeuse en meer.

Hier is 'n vinnige voorbeeld om Bootstrap se vormstyle te demonstreer. Hou aan om te lees vir dokumentasie oor vereiste klasse, vormuitleg en meer.

Ons sal nooit jou e-pos met iemand anders deel nie. 
<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>

Vormkontroles

Tekstuele vormkontroles—soos <input>s, <select>s en s—word saam met die klas <textarea>gestileer . .form-controlIngesluit is style vir algemene voorkoms, fokustoestand, grootte, en meer.

Maak seker dat u ons pasgemaakte vorms verken om styl <select>s verder te bevorder.

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

Vir lêerinvoer, ruil die .form-controlvir .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>

Grootte

Stel hoogtes deur klasse soos .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>

Leesalleen

Voeg die readonlyBoole-kenmerk by 'n invoer om verandering van die invoer se waarde te voorkom. Leesalleen-insette lyk ligter (net soos gedeaktiveerde insette), maar behou die standaardwyser.

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

Leesalleen gewone teks

As jy <input readonly>elemente in jou vorm as gewone teks wil hê, gebruik die .form-control-plaintextklas om die verstek vormveldstilering te verwyder en die korrekte kantlyn en opvulling te behou.

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

Reeks insette

Stel horisontaal skuifbare reeksinsette met behulp van .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>

Merkblokkies en radio's

Verstekmerkblokkies en radio's word verbeter met behulp van .form-check' n enkele klas vir beide invoertipes wat die uitleg en gedrag van hul HTML-elemente verbeter . Merkblokkies is om een ​​of meer opsies in 'n lys te kies, terwyl radio's is om een ​​opsie uit baie te kies.

Gedeaktiveerde merkblokkies en radio's word ondersteun. Die disabledkenmerk sal 'n ligter kleur toepas om die toevoer se toestand aan te dui.

Merkblokkies en radioknoppies ondersteun HTML-gebaseerde vormvalidering en verskaf bondige, toeganklike etikette. As sodanig is ons <input>s en <label>s broers en susters elemente in teenstelling met 'n <input>binne 'n <label>. Dit is effens meer breedvoerig aangesien jy moet spesifiseer iden forkenmerke om die <input>en in verband te bring <label>.

Verstek (gestapel)

By verstek sal enige aantal merkblokkies en radio's wat onmiddellike broers en susters is, vertikaal gestapel word en toepaslik gespasieer word met .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>

In lyn

Groepeer merkblokkies of radio's op dieselfde horisontale ry deur by .form-check-inlineenige .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>

Sonder etikette

Voeg .position-staticby invoere binne .form-checkwat geen etiketteks het nie. Onthou om steeds 'n vorm van etiket vir ondersteunende tegnologieë te verskaf (byvoorbeeld deur gebruik te maak van 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>

Uitleg

Aangesien Bootstrap van toepassing is display: blocken width: 100%op byna al ons vormkontroles, sal vorms by verstek vertikaal gestapel word. Bykomende klasse kan gebruik word om hierdie uitleg op 'n per-vorm basis te verander.

Vorm groepe

Die .form-groupklas is die maklikste manier om struktuur by vorms te voeg. Dit bied 'n buigsame klas wat behoorlike groepering van etikette, kontroles, opsionele hulpteks en vormvalideringsboodskappe aanmoedig. By verstek is dit slegs van toepassing margin-bottom, maar dit tel bykomende style in .form-inlinesoos nodig. Gebruik dit met <fieldset>s, <div>s, of byna enige ander element.

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

Vorm rooster

Meer komplekse vorms kan gebou word deur ons roosterklasse te gebruik. Gebruik dit vir vormuitlegte wat veelvuldige kolomme, verskillende breedtes en bykomende belyningsopsies benodig.

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

Vorm ry

Jy kan ook ruil .rowvir .form-row, 'n variasie van ons standaard-roosterry wat die verstekkolomgeute ignoreer vir strenger en meer kompakte uitlegte.

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

Meer komplekse uitlegte kan ook met die roosterstelsel geskep word.

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

Horisontale vorm

Skep horisontale vorms met die rooster deur die .rowklas by te voeg om groepe te vorm en die .col-*-*klasse te gebruik om die breedte van jou etikette en kontroles te spesifiseer. Maak seker dat jy ook .col-form-labelby jou <label>s voeg sodat hulle vertikaal gesentreer is met hul verwante vormkontroles.

Soms moet jy dalk marge- of opvullingshulpmiddels gebruik om die perfekte belyning te skep wat jy nodig het. Ons het byvoorbeeld die padding-topetiket op ons gestapelde radio-insette verwyder om die teksbasislyn beter te belyn.

Radio's
Merkblokkie 
<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>
Horisontale vorm etiket grootte

Maak seker dat jy .col-form-label-smof .col-form-label-lgna jou <label>s of <legend>s gebruik om die grootte van .form-control-lgen korrek te volg .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>

Kolomgrootte

Soos in die vorige voorbeelde getoon, laat ons roosterstelsel jou toe om enige aantal .cols binne 'n .rowof te plaas .form-row. Hulle sal die beskikbare breedte eweredig tussen hulle verdeel. Jy kan ook 'n subset van jou kolomme kies om meer of minder spasie op te neem, terwyl die oorblywende .cols die res eweredig verdeel, met spesifieke kolomklasse soos .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>

Outo-grootte

Die voorbeeld hieronder gebruik 'n flexbox-nutsding om die inhoud vertikaal te sentreer en verander .colna .col-autosodat jou kolomme net soveel spasie opneem as wat nodig is. Anders gestel, die kolom groottes self gebaseer op die inhoud.

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

Jy kan dit dan weer meng met grootte-spesifieke kolomklasse.

@ 
<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 natuurlik word persoonlike vormkontroles ondersteun.

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

Inlyn vorms

Gebruik die .form-inlineklas om 'n reeks etikette, vormkontroles en knoppies op 'n enkele horisontale ry te vertoon. Vormkontroles binne inlynvorms verskil effens van hul verstektoestande.

  • Kontroles is display: flexom enige HTML-wit spasie in te vou en jou in staat te stel om belyningsbeheer met spasiëring en flexbox- nutsmiddels te verskaf.
  • Kontroles en invoergroepe ontvang width: autoom die Bootstrap-standaard te ignoreer width: 100%.
  • Kontroles verskyn net inlyn in kykpoorte wat ten minste 576px wyd is om vir noue uitsigpoorte op mobiele toestelle rekening te hou.

Jy sal dalk die breedte en belyning van individuele vormkontroles met die spasiëringhulpmiddels moet aanspreek (soos hieronder getoon). Laastens, maak seker dat jy altyd 'n <label>by elke vormkontrole insluit, selfs al moet jy dit wegsteek vir nie-skermleserbesoekers met .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>

Pasgemaakte vormkontroles en keuses word ook ondersteun.

<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>
Alternatiewe vir versteekte etikette

Hulptegnologieë soos skermlesers sal probleme met jou vorms hê as jy nie 'n etiket vir elke invoer insluit nie. Vir hierdie inlynvorms kan jy die byskrifte versteek deur die .sr-onlyklas te gebruik. Daar is verdere alternatiewe metodes om 'n etiket vir ondersteunende tegnologieë te verskaf, soos die aria-label, aria-labelledbyof titlekenmerk. Indien nie een van hierdie teenwoordig is nie, kan ondersteunende tegnologie gebruik maak van die placeholderkenmerk, indien teenwoordig, maar let daarop dat die gebruik daarvan placeholderas 'n plaasvervanger vir ander etiketteringmetodes nie aangeraai word nie.

Hulp teks

Blokvlak-hulpteks in vorms kan geskep word deur .form-text(voorheen bekend as .help-blockin v3). Inlyn-hulpteks kan buigsaam geïmplementeer word deur enige inlyn HTML-element en nutsklasse soos .text-muted.

Assosieer hulpteks met vormkontroles

Hulpteks moet uitdruklik geassosieer word met die vormkontrole waarmee dit verband hou met die gebruik van die aria-describedbykenmerk. Dit sal verseker dat ondersteunende tegnologieë – soos skermlesers – hierdie hulpteks sal aankondig wanneer die gebruiker fokus of die beheer betree.

Hulpteks onder insette kan met .form-text. Hierdie klas sluit in display: blocken voeg 'n paar boonste marge by vir maklike spasiëring van die insette hierbo.

Jou wagwoord moet 8-20 karakters lank wees, letters en syfers bevat en moet nie spasies, spesiale karakters of emosiekone bevat nie. 
<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>

Inlyn teks kan enige tipiese inlyn HTML-element gebruik (of dit nou 'n <small>, <span>, of iets anders is) met niks meer as 'n nutsklas nie.

Moet 8-20 karakters lank wees. 
<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>

Gestremde vorms

Voeg die disabledBoolese kenmerk by 'n invoer om gebruikersinteraksies te voorkom en dit ligter te laat lyk.

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

Voeg die disabledkenmerk by a <fieldset>om al die kontroles binne te deaktiveer.

<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>
Waarskuwing met ankers

By verstek sal blaaiers alle inheemse vormkontroles ( <input>, <select>en <button>elemente) binne 'n <fieldset disabled>as gedeaktiveer hanteer, wat beide sleutelbord- en muisinteraksies op hulle voorkom. As jou vorm egter ook <a ... class="btn btn-*">elemente insluit, sal dit slegs 'n styl van kry pointer-events: none. Soos opgemerk in die afdeling oor gedeaktiveerde toestand vir knoppies (en spesifiek in die onderafdeling vir ankerelemente), is hierdie CSS-eienskap nog nie gestandaardiseer nie en word dit nie ten volle in Internet Explorer 10 ondersteun nie, en sal dit nie verhoed dat sleutelbordgebruikers in staat is om hierdie skakels te fokus of te aktiveer. Om veilig te wees, gebruik persoonlike JavaScript om sulke skakels te deaktiveer.

Kruisblaaierversoenbaarheid

Terwyl Bootstrap hierdie style in alle blaaiers sal toepas, ondersteun Internet Explorer 11 en hieronder nie die disabledkenmerk op 'n <fieldset>. Gebruik pasgemaakte JavaScript om die veldstel in hierdie blaaiers te deaktiveer.

Bekragtiging

Verskaf waardevolle, uitvoerbare terugvoer aan jou gebruikers met HTML5-vormbekragtiging – beskikbaar in al ons ondersteunde blaaiers . Kies uit die blaaier verstek validering terugvoer, of implementeer pasgemaakte boodskappe met ons ingeboude klasse en begin JavaScript.

Ons beveel tans aan om gepasmaakte valideringstyle te gebruik, aangesien inheemse blaaier verstek valideringsboodskappe nie konsekwent aan ondersteunende tegnologieë in alle blaaiers blootgestel word nie (veral Chrome op rekenaars en mobiele toestelle).

Hoe dit werk

Hier is hoe vormvalidering met Bootstrap werk:

  • HTML-vorm validering word toegepas via CSS se twee pseudo-klasse, :invaliden :valid. Dit is van toepassing op <input>, <select>, en <textarea>elemente.
  • Bootstrap omvang die :invaliden :validstyle na ouerklas .was-validated, gewoonlik toegepas op die <form>. Andersins verskyn enige vereiste veld sonder 'n waarde as ongeldig tydens bladsylaai. Op hierdie manier kan jy kies wanneer om hulle te aktiveer (gewoonlik nadat die vorm ingedien is).
  • Om die voorkoms van die vorm terug te stel (byvoorbeeld in die geval van dinamiese vormvoorleggings wat AJAX gebruik), verwyder die .was-validatedklas van die <form>weer na indiening.
  • As 'n terugval, .is-invaliden .is-validklasse kan gebruik word in plaas van die pseudo-klasse vir bedienerkant-validering . Hulle benodig nie 'n .was-validatedouerklas nie.
  • As gevolg van beperkings in hoe CSS werk, kan ons (tans) nie style toepas op 'n <label>wat voor 'n vormbeheer in die DOM kom sonder die hulp van pasgemaakte JavaScript nie.
  • Alle moderne blaaiers ondersteun die beperking validering API , 'n reeks JavaScript-metodes vir die validering van vormkontroles.
  • Terugvoerboodskappe kan die blaaierverstekstellings gebruik ( verskillende vir elke blaaier, en onstyleerbaar via CSS) of ons pasgemaakte terugvoerstyle met bykomende HTML en CSS.
  • Jy kan pasgemaakte geldigheidsboodskappe setCustomValidityin JavaScript verskaf.

Met dit in gedagte, oorweeg die volgende demo's vir ons pasgemaakte vormvalidasiestyle, opsionele bedienerkantklasse en blaaierverstekings.

Pasgemaakte style

Vir pasgemaakte Bootstrap-vorm-bekragtigingboodskappe, sal jy die novalidateBooleaanse kenmerk by jou <form>. Dit deaktiveer die blaaier se verstekterugvoernutswenke, maar bied steeds toegang tot die vormvaliderings-API's in JavaScript. Probeer om die vorm hieronder in te dien; ons JavaScript sal die indien-knoppie onderskep en terugvoer aan jou oordra. Wanneer jy probeer indien, sal jy die :invaliden :validstyle sien wat op jou vormkontroles toegepas word.

Pasgemaakte terugvoerstyle pas pasgemaakte kleure, grense, fokusstyle en agtergrondikone toe om terugvoer beter te kommunikeer. Agtergrond ikone vir <select>s is slegs beskikbaar met .custom-select, en nie .form-control.

Lyk goed!
Lyk goed!
@
Kies asseblief 'n gebruikernaam.
Verskaf asseblief 'n geldige stad.
Kies asseblief 'n geldige staat.
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>

Blaaier verstek

Stel u nie belang in gepasmaakte validering-terugvoerboodskappe of die skryf van JavaScript om vormgedrag te verander nie? Alles goed, jy kan die blaaier verstekke gebruik. Probeer om die vorm hieronder in te dien. Afhangende van jou blaaier en bedryfstelsel, sal jy 'n effens ander styl van terugvoer sien.

Alhoewel hierdie terugvoerstyle nie met CSS gestileer kan word nie, kan jy steeds die terugvoerteks deur JavaScript pasmaak.

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

Bedienerkant

Ons beveel aan om kliënt-kant-validering te gebruik, maar as jy bedienerkant-validering benodig, kan jy ongeldige en geldige vormvelde met .is-invaliden aandui .is-valid. Let daarop dat .invalid-feedbackdit ook met hierdie klasse ondersteun word.

Lyk goed!
Lyk goed!
@
Kies asseblief 'n gebruikernaam.
Verskaf asseblief 'n geldige stad.
Kies asseblief 'n geldige staat.
Verskaf asseblief 'n geldige zip.
U moet saamstem voordat u indien. 
<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>

Ondersteunde elemente

Bekragtigingstyle is beskikbaar vir die volgende vormkontroles en komponente:

  • <input>s en <textarea>s met .form-control(insluitend tot een .form-controlin invoergroepe)
  • <select>s met .form-controlof.custom-select
  • .form-checks
  • .custom-checkboxs en .custom-radios
  • .custom-file
Voer asseblief 'n boodskap in die teksarea in.
Voorbeeld van ongeldige terugvoerteks
Meer voorbeeld van ongeldige terugvoerteks
Voorbeeld van ongeldige gepasmaakte kiesterugvoer
Voorbeeld van ongeldige gepasmaakte lêerterugvoer 
<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>

Gereedskapwenke

As jou vormuitleg dit toelaat, kan jy die .{valid|invalid}-feedbackklasse vir .{valid|invalid}-tooltipklasse omruil om valideringterugvoer in 'n gestileerde nutswenk te vertoon. Maak seker dat jy 'n ouer position: relativedaarop het vir nutspunt-posisionering. In die voorbeeld hieronder het ons kolomklasse dit reeds, maar jou projek mag dalk 'n alternatiewe opstelling vereis.

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>

Pasmaak

Bekragtigingstate kan aangepas word via Sass met die $form-validation-stateskaart. Geleë in ons _variables.scsslêer, word hierdie Sass-kaart oorgelus om die verstek- valid/ invalidvalideringstoestande te genereer. Ingesluit is 'n geneste kaart om elke staat se kleur en ikoon aan te pas. Alhoewel geen ander state deur blaaiers ondersteun word nie, kan diegene wat pasgemaakte style gebruik maklik meer komplekse vormterugvoer byvoeg.

Neem asseblief kennis dat ons nie aanbeveel om hierdie waardes aan te pas sonder om ook die form-validation-statemengin te wysig nie.

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

Pasgemaakte vorms

Vir nog meer aanpassing en kruisblaaier-konsekwentheid, gebruik ons ​​heeltemal pasgemaakte vormelemente om die blaaier-standaarde te vervang. Hulle is bo-op semantiese en toeganklike opmaak gebou, so hulle is soliede plaasvervangers vir enige verstekvormbeheer.

Merkblokkies en radio's

Elke merkblokkie en radio <input>en <label>paring is toegedraai in 'n <div>om ons persoonlike beheer te skep. Struktureel is dit dieselfde benadering as ons standaard .form-check.

Ons gebruik die broer of suster ( ~) vir al ons <input>state—soos— :checkedom ons pasgemaakte vormaanwyser behoorlik te styl. Wanneer dit met die klas gekombineer .custom-control-labelword, kan ons ook die teks vir elke item styl op grond van die <input>se toestand.

Ons verberg die verstek <input>met opacityen gebruik die .custom-control-labelom 'n nuwe pasgemaakte vormaanwyser in sy plek met ::beforeen te bou ::after. Ongelukkig kan ons nie 'n pasgemaakte een van net die bou nie, <input>want CSS'e contentwerk nie op daardie element nie.

In die gemerkte state gebruik ons ​​base64 ingebedde SVG-ikone van Open Iconic . Dit bied ons die beste beheer vir stilering en posisionering oor blaaiers en toestelle.

Merkblokkies

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

Gepasmaakte merkblokkies kan ook die :indeterminatepseudo-klas gebruik wanneer dit met die hand ingestel word via JavaScript (daar is geen beskikbare HTML-kenmerk om dit te spesifiseer nie).

As jy jQuery gebruik, behoort iets soos hierdie voldoende te wees:

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

Radio's

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

In lyn

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

Gestrem

Gepasmaakte merkblokkies en radio's kan ook gedeaktiveer word. Voeg die disabledBoolese kenmerk by die <input>en die pasgemaakte aanwyser en etiketbeskrywing sal outomaties gestileer word.

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

Skakelaars

'n Skakelaar het die opmaak van 'n pasgemaakte merkblokkie, maar gebruik die .custom-switchklas om 'n wisselskakelaar te lewer. Skakelaars ondersteun ook die disabledkenmerk.

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

Kies spyskaart

Pasgemaakte <select>spyskaarte benodig slegs 'n pasgemaakte klas .custom-selectom die pasgemaakte style te aktiveer. Pasgemaakte style is beperk tot die <select>aanvanklike voorkoms en kan nie die <option>s verander nie weens blaaierbeperkings.

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

Jy kan ook kies uit klein en groot persoonlike keuses om by ons soortgelyke grootte teksinvoer te pas.

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

Die multiplekenmerk word ook ondersteun:

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

Soos die sizekenmerk:

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

Reeks

Skep pasgemaakte <input type="range">kontroles met .custom-range. Die snit (die agtergrond) en duim (die waarde) is albei gestileer om dieselfde oor blaaiers te vertoon. Aangesien slegs IE en Firefox die "vul" van hul spoor van die linker- of regterkant van die duim ondersteun as 'n manier om visueel vordering aan te dui, ondersteun ons dit nie tans nie.

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

Reeksinsette het implisiete waardes vir minen max- 0en 100, onderskeidelik. Jy kan nuwe waardes spesifiseer vir diegene wat die minen maxkenmerke gebruik.

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

By verstek "snap" reeksinsette na heelgetalwaardes. Om dit te verander, kan jy 'n stepwaarde spesifiseer. In die voorbeeld hieronder verdubbel ons die aantal stappe deur step="0.5".

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

Lêerblaaier

Die aanbevole inprop om persoonlike lêerinvoer te animeer: ​​bs-custom-file-input , dit is wat ons tans hier in ons dokumente gebruik.

Die lêerinvoer is die mees knoestige van die klomp en vereis bykomende JavaScript as jy hulle wil koppel met funksionele Kies lêer ... en geselekteerde lêernaamteks.

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

Ons versteek die versteklêer <input>via opacityen styleer eerder die <label>. Die knoppie word gegenereer en geposisioneer met ::after. Laastens verklaar ons 'n widthen heightop die <input>vir behoorlike spasiëring vir omliggende inhoud.

Vertaal of pasmaak van die snare met SCSS

Die :lang()pseudo-klas word gebruik om die vertaling van die "Blaai"-teks in ander tale moontlik te maak. Ignoreer of voeg inskrywings by die $custom-file-textSass-veranderlike met die relevante taalmerker en gelokaliseerde stringe. Die Engelse snare kan op dieselfde manier aangepas word. Byvoorbeeld, hier is hoe 'n mens 'n Spaanse vertaling kan byvoeg (Spaans se taalkode ises ):

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

Hier is lang(es)in aksie oor die pasgemaakte lêerinvoer vir 'n Spaanse vertaling:

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

Jy sal die taal van jou dokument (of subboom daarvan) korrek moet stel sodat die korrekte teks gewys kan word. Dit kan gedoen word met behulp van die langkenmerk op die <html>element of die Content-LanguageHTTP-kopskrif , onder andere metodes.

Vertaal of pasmaak van die snare met HTML

Bootstrap bied ook 'n manier om die "Blaai"-teks in HTML te vertaal met die data-browsekenmerk wat by die pasgemaakte invoeretiket gevoeg kan word (voorbeeld in Nederlands):

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