Source

Formoj

Ekzemploj kaj uzgvidlinioj por formo-kontrolstiloj, aranĝaj opcioj kaj kutimaj komponantoj por krei diversajn formojn.

Superrigardo

La formularaj kontroloj de Bootstrap plivastiĝas sur niaj Rebootitaj formularstiloj kun klasoj. Uzu ĉi tiujn klasojn por elekti siajn personecigitajn ekranojn por pli konsekvenca bildigo tra retumiloj kaj aparatoj.

Nepre uzu taŭgan typeatributon ĉe ĉiuj enigaĵoj (ekz. emailpor retpoŝta adreso aŭ numberpor nombraj informoj) por utiligi pli novajn enigajn kontrolojn kiel retpoŝtan konfirmon, nombro-elekton kaj pli.

Jen rapida ekzemplo por montri la formularajn stilojn de Bootstrap. Daŭre legu por dokumentado pri postulataj klasoj, formulararanĝo kaj pli.

Ni neniam dividos vian retpoŝton kun iu ajn alia. 
<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>

Formkontroloj

Tekstaj formkontroloj—kiel <input>s, <select>s, kaj <textarea>s—estas stilitaj kun la .form-controlklaso. Inkluditaj estas stiloj por ĝenerala aspekto, fokusa stato, grandeco kaj pli.

Nepre esploru niajn kutimajn formojn por plu stiligi <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>

Por dosieraj enigaĵoj, interŝanĝu la .form-controlpor .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>

Dimensio

Agordu altecojn uzante klasojn kiel .form-control-lgkaj .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>

Nurlegebla

Aldonu la readonlybulean atributon al enigo por malhelpi modifon de la valoro de la enigo. Nurlegeblaj enigaĵoj ŝajnas pli malpezaj (same kiel malebligitaj enigaĵoj), sed konservas la norman kursoron.

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

Nur legebla simpla teksto

Se vi volas havi <input readonly>elementojn en via formularo stilitaj kiel simpla teksto, uzu la .form-control-plaintextklason por forigi la defaŭltan formularan kampan stiladon kaj konservi la ĝustan marĝenon kaj kompletigo.

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

Gamaj Enigoj

Agordu horizontale ruleblajn intervalenigojn per .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>

Markobutonoj kaj radioj

Defaŭltaj markobutonoj kaj radioj estas plibonigitaj helpe de .form-check, ununura klaso por ambaŭ enigtipoj, kiu plibonigas la aranĝon kaj konduton de iliaj HTML-elementoj . Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo, dum radioj estas por elekti unu opcion el multaj.

Malebligitaj markobutonoj kaj radioj estas subtenataj. La disabledatributo aplikos pli malpezan koloron por helpi indiki la staton de la enigo.

Markobutonoj kaj radiobutonoj subtenas HTML-bazitan formularvalidigon kaj disponigas koncizajn, alireblajn etikedojn. Kiel tia, niaj <input>s kaj <label>s estas gefrataj elementoj kontraste al <input>ene de <label>. Ĉi tio estas iomete pli multvorta ĉar vi devas specifi idkaj foratributojn por rilatigi la <input>kaj <label>.

Defaŭlte (stakita)

Defaŭlte, ajna nombro da markobutonoj kaj radioj kiuj estas tujaj gefratoj estos vertikale stakigitaj kaj taŭge interspacigitaj per .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>

En linio

Grupigu markobutonojn aŭ radiojn sur la sama horizontala vico aldonante .form-check-inlineal iu ajn .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>

Sen etikedoj

Aldonu .position-statical enigaĵoj ene de .form-checkkiuj ne havas ajnan etikedtekston. Memoru ankoraŭ provizi iun formon de etikedo por helpaj teknologioj (ekzemple, uzante 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>

Aranĝo

Ĉar Bootstrap validas display: blockkaj width: 100%al preskaŭ ĉiuj niaj formularaj kontroloj, formoj defaŭlte stablos vertikale. Pliaj klasoj povas esti uzataj por variigi ĉi tiun aranĝon laŭ forma bazo.

Formu grupojn

La .form-groupklaso estas la plej facila maniero aldoni iom da strukturo al formoj. Ĝi disponigas flekseblan klason kiu instigas taŭgan grupigon de etikedoj, kontroloj, laŭvola helpteksto, kaj formularvalidigmesaĝado. Defaŭlte ĝi nur aplikas margin-bottom, sed ĝi prenas pliajn stilojn .form-inlinelaŭbezone. Uzu ĝin kun <fieldset>s, <div>s aŭ preskaŭ ajna alia elemento.

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

Formu kradon

Pli kompleksaj formoj povas esti konstruitaj uzante niajn kradklasojn. Uzu ĉi tiujn por formularaj aranĝoj, kiuj postulas multoblajn kolumnojn, diversajn larĝojn kaj pliajn alineajn opciojn.

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

Vi ankaŭ povas interŝanĝi .rowpor .form-row, vario de nia norma kradvico, kiu anstataŭas la defaŭltajn kolonkanalojn por pli striktaj kaj pli kompaktaj aranĝoj.

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

Pli kompleksaj aranĝoj ankaŭ povas esti kreitaj per la kradsistemo.

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

Horizontala formo

Kreu horizontalajn formojn kun la krado aldonante la .rowklason por formi grupojn kaj uzante la .col-*-*klasojn por specifi la larĝon de viaj etikedoj kaj kontroloj. Nepre aldonu .col-form-labelankaŭ al viaj <label>s, por ke ili estu vertikale centritaj kun siaj rilataj formularaj kontroloj.

Foje, vi eble bezonos uzi marĝenajn aŭ kompletigajn ilojn por krei tiun perfektan vicigon, kiun vi bezonas. Ekzemple, ni forigis la padding-topetikedon de nia stakigita radio-enigo por pli bone vicigi la tekstan bazlinion.

Radioaparatoj
Markobutono 
<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>
Horizontala formo etikedo grandeco

Nepre uzu .col-form-label-smaŭ .col-form-label-lgal viaj <label>s aŭ <legend>s por ĝuste sekvi la grandecon de .form-control-lgkaj .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>

Kolumna grandeco

Kiel montrite en la antaŭaj ekzemploj, nia kradsistemo permesas vin meti ajnan nombron da .cols ene de a .rowaŭ .form-row. Ili dividos la disponeblan larĝon egale inter ili. Vi ankaŭ povas elekti subaron de viaj kolumnoj por okupi pli-malpli da spaco, dum la ceteraj .cols egale disigas la ceterajn, kun specifaj kolumnaj klasoj kiel .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>

Aŭtomata grandeco

La ĉi-suba ekzemplo uzas flexbox-ilaĵon por vertikale centri la enhavon kaj ŝanĝi .colal .col-autotiel, ke viaj kolumnoj nur okupas tiom da spaco kiom necesas. Aliflanke, la kolumno grandigas sin surbaze de la enhavo.

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

Vi tiam povas remiksi tion denove kun grandeco-specifaj kolumnaj klasoj.

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

Kaj kompreneble kutimaj formularaj kontroloj estas subtenataj.

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

Enliniaj formoj

Uzu la .form-inlineklason por montri serion da etikedoj, formularaj kontroloj kaj butonoj sur unu horizontala vico. Formkontroloj ene de enliniaj formoj iomete varias de siaj defaŭltaj statoj.

  • Kontroloj estas display: flex, kolapsante ajnan HTML-blankan spacon kaj ebligante al vi provizi vickontrolon kun interspacigaj kaj flekskesto iloj.
  • Kontroloj kaj eniggrupoj ricevas width: autopor anstataŭi la defaŭltan Bootstrap width: 100%.
  • Kontroloj nur aperas enlinie en vidfenestroj kiuj estas almenaŭ 576px larĝaj por respondeci pri mallarĝaj vidfenestroj sur porteblaj aparatoj.

Vi eble bezonos mane trakti la larĝecon kaj vicigon de individuaj formularaj kontroloj kun interspacaj utilecoj (kiel montrite sube). Finfine, nepre ĉiam inkluzivi <label>ĉe ĉiu formulara kontrolo, eĉ se vi bezonas kaŝi ĝin de ne-ekranlegantaj vizitantoj per .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>

Propraj formularaj kontroloj kaj elektoj ankaŭ estas subtenataj.

<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>
Alternativoj al kaŝitaj etikedoj

Helpaj teknologioj kiel ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj enliniaj formoj, vi povas kaŝi la etikedojn uzante la .sr-onlyklason. Ekzistas pliaj alternativaj metodoj provizi etikedon por helpaj teknologioj, kiel ekzemple la aria-label, aria-labelledbyaŭ titleatributo. Se neniu el ĉi tiuj ĉeestas, helpaj teknologioj povas recurri al uzado de la placeholderatributo, se ĉeestas, sed notu ke uzo de placeholderkiel anstataŭaĵo por aliaj etikedmetodoj ne estas konsilita.

Helpa teksto

Bloknivela helpteksto en formoj povas esti kreita uzante .form-text(antaŭe konata kiel .help-blocken v3). Enlinia helpteksto povas esti flekseble efektivigita uzante ajnan enlinian HTML-elementon kaj utilklasojn kiel .text-muted.

Asocii helpan tekston kun formularaj kontroloj

Helpteksto devus esti eksplicite asociita kun la formo-kontrolo al kiu ĝi rilatas uzante la aria-describedbyatributon. Ĉi tio certigos, ke helpaj teknologioj—kiel ekranlegiloj—anoncos ĉi tiun helptekston kiam la uzanto fokusas aŭ eniras la kontrolon.

Helpteksto sub enigaĵoj povas esti stilitaj per .form-text. Ĉi tiu klaso inkluzivas display: blockkaj aldonas iom da supra marĝeno por facila interspacigo de la enigoj supre.

Via pasvorto devas havi 8-20 signojn longa, enhavi literojn kaj ciferojn, kaj ne devas enhavi spacojn, specialajn signojn aŭ emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Enlinia teksto povas uzi ajnan tipan enlinian HTML-elementon (ĉu ĝi <small>, <span>, aŭ io alia) kun nenio pli ol utileca klaso.

Devas havi 8-20 signojn longa. 
<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>

Malebligitaj formoj

Aldonu la disabledbulean atributon al enigo por malhelpi uzantinteragojn kaj fari ĝin aspekti pli malpeza.

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

Aldonu la disabledatributon al a <fieldset>por malŝalti ĉiujn kontrolojn ene.

<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>
Averto kun ankroj

Defaŭlte, retumiloj traktos ĉiujn denaskajn formkontrolojn ( <input>, <select>kaj <button>elementoj) ene de <fieldset disabled>kiel malŝaltitaj, malhelpante ambaŭ klavarajn kaj musajn interagojn sur ili. Tamen, se via formo ankaŭ inkluzivas <a ... class="btn btn-*">elementojn, ĉi tiuj nur ricevos stilon pointer-events: none. Kiel notite en la sekcio pri malfunkciigita stato por butonoj (kaj specife en la subsekcio por ankraj elementoj), ĉi tiu CSS-posedaĵo ankoraŭ ne estas normigita kaj ne estas plene subtenata en Internet Explorer 10, kaj ne malhelpas klavaruzantojn esti. kapabla enfokusigi aŭ aktivigi ĉi tiujn ligilojn. Do por esti sekura, uzu kutiman JavaScript por malŝalti tiajn ligilojn.

Inter-retumila kongruo

Dum Bootstrap aplikos ĉi tiujn stilojn en ĉiuj retumiloj, Internet Explorer 11 kaj sube ne plene subtenas la disabledatributon sur <fieldset>. Uzu kutiman JavaScript por malŝalti la kamparon en ĉi tiuj retumiloj.

Valido

Provizu valorajn, ageblajn komentojn al viaj uzantoj per HTML5-formula validigo - havebla en ĉiuj niaj subtenataj retumiloj . Elektu el la retumilo defaŭlta validumada sugesto, aŭ efektivigu kutimajn mesaĝojn kun niaj enkonstruitaj klasoj kaj komenca JavaScript.

Ni nuntempe rekomendas uzi kutimajn validigajn stilojn, ĉar denaskaj retumiloj defaŭltaj konfirmmesaĝoj ne estas konstante elmontritaj al helpaj teknologioj en ĉiuj retumiloj (plej precipe, Chrome sur labortablo kaj poŝtelefono).

Kiel ĝi funkcias

Jen kiel validado de formularoj funkcias kun Bootstrap:

  • HTML-formvalidigo estas aplikata per la du pseŭdoklasoj de CSS, :invalidkaj :valid. Ĝi validas por <input>, <select>, kaj <textarea>elementoj.
  • Bootstrap ampleksas la :invalidkaj :validstilojn al gepatra .was-validatedklaso, kutime aplikita al la <form>. Alie, ajna postulata kampo sen valoro aperas kiel nevalida ĉe paĝa ŝarĝo. Tiel, vi povas elekti kiam aktivigi ilin (tipe post kiam la formularo estas provita).
  • Por restarigi la aspekton de la formularo (ekzemple, en la kazo de dinamikaj formularaj sendadoj uzante AJAX), forigu la .was-validatedklason de la <form>denove post sendo.
  • Kiel rezerva, .is-invalidkaj .is-validklasoj povas esti uzataj anstataŭ la pseŭdo-klasoj por servilflanka validumado . Ili ne postulas .was-validatedgepatran klason.
  • Pro limoj en kiel CSS funkcias, ni ne povas (nuntempe) apliki stilojn al <label>kiu venas antaŭ formo-kontrolo en la DOM sen la helpo de kutima JavaScript.
  • Ĉiuj modernaj retumiloj subtenas la limigan validumadon API , serion de JavaScript-metodoj por validigi formularajn kontrolojn.
  • Reagomesaĝoj povas utiligi la defaŭltajn retumilon (malsamajn por ĉiu retumilo, kaj malstileblajn per CSS) aŭ niajn kutimajn retrostilojn kun pliaj HTML kaj CSS.
  • Vi povas provizi kutimajn validecajn mesaĝojn setCustomValidityen JavaScript.

Konsiderante tion, konsideru la sekvajn demonstraĵojn por niaj kutimaj formularaj validigaj stiloj, laŭvolaj servilaj flankaj klasoj kaj retumiloj defaŭltaj.

Propraj stiloj

Por kutimaj Bootstrap formularvalidigaj mesaĝoj, vi devos aldoni la novalidatebulean atributon al via <form>. Ĉi tio malŝaltas la defaŭltajn sugestajn konsiletojn de la retumilo, sed ankoraŭ disponigas aliron al la API-validigaj formularoj en JavaScript. Provu sendi la suban formularon; nia JavaScript kaptos la sendi butonon kaj sendos komentojn al vi. Kiam vi provas sendi, vi vidos la stilojn :invalidkaj aplikatajn al viaj formularaj kontroloj.:valid

Propraj sugestiloj aplikas kutimajn kolorojn, randojn, fokusajn stilojn kaj fonajn ikonojn por pli bone komuniki komentojn. Fonaj piktogramoj por <select>s disponeblas nur kun .custom-select, kaj ne .form-control.

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

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

Retumilo defaŭlta

Ne interesiĝas pri kutimaj validigaj sugestaj mesaĝoj aŭ skribi JavaScript por ŝanĝi formajn kondutojn? Ĉio bone, vi povas uzi la defaŭltajn retumilon. Provu sendi la suban formularon. Depende de via retumilo kaj OS, vi vidos iomete malsaman stilon de retrosciigo.

Kvankam ĉi tiuj sugestiloj ne povas esti stilitaj per CSS, vi ankoraŭ povas personecigi la sugestajn tekstojn per JavaScript.

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

Servila flanko

Ni rekomendas uzi klientflankan validigon, sed se vi postulas servilflankan validigon, vi povas indiki nevalidajn kaj validajn formularajn kampojn per .is-invalidkaj .is-valid. Notu, ke .invalid-feedbackankaŭ estas subtenata kun ĉi tiuj klasoj.

Aspektas bone!
Aspektas bone!
@
Bonvolu elekti uzantnomon.
Bonvolu provizi validan urbon.
Bonvolu elekti validan ŝtaton.
Bonvolu doni validan zipon.
Vi devas konsenti antaŭ ol sendi. 
<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>

Subtenataj elementoj

Validaj stiloj disponeblas por la sekvaj formularaj kontroloj kaj komponantoj:

  • <input>s kaj <textarea>s kun .form-control(inkluzive de ĝis unu .form-controlen eniggrupoj)
  • <select>s kun .form-controlaŭ.custom-select
  • .form-checks
  • .custom-checkboxs kaj .custom-radios
  • .custom-file
Bonvolu enigi mesaĝon en la teksta areo.
Ekzemplo nevalida sugesta teksto
Pli da ekzemplo nevalida sugesta teksto
Ekzemplo nevalida kutima elekta sugesto
Ekzemplo nevalida propra dosiera sugesto 
<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>

Konsiletoj

Se via formulararanĝo permesas ĝin, vi povas interŝanĝi la .{valid|invalid}-feedbackklasojn por .{valid|invalid}-tooltipklasoj por montri validigajn sugestojn en stilita konsileto. Nepre havu gepatron kun position: relativeĝi por poziciigado de konsileto. En la malsupra ekzemplo, niaj kolumnaj klasoj jam havas ĉi tion, sed via projekto eble postulas alternativan aranĝon.

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>

Agordado

Validaj ŝtatoj povas esti personecigitaj per Sass kun la $form-validation-statesmapo. Lokita en nia _variables.scssdosiero, ĉi tiu Sass-mapo estas cirkulita por generi la defaŭltajn valid/ invalidvalidigajn statojn. Inkludita estas nestita mapo por agordi la koloron kaj ikonon de ĉiu ŝtato. Dum neniuj aliaj ŝtatoj estas subtenataj de retumiloj, tiuj, kiuj uzas kutimajn stilojn, povas facile aldoni pli kompleksajn formularajn sugestojn.

Bonvolu noti, ke ni ne rekomendas personecigi ĉi tiujn valorojn sen ankaŭ modifi la form-validation-statemiksaĵon.

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

Propraj formoj

Por eĉ pli da personigo kaj trans-retumila konsekvenco, uzu niajn tute laŭmendajn formularelementojn por anstataŭigi la defaŭltajn retumilon. Ili estas konstruitaj sur semantika kaj alirebla markado, do ili estas solidaj anstataŭaĵoj por ajna defaŭlta formo-kontrolo.

Markobutonoj kaj radioj

Ĉiu markobutono kaj radio <input>kaj <label>parigo estas envolvitaj en <div>por krei nian kutiman kontrolon. Strukture, ĉi tiu estas la sama aliro kiel nia defaŭlta .form-check.

Ni uzas la gefratan elektilon ( ~) por ĉiuj niaj <input>ŝtatoj—kiel :checked—por taŭge stiligi nian kutiman formularindikilon. Se kombinite kun la .custom-control-labelklaso, ni ankaŭ povas stiligi la tekston por ĉiu ero surbaze de la <input>stato de la '.

Ni kaŝas la defaŭltan <input>per opacitykaj uzas la .custom-control-labelpor konstrui novan propran formularan indikilon en ĝia loko kun ::beforekaj ::after. Bedaŭrinde ni ne povas konstrui kutiman el nur la <input>ĉar CSS-oj contentne funkcias sur tiu elemento.

En la kontrolitaj ŝtatoj, ni uzas baz64-enkorpigitajn SVG-ikonojn de Open Iconic . Ĉi tio provizas al ni la plej bonan kontrolon por stilado kaj poziciigado tra retumiloj kaj aparatoj.

Markobutonoj

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

Propraj markobutonoj ankaŭ povas uzi la :indeterminatepseŭdoklason kiam permane agordita per JavaScript (ne ekzistas disponebla HTML-atributo por specifi ĝin).

Se vi uzas jQuery, io tia devus sufiĉi:

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

Radioaparatoj

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

En linio

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

Malebligita

Propraj markobutonoj kaj radioj ankaŭ povas esti malŝaltitaj. Aldonu la disabledbulean atributon al la <input>kaj la kutima indikilo kaj etikedo priskribo estos aŭtomate stilitaj.

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

Ŝaltiloj

Ŝaltilo havas la markadon de kutima markobutono sed uzas la .custom-switchklason por bildigi baskulon. Ŝaltiloj ankaŭ subtenas la disabledatributon.

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

Elektu menuon

Propraj <select>menuoj bezonas nur kutiman klason, .custom-selectpor ekigi la kutimajn stilojn. Propraj stiloj estas limigitaj al la <select>komenca aspekto de la s kaj ne povas modifi la <option>s pro retumila limigo.

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

Vi ankaŭ povas elekti el malgrandaj kaj grandaj kutimaj elektoj por kongrui kun niaj samgrandaj tekstaj enigoj.

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

La multipleatributo ankaŭ estas subtenata:

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

Kiel estas la sizeatributo:

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

Gamo

Kreu kutimajn <input type="range">kontrolojn per .custom-range. La trako (la fono) kaj dikfingro (la valoro) estas ambaŭ stilitaj por aperi la sama tra retumiloj. Ĉar nur IE kaj Fajrovulpo subtenas "plenigi" ilian trakon de la maldekstra aŭ dekstre de la dikfingro kiel rimedo por vide indiki progreson, ni nuntempe ne subtenas ĝin.

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

Gamaj enigaĵoj havas implicajn valorojn por minkaj max— 0kaj 100, respektive. Vi povas specifi novajn valorojn por tiuj uzantaj la minkaj maxatributojn.

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

Defaŭlte, intervalo enigaĵoj "krap" al entjervaloroj. Por ŝanĝi ĉi tion, vi povas specifi stepvaloron. En la malsupra ekzemplo, ni duobligas la nombron da paŝoj uzante step="0.5".

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

Dosiera retumilo

La rekomendita kromaĵo por animi laŭmendan enigon de dosiero: bs-custom-file-input , tion ni uzas nuntempe ĉi tie en niaj dokumentoj.

La dosiera enigo estas la plej malnobla el la aro kaj postulas plian JavaScript se vi ŝatus kunligi ilin kun funkcia Elektu dosieron... kaj elektitan dosiernoman tekston.

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

Ni kaŝas la defaŭltan dosieron <input>per opacitykaj anstataŭe stiligas la <label>. La butono estas generita kaj poziciigita per ::after. Finfine, ni deklaras a widthkaj heightsur la <input>por taŭga interspaco por ĉirkaŭa enhavo.

Traduki aŭ agordi la ŝnurojn per SCSS

La :lang()pseŭdo-klaso estas uzata por permesi tradukadon de la teksto "Frumu" al aliaj lingvoj. Anstataŭigi aŭ aldonu enskribojn al la $custom-file-textvariablo Sass kun la koncerna lingvo-etikedo kaj lokalizitaj ĉenoj. La anglaj kordoj povas esti personecigitaj same. Ekzemple, jen kiel oni povus aldoni hispanan tradukon (la kodo de la hispana lingvo estas es):

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

Jen lang(es)en ago pri la kutima dosier-enigo por hispana traduko:

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

Vi devos ĝuste agordi la lingvon de via dokumento (aŭ subarbo) por ke la ĝusta teksto estu montrita. Ĉi tio povas esti farita uzante la langatributon sur la <html>elemento aŭ la Content-LanguageHTTP-kapo , inter aliaj metodoj.

Tradukante aŭ personigante la ĉenojn per HTML

Bootstrap ankaŭ disponigas manieron traduki la tekston "Frumu" en HTML kun la data-browseatributo kiu povas esti aldonita al la kutima eniga etikedo (ekzemplo en la nederlanda):

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