Source

Formoli

Eżempji u linji gwida għall-użu għal stili ta 'kontroll tal-formoli, għażliet ta' tqassim, u komponenti tad-dwana għall-ħolqien ta 'varjetà wiesgħa ta' formoli.

Ħarsa ġenerali

Il-kontrolli tal-formoli tal-Bootstrap jespandu fuq l-istili tal-forma Rebooted tagħna bil-klassijiet. Uża dawn il-klassijiet biex tagħżel id-displejs personalizzati tagħhom għal rendering aktar konsistenti fil-browsers u l-apparati.

Kun żgur li tuża typeattribut xieraq fuq l-inputs kollha (eż., emailgħall-indirizz tal-email jew numbergħal informazzjoni numerika) biex tieħu vantaġġ minn kontrolli tal-input aktar ġodda bħall-verifika tal-email, l-għażla tan-numri, u aktar.

Hawn eżempju ta 'malajr biex turi l-istili tal-forma ta' Bootstrap. Kompli aqra għad-dokumentazzjoni dwar il-klassijiet meħtieġa, it-tqassim tal-formoli, u aktar.

Qatt ma ser naqsmu l-email tiegħek ma' ħaddieħor. 
<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>

Kontrolli tal-formola

Kontrolli tal-forma testwali—bħal <input>s, <select>s, u <textarea>s—huma stilati mal- .form-controlklassi. Inklużi huma stili għad-dehra ġenerali, l-istat tal-fokus, id-daqs, u aktar.

Kun żgur li tesplora l- formoli tad-dwana tagħna biex aktar 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>

Għall-inputs tal-fajl, aqleb .form-controlil- .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>

Daqs

Issettja l-għoli billi tuża klassijiet bħal .form-control-lgu .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>

Aqra biss

Żid l- readonlyattribut boolean fuq input biex tevita l-modifika tal-valur tal-input. Inputs li jinqraw biss jidhru eħfef (bħal inputs b'diżabilità), iżda jżommu l-cursor standard.

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

Test sempliċi biss

Jekk trid li jkollok <input readonly>elementi fil-forma tiegħek stilati bħala test sempliċi, uża l- .form-control-plaintextklassi biex tneħħi l-istil tal-qasam tal-formola default u tippreserva l-marġni u l-ikkuttunar korretti.

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

Inputs tal-Medda

Issettja l-inputs tal-firxa li jistgħu jiskrollaw orizzontalment billi tuża .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Checkboxes u radjijiet

Checkboxes default u radjijiet huma mtejba bl-għajnuna ta ' .form-check, klassi waħda għaż-żewġ tipi ta' input li ttejjeb it-tqassim u l-imġieba tal-elementi HTML tagħhom . Il-kaxxi ta' kontroll huma biex tagħżel għażla waħda jew diversi f'lista, filwaqt li r-radjijiet huma biex tagħżel għażla waħda minn ħafna.

Kaxxi ta' kontroll u radjijiet b'diżabilità huma appoġġjati. L- disabledattribut se japplika kulur eħfef biex jgħin jindika l-istat tal-input.

Il-kaxxi ta' kontroll u l-buttuni tar-radju jappoġġjaw il-validazzjoni tal-formola bbażata fuq HTML u jipprovdu tikketti konċiżi u aċċessibbli. Bħala tali, <input>s u s tagħna <label>huma elementi aħwa għall-kuntrarju ta ' <input>fi ħdan a <label>. Dan huwa kemmxejn aktar verbose peress li trid tispeċifika idu forattributi biex tirrelata l- <input>u <label>.

Default (munzelli)

B'mod awtomatiku, kwalunkwe numru ta' kaxxi ta' kontroll u radjijiet li huma aħwa immedjati se jkunu f'munzelli vertikalment u spazjati b'mod xieraq bi .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>

F'konformità

Aggruppa kaxxi ta' kontroll jew radjijiet fuq l-istess ringiela orizzontali billi żżid .form-check-inlinema' kwalunkwe .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>

Mingħajr tikketti

Żid .position-staticmal-inputs fi ħdan .form-checkli m'għandhom l-ebda test tat-tikketta. Ftakar li xorta tipprovdi xi forma ta' tikketta għal teknoloġiji ta' assistenza (pereżempju, billi tuża 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>

Tqassim

Peress li Bootstrap japplika display: blocku width: 100%għal kważi l-kontrolli kollha tal-formoli tagħna, il-formoli awtomatikament jintivaw vertikalment. Klassijiet addizzjonali jistgħu jintużaw biex ivarjaw dan it-tqassim fuq bażi ta' kull forma.

Forma gruppi

Il- .form-groupklassi hija l-eħfef mod biex iżżid xi struttura mal-formoli. Jipprovdi klassi flessibbli li tinkoraġġixxi grupp xieraq ta 'tikketti, kontrolli, test ta' għajnuna fakultattiv, u messaġġi ta 'validazzjoni tal-formoli. B'mod awtomatiku japplika biss margin-bottom, iżda jiġbor stili addizzjonali .form-inlinekif meħtieġ. Użaha ma ' <fieldset>s, <div>s, jew kważi kull element ieħor.

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

Forma grilja

Forom aktar kumplessi jistgħu jinbnew bl-użu tal-klassijiet tal-grilja tagħna. Uża dawn għal taqsim tal-formoli li jeħtieġu kolonni multipli, wisgħat varjati, u għażliet ta 'allinjament addizzjonali.

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

Formola ringiela

Tista 'wkoll tiskambja .rowgħal .form-row, varjazzjoni tar-ringiela standard tal-grilja tagħna li tegħleb il-kanal tal-kolonna default għal layouts aktar stretti u kompatti.

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

Jistgħu jinħolqu wkoll layouts aktar kumplessi bis-sistema tal-grilja.

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

Forma orizzontali

Oħloq forom orizzontali mal-grilja billi żżid il- .rowklassi biex tifforma gruppi u tuża l- .col-*-*klassijiet biex tispeċifika l-wisa 'ta' tikketti u kontrolli tiegħek. Kun żgur li żżid .col-form-labelmal- <label>i tiegħek ukoll sabiex ikunu ċċentrata vertikalment mal-kontrolli tal-forma assoċjati tagħhom.

Xi drabi, forsi jkollok bżonn tuża utilitajiet tal-marġni jew tal-ikkuttunar biex toħloq dak l-allinjament perfett li għandek bżonn. Pereżempju, padding-topneħħejna t-tikketta tal-inputs tar-radju stacked tagħna biex tallinja aħjar il-linja bażi tat-test.

Radjijiet
Checkbox 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Daqs tat-tikketta tal-forma orizzontali

Kun żgur li tuża .col-form-label-smjew .col-form-label-lglill- <label>s jew <legend>s tiegħek biex issegwi b'mod korrett id-daqs ta ' .form-control-lgu .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>

Daqs tal-kolonna

Kif muri fl-eżempji preċedenti, is-sistema tal-grilja tagħna tippermettilek tpoġġi kwalunkwe numru ta ' .cols fi ħdan a .rowjew .form-row. Huma ser jaqsmu l-wisa 'disponibbli b'mod ugwali bejniethom. Tista 'wkoll tagħżel subsett tal-kolonni tiegħek biex tieħu aktar jew inqas spazju, filwaqt li l- .coli li jifdal jaqsmu ugwalment il-bqija, bi klassijiet ta' kolonni speċifiċi bħal .col-7.

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

Auto-sizing

L-eżempju hawn taħt juża utilità flexbox biex iċċentra vertikalment il-kontenut u jibdel .colbiex .col-autoil-kolonni tiegħek jieħdu biss spazju kemm meħtieġ. Fi kliem ieħor, id-daqsijiet tal-kolonna innifsu bbażati fuq il-kontenut.

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

Tista 'mbagħad remix li għal darb'oħra bi klassijiet ta' kolonni speċifiċi għad-daqs.

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

U ovvjament il -kontrolli tal-forma tad-dwana huma appoġġjati.

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

Formoli inline

Uża l- .form-inlineklassi biex turi serje ta’ tikketti, kontrolli tal-formoli u buttuni fuq ringiela orizzontali waħda. Il-kontrolli tal-formoli fi ħdan il-formoli inline jvarjaw xi ftit mill-istati awtomatiċi tagħhom.

  • Il-kontrolli huma display: flex, jiġġarrfu kwalunkwe spazju abjad HTML u jippermettulek tipprovdi kontroll tal-allinjament bi spazjar u utilitajiet tal- flexbox .
  • Il-kontrolli u l-gruppi ta' input jirċievu width: autobiex jegħlbu l-bootstrap default width: 100%.
  • Il- kontrolli jidhru inline biss f'viewports li huma wiesgħa mill-inqas 576px biex jagħtu kont ta' viewports dojoq fuq apparat mobbli.

Jista 'jkollok bżonn tindirizza manwalment il-wisa' u l-allinjament tal-kontrolli tal-forma individwali b'utilitajiet ta ' spazjar (kif muri hawn taħt). Fl-aħħar nett, kun żgur li dejjem tinkludi <label>ma' kull kontroll tal-formola, anki jekk ikollok bżonn taħbiha minn viżitaturi li ma jaqrawx l-iskrin b' .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>

Il-kontrolli u l-għażla tal-formola tad-dwana huma appoġġjati wkoll.

<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>
Alternattivi għal tikketti moħbija

Teknoloġiji ta' assistenza bħal screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-formoli inline, tista 'taħbi t-tikketti billi tuża l- .sr-onlyklassi. Hemm metodi alternattivi oħra biex tiġi pprovduta tikketta għal teknoloġiji ta' assistenza, bħall- aria-label, aria-labelledbyjew l- titleattribut. Jekk l-ebda waħda minn dawn ma tkun preżenti, it-teknoloġiji ta' assistenza jistgħu jirrikorru għall-użu tal- placeholderattribut, jekk ikun preżenti, iżda innota li l-użu ta' placeholderbħala sostitut għal metodi oħra ta' tikkettjar mhuwiex rakkomandat.

Test ta' għajnuna

Test ta 'għajnuna fil-livell ta' blokk fil-formoli jista 'jinħoloq bl-użu .form-text(magħruf qabel bħala .help-blockfil-v3). It-test ta' għajnuna inline jista' jiġi implimentat b'mod flessibbli bl-użu ta' kwalunkwe element HTML inline u klassijiet ta' utilità bħal .text-muted.

Assoċja test ta' għajnuna mal-kontrolli tal-formoli

It-test tal-għajnuna għandu jkun assoċjat b'mod espliċitu mal-kontroll tal-forma li jirrelata mal-użu tal- aria-describedbyattribut. Dan se jiżgura li t-teknoloġiji ta' assistenza—bħal screen readers—se jħabbru dan it-test ta' għajnuna meta l-utent jiffoka jew jidħol fil-kontroll.

It-test ta' għajnuna hawn taħt l-inputs jista' jiġi stilat bi .form-text. Din il-klassi tinkludi display: blocku żżid xi marġni ta 'fuq għal spazjar faċli mill-inputs ta' hawn fuq.

Il-password tiegħek għandu jkun twil 8-20 karattru, ikun fih ittri u numri, u m'għandux ikun fih spazji, karattri speċjali, jew 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>

It-test inline jista 'juża kwalunkwe element HTML inline tipiku (kemm jekk ikun <small>, <span>, jew xi ħaġa oħra) b'xejn aktar minn klassi ta' utilità.

Għandu jkun twil 8-20 karattru. 
<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>

Formoli b'diżabilità

Żid l- disabledattribut boolean fuq input biex tevita l-interazzjonijiet tal-utent u tagħmilha tidher eħfef.

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

Żid l- disabledattribut ma 'a <fieldset>biex tiddiżattiva l-kontrolli kollha ġewwa.

<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>
Avviż bl-ankri

B'mod awtomatiku, il-browsers se jittrattaw il-kontrolli tal-forma nattiva kollha ( <input>, <select>u l- <button>elementi) ġewwa <fieldset disabled>bħala diżattivati, u jipprevjenu kemm it-tastiera kif ukoll l-interazzjonijiet tal-maws fuqhom. Madankollu, jekk il-formola tiegħek tinkludi wkoll <a ... class="btn btn-*">elementi, dawn jingħataw biss stil ta' pointer-events: none. Kif innutat fit-taqsima dwar l-istat diżattivat għall-buttuni (u speċifikament fis-subsezzjoni għall-elementi tal-ankra), din il-proprjetà CSS għadha mhix standardizzata u mhix appoġġjata bis-sħiħ f'Internet Explorer 10, u mhux se tipprevjeni lill-utenti tat-tastiera milli jkunu kapaċi jiffokaw jew jattivaw dawn ir-rabtiet. Allura biex tkun sigura, uża JavaScript personalizzat biex tiddiżattiva links bħal dawn.

Kompatibilità bejn il-browser

Filwaqt li Bootstrap se japplika dawn l-istili fil-brawżers kollha, l-Internet Explorer 11 u inqas ma jappoġġjawx bis-sħiħ l- disabledattribut fuq <fieldset>. Uża JavaScript personalizzat biex tiddiżattiva l-fieldset f'dawn il-browsers.

Validazzjoni

Ipprovdi feedback siewi u azzjonabbli lill-utenti tiegħek b'validazzjoni tal-formola HTML5 – disponibbli fil-browsers kollha appoġġjati tagħna . Agħżel mill-feedback tal-validazzjoni default tal-browser, jew implimenta messaġġi personalizzati bil-klassijiet inkorporati tagħna u bil-JavaScript starter.

Bħalissa nirrakkomandaw li tuża stili ta' validazzjoni personalizzati, peress li l-messaġġi ta' validazzjoni default tal-brawżer nattiv mhumiex esposti b'mod konsistenti għal teknoloġiji ta' assistenza fil-brawżers kollha (l-aktar, Chrome fuq id-desktop u l-mowbajl).

Kif taħdem

Hawn kif taħdem il-validazzjoni tal-formola ma Bootstrap:

  • Il-validazzjoni tal-formola HTML hija applikata permezz taż-żewġ psewdo-klassijiet tas-CSS, :invalidu :valid. Japplika għal <input>, <select>, u <textarea>elementi.
  • Bootstrap ikopri l- :invalidu stili għall- klassi :validġenitur , normalment applikati għall- . Inkella, kwalunkwe qasam meħtieġ mingħajr valur jidher bħala invalidu fit-tagħbija tal-paġna. B'dan il-mod, tista' tagħżel meta tattivahom (tipikament wara li tiġi ppruvata s-sottomissjoni tal-formola)..was-validated<form>
  • Biex terġa' tissettja d-dehra tal-formola (pereżempju, fil-każ ta' sottomissjonijiet dinamiċi ta' formola bl-użu ta' AJAX), neħħi l- .was-validatedklassi mill- <form>ġdid wara s-sottomissjoni.
  • Bħala riżerva, .is-invalidu l- .is-validklassijiet jistgħu jintużaw minflok il-psewdo-klassijiet għall -validazzjoni tan-naħa tas-server . Ma jeħtiġux .was-validatedklassi ġenitur.
  • Minħabba restrizzjonijiet fil-mod kif jaħdem is-CSS, ma nistgħux (fil-preżent) napplikaw stili għal <label>li jiġi qabel kontroll tal-formola fid-DOM mingħajr l-għajnuna ta 'JavaScript personalizzat.
  • Il-browsers moderni kollha jappoġġjaw l- API tal-validazzjoni tar-restrizzjoni , serje ta' metodi JavaScript għall-validazzjoni tal-kontrolli tal-formoli.
  • Messaġġi ta 'feedback jistgħu jutilizzaw in- nuqqasijiet tal-browser (differenti għal kull browser, u mhux stilabbli permezz ta' CSS) jew l-istili ta 'feedback personalizzati tagħna b'HTML u CSS addizzjonali.
  • Tista' tipprovdi messaġġi ta' validità personalizzati setCustomValidityf'JavaScript.

B'dan f'moħħu, ikkunsidra d-demos li ġejjin għall-istili ta 'validazzjoni tal-formoli tad-dwana tagħna, klassijiet fakultattivi tan-naħa tas-server, u defaults tal-browser.

Stili tad-dwana

Għal messaġġi ta' validazzjoni tal-formola Bootstrap tad-dwana, ikollok bżonn iżżid l- novalidateattribut boolean ma' <form>. Dan iwaqqaf it-tooltips ta' feedback default tal-browser, iżda xorta jipprovdi aċċess għall-APIs tal-validazzjoni tal-formoli f'JavaScript. Ipprova tissottometti l-formola hawn taħt; JavaScript tagħna se jinterċetta l-buttuna tissottometti u jibgħat feedback lilek. Meta tipprova tissottometti, tara l- istili :invalidu applikati għall-kontrolli tal-formola tiegħek.:valid

Stili ta 'feedback personalizzati japplikaw kuluri personalizzati, fruntieri, stili ta' fokus, u ikoni tal-isfond biex jikkomunikaw aħjar ir-rispons. Ikoni tal-isfond għal <select>s huma disponibbli biss bi .custom-select, u mhux .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>

Defaults tal-browser

Mhux interessat f'messaġġi ta' feedback ta' validazzjoni tad-dwana jew tikteb JavaScript biex tibdel l-imgieba tal-formoli? Kollox tajjeb, tista 'tuża l-inadempjenzi tal-browser. Ipprova ibgħat il-formola hawn taħt. Skont il-browser u l-OS tiegħek, tara stil ta' feedback kemmxejn differenti.

Filwaqt li dawn l-istili ta 'feedback ma jistgħux jiġu stilati b'CSS, xorta tista' tippersonalizza t-test tal-feedback permezz ta' 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>

In-naħa tas-server

Nirrakkomandaw li tuża validazzjoni min-naħa tal-klijent, iżda f'każ li teħtieġ validazzjoni min-naħa tas-server, tista' tindika oqsma tal-formola invalidi u validi bi .is-invalidu .is-valid. Innota li .invalid-feedbackhija wkoll appoġġjata b'dawn il-klassijiet.

Jidher tajjeb!
Jidher tajjeb!
@
Jekk jogħġbok agħżel username.
Jekk jogħġbok ipprovdi belt valida.
Jekk jogħġbok agħżel stat validu.
Jekk jogħġbok ipprovdi zip validu.
Int trid taqbel qabel ma tissottometti. 
<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>

Elementi appoġġjati

L-istili ta' validazzjoni huma disponibbli għall-kontrolli tal-formola u l-komponenti li ġejjin:

  • <input>s u <textarea>s bi .form-control(inkluż sa wieħed .form-controlfi gruppi ta' input)
  • <select>s ma .form-controljew.custom-select
  • .form-checks
  • .custom-checkboxs u .custom-radios
  • .custom-file
Jekk jogħġbok daħħal messaġġ fil-qasam tat-test.
Eżempju ta' test ta' feedback invalidu
Aktar eżempju test ta' feedback invalidu
Eżempju feedback invalidu tal-għażla tad-dwana
Eżempju feedback invalidu tal-fajl tad-dwana 
<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>

Tooltips

Jekk it-tqassim tal-formola tiegħek jippermetti dan, tista' tbiddel il- .{valid|invalid}-feedbackklassijiet għal .{valid|invalid}-tooltipklassijiet biex turi feedback ta' validazzjoni f'tooltip stilat. Kun żgur li jkollok ġenitur position: relativefuqha għall-ippożizzjonar tal-għodda. Fl-eżempju hawn taħt, il-klassijiet tal-kolonni tagħna diġà għandhom dan, iżda l-proġett tiegħek jista 'jeħtieġ setup alternattiv.

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>

Customizing

L-istati ta 'validazzjoni jistgħu jiġu personalizzati permezz ta' Sass mal- $form-validation-statesmappa. Li tinsab fil- _variables.scssfajl tagħna, din il-mappa Sass hija miġbura biex tiġġenera l-istati default valid/ invalidvalidazzjoni. Inkluża hija mappa nested biex tippersonalizza l-kulur u l-ikona ta 'kull stat. Filwaqt li l-ebda stat ieħor ma huwa appoġġjat mill-browsers, dawk li jużaw stili tad-dwana jistgħu faċilment iżidu rispons ta 'forma aktar kumpless.

Jekk jogħġbok innota li aħna ma nirrakkomandawx li tippersonalizza dawn il-valuri mingħajr ma timmodifika wkoll il- form-validation-statemixin.

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

Formoli tad-dwana

Għal aktar customization u konsistenza cross browser, uża l-elementi tal-forma kompletament personalizzati tagħna biex tissostitwixxi l-inadempjenzi tal-browser. Huma mibnija fuq il-markup semantiku u aċċessibbli, għalhekk huma sostituti sodi għal kwalunkwe kontroll tal-forma default.

Checkboxes u radjijiet

Kull checkbox u radju <input>u <label>pairing huma mgeżwra fi <div>biex jinħoloq il-kontroll tad-dwana tagħna. Strutturalment, dan huwa l-istess approċċ bħall-inadempjenza tagħna .form-check.

Aħna nużaw is-selettur tal-aħwa ( ~) għall- <input>istati kollha tagħna—bħal— :checkedbiex nistiljaw sew l-indikatur tal-forma personalizzat tagħna. Meta kkombinat mal- .custom-control-labelklassi, nistgħu wkoll stil tat-test għal kull oġġett ibbażat fuq l- <input>istat ta '.

Aħna naħbu l-inadempjenza <input>bi opacityu nużaw il- .custom-control-labelbiex nibnu indikatur ġdid tal-forma tad-dwana minfloku bi ::beforeu ::after. Sfortunatament ma nistgħux nibnu waħda tad-dwana minn sempliċement <input>minħabba li s-CSS contentma jaħdimx fuq dak l-element.

Fl-istati kkontrollati, nużaw ikoni SVG inkorporati base64 minn Open Iconic . Dan jagħtina l-aħjar kontroll għall-istil u l-ippożizzjonar fil-browsers u l-apparati.

Kaxxi ta' kontroll

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

Il-kaxxi ta' kontroll tad-dwana jistgħu wkoll jużaw il- :indeterminatepsewdo klassi meta ssettjati manwalment permezz ta' JavaScript (m'hemm l-ebda attribut HTML disponibbli biex jiġi speċifikat).

Jekk qed tuża jQuery, xi ħaġa bħal din għandha tkun biżżejjed:

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

Radjijiet

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

F'konformità

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

B'diżabilità

Kaxxi ta' kontroll u radjijiet personalizzati jistgħu wkoll jiġu diżattivati. Żid l- disabledattribut boolean mal- <input>u l-indikatur tad-dwana u d-deskrizzjoni tat-tikketta se jiġu stilizzati awtomatikament.

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

Swiċċijiet

Swiċċ għandu l-markup ta' kaxxa ta' kontroll tad-dwana iżda juża l- .custom-switchklassi biex jagħmel toggle switch. Swiċċijiet jappoġġjaw ukoll l- 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>

Agħżel menu

Il-menus tad- dwana <select>jeħtieġu biss klassi tad-dwana, .custom-selectbiex tiskatta l-istili tad-dwana. L-istili tad-dwana huma limitati għad- <select>dehra inizjali tal-'s u ma jistgħux jimmodifikaw is- <option>s minħabba limitazzjonijiet tal-browser.

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

Tista' wkoll tagħżel minn selezzjonijiet tad-dwana żgħar u kbar biex jaqblu ma' l-inputs tat-test tagħna ta' daqs simili.

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

L- multipleattribut huwa appoġġjat ukoll:

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

Kif inhu l- 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>

Firxa

Oħloq <input type="range">kontrolli tad-dwana b' .custom-range. Il-binarju (l-isfond) u l-kbir (il-valur) huma t-tnejn stilati biex jidhru l-istess madwar il-browsers. Peress li l-IE u l-Firefox biss jappoġġjaw il-"mili" tal-binarji tagħhom mix-xellug jew il-lemin tal-kbir bħala mezz biex jindikaw viżwalment il-progress, bħalissa ma nappoġġjawhx.

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

L-inputs tal-firxa għandhom valuri impliċiti għal minu max— 0u 100, rispettivament. Tista' tispeċifika valuri ġodda għal dawk li jużaw l- attributi minu .max

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

B'mod awtomatiku, firxa inputs "snap" għal valuri interi. Biex tibdel dan, tista 'tispeċifika stepvalur. Fl-eżempju hawn taħt, aħna nirduppjaw in-numru ta 'passi billi nużaw step="0.5".

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

Browser tal-fajl

Il-plugin rakkomandat biex janima l-input tal-fajl tad-dwana: bs-custom-file-input , dak hu li qed nużaw bħalissa hawn fid-doks tagħna.

L-input tal-fajl huwa l-aktar gnarly tal-mazz u jeħtieġ JavaScript addizzjonali jekk tixtieq tgħaqqadhom b'Agħżel fajl funzjonali... u test tal-isem tal-fajl magħżul.

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

Aħna naħbu l-fajl default <input>permezz opacityu minflok stil l- <label>. Il-buttuna hija ġġenerata u pożizzjonata b' ::after. Fl-aħħar nett, niddikjaraw a widthu heightfuq il- <input>għal spazjar xieraq għall-kontenut tal-madwar.

It-traduzzjoni jew l-adattament tal-kordi b'SCSS

Il :lang()-psewdo-klassi tintuża biex tippermetti traduzzjoni tat-test "Ibbrawżja" f'lingwi oħra. Iċċekkja jew żid l-entrati mal- $custom-file-textvarjabbli Sass bit- tikketta tal-lingwa rilevanti u strings lokalizzati. Il-kordi Ingliżi jistgħu jiġu personalizzati bl-istess mod. Per eżempju, hawn kif wieħed jista 'jżid traduzzjoni Spanjola (il-kodiċi tal-lingwa Spanjola huwa es):

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

Hawn lang(es)fl-azzjoni dwar l-input tal-fajl personalizzat għal traduzzjoni Spanjola:

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

Ikollok bżonn issettja l-lingwa tad-dokument tiegħek (jew is-subsiġra tiegħu) b'mod korrett sabiex jintwera t-test korrett. Dan jista 'jsir billi tuża l- langattribut fuq l- <html>element jew l- Content-Languageheader HTTP , fost metodi oħra.

It-traduzzjoni jew l-adattament tal-kordi bl-HTML

Bootstrap jipprovdi wkoll mod kif tittraduċi t-test "Ibbrawżja" f'HTML bl- data-browseattribut li jista' jiġi miżjud mat-tikketta tad-dħul tad-dwana (eżempju bl-Olandiż):

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