in English

Formen

Beispiller a Benotzungsrichtlinne fir Form Kontrollstiler, Layoutoptiounen a personaliséiert Komponenten fir eng grouss Varietéit vu Formen ze kreéieren.

Iwwersiicht

Bootstrap Form Kontrollen erweideren eis Rebooted Form Stiler mat Klassen. Benotzt dës Klassen fir op hir personaliséiert Affichage ze wielen fir eng méi konsequent Rendering iwwer Browser an Apparater.

Gitt sécher e passenden typeAttribut op all Input ze benotzen (zB emailfir E-Mailadress oder numberfir numeresch Informatioun) fir vun neien Input Kontrollen wéi E-Mail Verifizéierung, Zuelauswiel a méi ze profitéieren.

Hei ass e séier Beispill fir Bootstrap Formstiler ze demonstréieren. Liest weider fir Dokumentatioun iwwer erfuerderlech Klassen, Formlayout a méi.

Mir deelen Är E-Mail ni mat engem aneren. 
<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 Kontrollen

Textuell Form Kontrollen - wéi <input>s, <select>s, an s - si mat der Klass <textarea>styléiert . .form-controlAbegraff sinn Stiler fir allgemeng Erscheinung, Fokuszoustand, Gréisst a méi.

Ginn sécher eis Mooss Formen ze entdecken fir weider Stil <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>

Fir Dateieinputen, tauscht de .form-controlfir .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>

Gréisst

Set Héichten mat Klassen wéi .form-control-lgan .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>

Nëmme liesen

Füügt de readonlybooleschen Attribut op en Input fir d'Ännerung vum Wäert vum Input ze vermeiden. Lies-nëmmen Input schéngen méi hell (just wéi behënnert Input), awer behalen de Standard Cursor.

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

Nëmmen einfachen Text

Wann Dir <input readonly>Elementer an Ärer Form als Kloertext stylesch wëllt hunn, benotzt d' .form-control-plaintextKlass fir de Standardformfeldstil ze läschen an déi richteg Margin a Padding ze bewahren.

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

Setzt horizontal scrollbar Range-Inputen mat .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>

Checkboxen a Radioen

Standardcheckboxen a Radios ginn verbessert mat der Hëllef vun .form-checkenger eenzeger Klass fir béid Inputtypen déi de Layout an d'Behuele vun hiren HTML Elementer verbessert . Checkboxe si fir eng oder e puer Optiounen an enger Lëscht ze wielen, während Radios sinn fir eng Optioun aus ville ze wielen.

Behënnerte Checkboxen a Radios ginn ënnerstëtzt. Den disabledAttribut wäert eng méi hell Faarf uwenden fir den Inputzoustand ze weisen.

Checkboxen a Radioknäppercher ënnerstëtzen HTML-baséiert Formvalidatioun a bidden präzis, zougänglech Etiketten. Als esou sinn eis <input>s an <label>s Geschwësterelementer am Géigesaz zu engem <input>bannent engem <label>. Dëst ass e bësse méi verbose wéi Dir musst spezifizéieren idan forAttributer fir den <input>an ze verbannen <label>.

Standard (gestapelt)

Par défaut gëtt all Zuel vu Checkboxen a Radioen déi direkt Geschwëster sinn vertikal gestapelt a passend mat .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>

An der Schlaang

Gruppéiert Checkboxen oder Radios op der selwechter horizontaler Zeil andeems Dir .form-check-inlineop all .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>

Ouni Etiketten

Füügt .position-staticun Inputen an .form-checkdéi kee Labeltext hunn. Denkt drun nach ëmmer eng Form vun zougänglechen Numm fir Hëllefstechnologien ze bidden (zum Beispill mat aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Layout

Zënter Bootstrap gëlt display: blocka width: 100%fir bal all eis Form Kontrollen, Forme ginn standardiséiert vertikal gestapelt. Zousätzlech Klassen kënne benotzt ginn fir dëse Layout op enger Performbasis ze variéieren.

Form Gruppen

D' .form-groupKlass ass deen einfachste Wee fir eng Struktur op Formen ze addéieren. Et bitt eng flexibel Klass, déi richteg Gruppéierung vun Etiketten, Kontrollen, optional Hëllefstext a Formvalidatiounsmessage encouragéiert. Par défaut gëllt et nëmmen margin-bottom, awer et hëlt zousätzlech Stiler op .form-inlinewéi néideg. Benotzt et mat <fieldset>s, <div>s oder bal all aner 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>

Form Gitter

Méi komplex Forme kënne mat eise Gitterklassen gebaut ginn. Benotzt dës fir Form Layouten déi verschidde Kolonnen, variéiert Breeten an zousätzlech Ausriichtungsoptiounen erfuerderen.

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

Form Rei

Dir kënnt och tauschen .rowfir .form-row, eng Variatioun vun eiser Standard Gitterrei, déi d'Standard Kolonnrennen iwwerschreift fir méi enk a méi kompakt Layouten.

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

Méi komplex Layouten kënnen och mam Gittersystem erstallt ginn.

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

Horizontal Form

Erstellt horizontale Forme mam Gitter andeems Dir d' .rowKlass bäidréit fir Gruppen ze bilden an d' .col-*-*Klassen ze benotzen fir d'Breet vun Ären Etiketten a Kontrollen ze spezifizéieren. Gitt sécher och .col-form-labelop Är <label>s ze addéieren sou datt se vertikal mat hiren assoziéierte Formkontrolle zentréiert sinn.

Heiansdo musst Dir vläicht Margin oder Padding Utilities benotzen fir déi perfekt Ausrichtung ze kreéieren déi Dir braucht. Zum Beispill hu mir den padding-topop eisem gestapelten Radio-Input Label geläscht fir d'Textbaseline besser auszegläichen.

Radioen 
<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 row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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>
Horizontal Form Label Gréisst

Gitt sécher ze benotzen .col-form-label-smoder .col-form-label-lgop Är <label>s oder <legend>s fir d'Gréisst vun .form-control-lga richteg ze verfollegen .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>

Kolonn Gréisst

Wéi an de fréiere Beispiller gewisen, erlaabt eise Gittersystem Iech all Zuel vu .cols bannent engem .rowoder .form-row. Si verdeelen déi verfügbar Breet gläich tëscht hinnen. Dir kënnt och e Subset vun Äre Kolonnen auswielen fir méi oder manner Plaz opzehuelen, während déi verbleiwen .cols de Rescht gläich opgedeelt hunn, mat spezifesche Kolonnklassen wéi .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>

Automatesch Gréisst

D'Beispill hei drënner benotzt e Flexbox Utility fir den Inhalt vertikal ze zentréieren an z'änneren .colsou .col-autodatt Är Kolonnen nëmmen esou vill Plaz ophuelen wéi néideg. Anescht gesot, d'Kolonngréisst selwer baséiert op den Inhalt.

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

Dir kënnt dat dann nach eng Kéier mat Gréisst-spezifesch Kolonn Klassen remixen.

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

An natierlech ginn personaliséiert Form Kontrollen ënnerstëtzt.

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

Benotzt d' .form-inlineKlass fir eng Serie vun Etiketten, Form Kontrollen a Knäppercher op enger eenzeger horizontaler Zeil ze weisen. Form Kontrollen bannent Inline Formen variéieren liicht vun hire Standardzoustand.

  • D'Kontrollen sinn display: flex, zerbriechen all HTML Wäissraum an erlaabt Iech Ausriichtungskontrolle mat Abstands- a Flexbox- Utilities ze bidden.
  • Kontrollen an Inputgruppen kréien width: autofir de Bootstrap Standard ze iwwerschreiden width: 100%.
  • Kontrollen schéngen nëmmen inline an viewports datt op d'mannst 576px breet sinn fir eng Kont fir schmuel viewports op mobilen Apparater.

Dir musst vläicht d'Breet an d'Ausrichtung vun eenzelne Formkontrollen mat Abstands-Utilities manuell adresséieren (wéi hei ënnendrënner). Endlech, gitt sécher datt Dir ëmmer e <label>mat all Formkontrolle enthält, och wann Dir et vun Net-Screenreader Besucher verstoppe musst mat .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>

Benotzerdefinéiert Form Kontrollen a wielt sinn och ënnerstëtzt.

<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 zu verstoppte Etiketten

Hëllefstechnologien wéi Écran Lieser wäerten Problemer mat Äre Formulairen hunn wann Dir kee Label fir all Input enthält. .sr-onlyFir dës Inline Formen, kënnt Dir d'Etiketten mat der Klass verstoppen . Et gi weider alternativ Methoden fir e Label fir Hëllefstechnologien ze liwweren, sou wéi den aria-label, aria-labelledbyoder titleAttribut. Wann keng vun dësen präsent ass, kënnen Assistenztechnologien d' placeholderAttributer benotzen, wann et präsent ass, awer bemierkt datt d'Benotzung placeholderals Ersatz fir aner Etikettéierungsmethoden net ugeroden ass.

Hëllef Text

Block-Niveau Hëllef Text a Formen kann erstallt ginn benotzt .form-text(virdrun bekannt als .help-blockv3). Inline Hëllefstext ka flexibel implementéiert ginn mat all Inline HTML Element an Utility Klassen wéi .text-muted.

Associéieren Hëllef Text mat Form Kontrollen

Hëllefstext soll explizit mat der Formkontrolle verbonne sinn, déi et mat der aria-describedbyAttribut benotzt. Dëst wäert garantéieren datt Assistenztechnologien - wéi Bildschirm Lieser - dësen Hëllefstext annoncéieren wann de Benotzer fokusséiert oder an d'Kontroll erakënnt.

Hëllef Text ënnert Input kann mat stylesch ginn .form-text. Dës Klass enthält display: blocka füügt e puer Topmarge fir einfach Ofstand vun den Inputen uewen.

Äert Passwuert muss 8-20 Zeeche laang sinn, Buschtawen an Zuelen enthalen an däerf keng Plazen, speziell Zeechen oder Emoji enthalen. 
<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 Text kann all typesch Inline HTML Element benotzen (sief et en <small>, <span>, oder soss eppes) mat näischt méi wéi eng Utility Klass.

Muss 8-20 Zeechen laang sinn. 
<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>

Behënnert Formen

Füügt de disabledbooleschen Attribut op en Input fir Benotzerinteraktiounen ze vermeiden an et méi hell ze maachen.

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

Füügt den disabledAttribut zu engem <fieldset>fir all d'Kontrollen bannen auszeschalten.

Behënnert Feldset Beispill 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <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>
Opgepasst mat Anker

Browser behandelen all gebierteg Form Kontrollen ( <input>, <select>, an <button>Elementer) bannent engem <fieldset disabled>als behënnert, verhënnert souwuel Tastatur wéi och Maus Interaktiounen op hinnen.

Wann Är Form awer och personaliséiert Knäppchenähnlech Elementer enthält wéi <a ... class="btn btn-*">, ginn dës nëmmen e Stil vun pointer-events: none. Wéi an der Rubrik iwwer behënnert Staat fir Knäppercher bemierkt (a speziell an der Ënnersektioun fir Ankerelementer), ass dës CSS Eegeschafte nach net standardiséiert a gëtt net voll ënnerstëtzt am Internet Explorer 10. D'Anker-baséiert Kontrollen wäerten och nach ëmmer sinn fokusséierbar an operabel mat der Tastatur. Dir musst dës Kontrollen manuell änneren andeems Dir bäidréit tabindex="-1"fir ze verhënneren datt se de Fokus kréien an aria-disabled="disabled"hiren Zoustand un Assistenztechnologien signaliséieren.

Cross-Browser Kompatibilitéit

Wärend Bootstrap dës Stiler an all Browser applizéiert, ënnerstëtzen Internet Explorer 11 an ënner net voll den disabledAttribut op engem <fieldset>. Benotzt personaliséiert JavaScript fir de Feldset an dëse Browser auszeschalten.

Validatioun

Bitt wäertvoll, handhabbare Feedback un Är Benotzer mat HTML5 Form Validatioun - verfügbar an all eise ënnerstëtzte Browser . Wielt aus dem Browser Standard Validatioun Feedback, oder implementéiert personaliséiert Messagen mat eise agebaute Klassen a Starter JavaScript.

Mir si bewosst datt de Moment de Client-Säit personaliséiert Validatiounsstiler an Tooltips net zougänglech sinn, well se net mat Hëllefstechnologien ausgesat sinn. Wärend mir un enger Léisung schaffen, empfeelen mir entweder d'Server-Säit Optioun oder d'Standardbrowser Validatiounsmethod ze benotzen.

Wéi et funktionnéiert

Hei ass wéi d'Formvalidatioun mat Bootstrap funktionnéiert:

  • HTML Form Validatioun gëtt iwwer CSS zwou Pseudo-Klassen applizéiert, :invalidan :valid. Et gëllt fir <input>, <select>, an <textarea>Elementer.
  • Bootstrap scopes der :invalida :validStiler zu Elterendeel .was-validatedKlass, normalerweis applizéiert op d' <form>. Soss gëtt all erfuerdert Feld ouni Wäert als ongëlteg op der Säitlaascht gewisen. Op dës Manéier kënnt Dir wielen wéini se ze aktivéieren (typesch nodeems d'Formuléierung versicht ass).
  • Fir d'Erscheinung vum Formulaire zréckzetrieden (zum Beispill am Fall vun dynamesche Formuléierunge mat AJAX), läscht d' .was-validatedKlass aus der <form>erëm no der Soumissioun.
  • Als Réckfall, .is-invalida .is-validKlassen kënnen amplaz vun de Pseudo-Klassen fir Server Säit Validatioun benotzt ginn . Si erfuerderen keng .was-validatedElterenklass.
  • Wéinst Aschränkungen a wéi CSS funktionnéiert, kënne mir (am Moment) Stiler net applizéieren op eng <label>déi virun enger Form Kontroll an der DOM kënnt ouni d'Hëllef vu personaliséierten JavaScript.
  • All modern Browser ënnerstëtzen d' Constraint Validation API , eng Serie vu JavaScript Methoden fir d'Validatioun vun Form Kontrollen.
  • Feedback Messagen kënnen d' Browser Defaults benotzen (ënnerscheed fir all Browser, an onstylbar iwwer CSS) oder eis personaliséiert Feedback Stiler mat zousätzlech HTML an CSS.
  • Dir kënnt personaliséiert Validitéit Messagen mat setCustomValidityJavaScript ubidden.

Mat deem vergiessen, betruecht déi folgend Demos fir eis personaliséiert Form Validatioun Stiler, optional Server Säit Klassen, a Browser Default.

Benotzerdefinéiert Stiler

Fir personaliséiert Bootstrap Form Validatioun Messagen, musst Dir de novalidatebooleschen Attribut op Är <form>. Dëst deaktivéiert de Browser Standardfeedback Tooltipps, awer gëtt ëmmer nach Zougang zu de Formvalidatiouns-APIs a JavaScript. Probéiert de Formulaire hei drënner ofzeginn; eis JavaScript interceptéiert de Submit Button a relais Feedback un Iech. Wann Dir probéiert ofzeginn, gesitt Dir d' Stiler :invalida :validStiler op Är Form Kontrollen applizéiert.

Benotzerdefinéiert Feedback Stiler gëllen personaliséiert Faarwen, Grenzen, Fokusstiler an Hannergrondikonen fir besser Feedback ze kommunizéieren. Hannergrond Symboler fir <select>s sinn nëmme verfügbar mat .custom-select, an net .form-control.

Gesäit gutt aus!
Gesäit gutt aus!
Gitt weg eng valabel Stad.
Wielt w.e.g. e gültege Staat.
Gitt w.e.g. eng valabel Zip.
Dir musst averstanen ier Dir ofgitt. 
<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 Defaults

Net interesséiert fir personaliséiert Validatioun Feedback Messagen oder JavaScript ze schreiwen fir Form Verhalen z'änneren? Alles gutt, Dir kënnt de Browser Default benotzen. Probéiert de Formulaire hei drënner ofzeginn. Ofhängeg vun Ärem Browser an OS, gesitt Dir e bëssen anere Feedbackstil.

Wärend dës Feedbackstiler net mat CSS stylesch kënne ginn, kënnt Dir ëmmer nach de Feedbacktext duerch JavaScript personaliséieren.

<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 Säit

Mir recommandéieren d'Client-Säit Validatioun ze benotzen, awer am Fall wou Dir Server-Säit Validatioun erfuerdert, kënnt Dir ongëlteg a valabel Formfelder mat .is-invalidan uginn .is-valid. Notéiert datt .invalid-feedbackoch mat dëse Klassen ënnerstëtzt gëtt.

Fir ongëlteg Felder, vergewëssert Iech datt den ongültege Feedback / Fehlermeldung mat dem entspriechende Formulairefeld mat aria-describedby. Dëst Attribut erlaabt méi wéi een idze referenzéieren, am Fall wou d'Feld schonn op zousätzlech Formtext weist.

Gesäit gutt aus!
Gesäit gutt aus!
Gitt weg eng valabel Stad.
Wielt w.e.g. e gültege Staat.
Gitt w.e.g. eng valabel Zip.
Dir musst averstanen ier Dir ofgitt. 
<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>

Ënnerstëtzt Elementer

Validatiounsstile si verfügbar fir déi folgend Form Kontrollen a Komponenten:

  • <input>s an <textarea>s mat.form-control
  • <select>s mat .form-controloder.custom-select
  • .form-checks
  • .custom-checkboxs an .custom-radios
  • .custom-file
Gitt weg e Message am Textberäich.
Beispill ongülteg Feedback Text
Méi Beispill ongülteg Feedback Text
Beispill ongëlteg Benotzerdefinéiert wielt Feedback
Beispill ongëlteg Benotzerdefinéiert Fichier Feedback
@
Beispill ongëlteg Input Grupp Feedback
Beispill ongëlteg Input Grupp Feedback
Beispill ongëlteg Input Grupp 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

Wann Äre Formulaire Layout et erlaabt, kënnt Dir d' .{valid|invalid}-feedbackKlassen fir .{valid|invalid}-tooltipKlassen austauschen fir Validatiounsfeedback an engem styleschen Tooltip ze weisen. Ginn sécher engem Elterendeel mat position: relativeop et fir tooltip Positionéierung. Am Beispill hei drënner hunn eis Kolonnklassen dëst schonn, awer Äre Projet kann en alternativen Setup erfuerderen.

Gesäit gutt aus!
Gesäit gutt aus!
Gitt weg eng valabel Stad.
Wielt w.e.g. e gültege Staat.
Gitt w.e.g. eng valabel 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>

Personnalisatioun

Validatiounsstaaten kënnen iwwer Sass mat der $form-validation-statesKaart personaliséiert ginn. An eiser _variables.scssDatei läit dës Sass Kaart iwwerschratt fir d'Standard valid/ invalidValidatiounszoustand ze generéieren. Abegraff ass eng nestéiert Kaart fir d'Faarf an d'Ikon vun all Staat ze personaliséieren. Wärend keng aner Staate vu Browser ënnerstëtzt ginn, kënnen déi, déi personaliséiert Stiler benotzen, einfach méi komplex Form Feedback addéieren.

Notéiert w.e.g. datt mir net recommandéieren dës Wäerter ze personaliséieren ouni och de form-validation-stateMixin z'änneren.

// 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 Grupp Validatioun

Fir z'entdecken wat Elementer ofgerënnt Ecker bannent engem Input Grupp mat Validatioun brauchen, verlaangt eng Input Grupp eng zousätzlech .has-validationKlass.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Wielt w.e.g. e Benotzernumm.

Benotzerdefinéiert Formen

Fir nach méi Personnalisatioun a Cross-Browser Konsistenz, benotzt eis komplett personaliséiert Formelementer fir d'Browserdefaults ze ersetzen. Si sinn uewen op semanteschen an zougängleche Markup gebaut, sou datt se zolidd Ersatz fir all Standardformkontrolle sinn.

Checkboxen a Radioen

All Checkbox a Radio <input>a <label>Pairing ass an engem gewéckelt <div>fir eis personaliséiert Kontroll ze kreéieren. Strukturell ass dëst déiselwecht Approche wéi eis Standard .form-check.

Mir benotzen de Geschwësterwieler ( ~) fir all eis <input>Staaten - wéi :checked- fir eis personaliséiert Formindikator richteg ze styléieren. Wa mir mat der .custom-control-labelKlass kombinéiert sinn, kënne mir och den Text fir all Element styléieren op Basis <input>vum Zoustand.

Mir verstoppen d'Default <input>mat opacitya benotzen de .custom-control-labelfir en neie personaliséierte Formindikator op senger Plaz mat ::beforean ze bauen ::after. Leider kënne mir net e Benotzerdefinéiert aus just bauen <input>well CSS contentnet op deem Element funktionnéiert.

An de kontrolléierte Staaten benotze mir base64 embedded SVG Symboler vun Open Iconic . Dëst bitt eis déi bescht Kontroll fir Styling a Positionéierung iwwer Browser an Apparater.

Checkboxen

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

Benotzerdefinéiert Checkboxen kënnen och d' :indeterminatePseudo-Klass benotzen wann se manuell iwwer JavaScript gesat ginn (et gëtt kee verfügbaren HTML Attribut fir et ze spezifizéieren).

Wann Dir jQuery benotzt, sou eppes sollt duergoen:

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

Radioen

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

An der Schlaang

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" 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="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Behënnert

Benotzerdefinéiert Checkboxen a Radios kënnen och behënnert ginn. Füügt de disabledbooleschen Attribut un <input>an de personaliséierten Indikator an d'Labelbeschreiwung ginn automatesch stiléiert.

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

Schalter

E Schalter huet d'Markup vun enger personaliséierter Checkbox awer benotzt d' .custom-switchKlass fir en Toggle Switch ze maachen. Schalter ënnerstëtzen och den disabledAttribut.

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

Wielt Menü

Benotzerdefinéiert <select>Menüe brauchen nëmmen eng personaliséiert Klass, .custom-selectfir déi personaliséiert Stiler auszeléisen. Benotzerdefinéiert Stiler si limitéiert op <select>den initialen Erscheinungsbild a kënnen d' <option>S net änneren wéinst Browserbeschränkungen.

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

Dir kënnt och vu klengen a grousse personaliséierte Selektioune wielen fir eis ähnlech Gréissten Textinputen ze passen.

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

Den multipleAttribut gëtt och ënnerstëtzt:

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

Wéi ass den sizeAttribut:

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

Range

Erstellt personaliséiert <input type="range">Kontrollen mat .custom-range. D'Streck (den Hannergrond) an den Daumen (de Wäert) sinn allebéid stylesch fir d'selwecht iwwer Browser ze erschéngen. Well nëmmen IE a Firefox ënnerstëtzen hir Streck vu lénks oder riets vum Daum ze "fillen" als Mëttel fir visuell Fortschrëtter ze weisen, ënnerstëtzen mir et am Moment net.

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

Range-Inputen hunn implizit Wäerter fir minan max- 0an 100, respektiv. Dir kënnt nei Wäerter spezifizéieren fir déi déi d' minAttributer maxbenotzen.

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

Par défaut, Gamme Input "snap" op ganz Zuelen Wäerter. Fir dëst z'änneren, kënnt Dir e stepWäert uginn. Am Beispill hei drënner verduebele mir d'Zuel vun de Schrëtt mat step="0.5".

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

Dateibrowser

De empfohlene Plugin fir personaliséiert Dateieinput ze animéieren: bs-custom-file-input , dat ass wat mir am Moment hei an eisen Dokumenter benotzen.

D'Dateiinput ass dee schmuelste vun der Rëtsch a erfuerdert zousätzlech JavaScript wann Dir se mat funktionnelle Wielt Datei ukoppelen ... a gewielten Dateinumm Text.

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

Mir verstoppen d'Standarddatei <input>iwwer opacityan stattdessen de <label>. De Knäppchen gëtt generéiert a positionéiert mat ::after. Endlech erkläre mir eng widthan heightop der <input>fir adäquate Abstand fir Ëmgéigend Inhalt.

Iwwersetzen oder personaliséieren d'Strings mat SCSS

D' :lang()Pseudo-Klass gëtt benotzt fir d'Iwwersetzung vum "Browse" Text an aner Sproochen z'erméiglechen. Iwwerschreift oder füügt Entréen un d' $custom-file-textSass Variabel mat dem relevante Sproochetag a lokaliséierte Strings. Déi englesch Saiten kënnen op déiselwecht Manéier personaliséiert ginn. Zum Beispill, hei ass wéi een eng spuenesch Iwwersetzung derbäi kënnt (Spuenesch Sproochecode ass es):

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

Hei ass lang(es)an Handlung op de personaliséierte Dateiinput fir eng spuenesch Iwwersetzung:

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

Dir musst d'Sprooch vun Ärem Dokument (oder Ënnerbaum dovun) korrekt astellen, fir datt de richtegen Text ugewise gëtt. Dëst kann mat dem langAttribut am <html>Element oder dem Content-LanguageHTTP Header gemaach ginn, ënner anerem Methoden.

Iwwersetzen oder personaliséieren d'Strings mat HTML

Bootstrap bitt och e Wee fir den "Browse" Text an HTML mat dem data-browseAttribut ze iwwersetzen, deen op de personaliséierten Input Label bäigefüügt ka ginn (Beispill op Hollännesch):

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