in English

Fomu

Mifano na miongozo ya matumizi ya mitindo ya udhibiti wa fomu, chaguo za mpangilio, na vipengele maalum vya kuunda aina mbalimbali za fomu.

Muhtasari

Vidhibiti vya fomu vya Bootstrap hupanuka kwenye mitindo yetu ya fomu Iliyowashwa upya na madarasa. Tumia madarasa haya ili ujijumuishe na maonyesho yake yaliyobinafsishwa kwa uwasilishaji thabiti zaidi kwenye vivinjari na vifaa.

Hakikisha kuwa unatumia typesifa inayofaa kwenye ingizo zote (kwa mfano, emailkwa anwani ya barua pepe au numbermaelezo ya nambari) ili kunufaika na vidhibiti vipya vya ingizo kama vile uthibitishaji wa barua pepe, uteuzi wa nambari na zaidi.

Hapa kuna mfano wa haraka wa kuonyesha mitindo ya fomu ya Bootstrap. Endelea kusoma ili upate hati kuhusu madarasa yanayohitajika, mpangilio wa fomu, na zaidi.

Hatutawahi kushiriki barua pepe yako na mtu mwingine yeyote. 
<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>

Vidhibiti vya fomu

Vidhibiti vya umbo la maandishi—kama vile <input>s, <select>s, na <textarea>s—huwekwa kulingana na .form-controldarasa. Imejumuishwa ni mitindo ya mwonekano wa jumla, hali ya umakini, ukubwa, na zaidi.

Hakikisha umechunguza fomu zetu maalum ili kuongeza mtindo wa <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>

Kwa pembejeo za faili, badilisha .form-controlkwa .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>

Ukubwa

Weka urefu kwa kutumia madarasa kama .form-control-lgna .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>

Kusoma pekee

Ongeza readonlysifa ya boolean kwenye ingizo ili kuzuia urekebishaji wa thamani ya ingizo. Ingizo za kusoma pekee huonekana nyepesi (kama vile ingizo zilizozimwa), lakini uhifadhi kishale cha kawaida.

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

Soma maandishi wazi pekee

Iwapo ungependa <input readonly>vipengee katika umbo lako viwe na mtindo wa maandishi wazi, tumia .form-control-plaintextdarasa kuondoa muundo wa uga wa fomu chaguo-msingi na uhifadhi ukingo sahihi na pedi.

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

Ingizo za Masafa

Weka pembejeo za masafa zinazoweza kusogezwa kwa mlalo kwa kutumia .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>

Visanduku vya kuteua na redio

Vikasha chaguomsingi vya kuteua na redio vinaboreshwa kwa usaidizi wa .form-check, darasa moja la aina zote mbili za ingizo ambalo huboresha mpangilio na tabia ya vipengele vyake vya HTML . Vikasha tiki ni vya kuchagua chaguo moja au kadhaa katika orodha, ilhali redio ni za kuchagua chaguo moja kutoka nyingi.

Vikasha tiki na redio vilivyozimwa vinatumika. Sifa disableditaweka rangi nyepesi ili kusaidia kuonyesha hali ya ingizo.

Visanduku vya kuteua na vitufe vya redio vinaauni uthibitishaji wa fomu unaotegemea HTML na hutoa lebo fupi zinazoweza kufikiwa. Kwa hivyo, <input>s na <label>s zetu ni vipengele vya undugu kinyume na <input>ndani ya <label>. Hiki ni kitenzi zaidi kidogo kwani lazima ubainishe idna forsifa ili kuhusisha <input>na <label>.

Chaguomsingi (imerundikwa)

Kwa chaguo-msingi, idadi yoyote ya visanduku vya kuteua na redio ambazo ni ndugu wa karibu zitawekwa kwa safu wima na kupangwa ipasavyo na .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>

Katika mstari

Vikundi vya visanduku vya kuteua au redio kwenye safu mlalo sawa kwa kuongeza .form-check-inlinekwenye .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>

Bila lebo

Ongeza .position-statickwa ingizo ndani ya .form-checkhiyo hazina maandishi yoyote ya lebo. Kumbuka bado kutoa aina fulani ya jina linaloweza kufikiwa kwa teknolojia za usaidizi (kwa mfano, kutumia 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>

Mpangilio

Kwa kuwa Bootstrap inatumika display: blockna width: 100%kwa karibu vidhibiti vyetu vyote vya fomu, fomu kwa chaguo-msingi zitapangwa kiwima. Madarasa ya ziada yanaweza kutumika kubadilisha mpangilio huu kwa misingi ya kila fomu.

Vikundi vya kuunda

Darasa .form-groupndio njia rahisi zaidi ya kuongeza muundo fulani kwa fomu. Inatoa darasa linalonyumbulika ambalo linahimiza upangaji sahihi wa lebo, vidhibiti, maandishi ya usaidizi wa hiari na utumaji ujumbe wa uthibitishaji. Kwa chaguo-msingi inatumika tu margin-bottom, lakini inachukua mitindo ya ziada .form-inlineinapohitajika. Itumie na <fieldset>s, <div>s, au karibu kipengele kingine chochote.

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

Gridi ya fomu

Fomu ngumu zaidi zinaweza kujengwa kwa kutumia madarasa yetu ya gridi ya taifa. Tumia hizi kwa miundo ya fomu inayohitaji safu wima nyingi, upana tofauti, na chaguo za ziada za upatanishi.

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

Safu ya fomu

Unaweza pia kubadilisha .rowkwa .form-row, tofauti ya safu mlalo yetu ya kawaida ya gridi ambayo inabatilisha mifereji ya safu wima chaguo-msingi kwa miundo iliyobana zaidi na iliyoshikana zaidi.

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

Mipangilio ngumu zaidi inaweza pia kuundwa kwa mfumo wa gridi ya taifa.

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

Fomu ya usawa

Unda fomu za mlalo ukitumia gridi ya taifa kwa kuongeza .rowdarasa ili kuunda vikundi na kutumia .col-*-*madarasa kubainisha upana wa lebo na vidhibiti vyako. Hakikisha kuwa umeongeza .col-form-labelkwenye <label>s zako pia ili ziwe katikati wima na vidhibiti vyao vinavyohusiana vya fomu.

Wakati mwingine, labda utahitaji kutumia pambizo au huduma za kuweka pedi ili kuunda upatanishi bora unaohitaji. Kwa mfano, tumeondoa padding-toplebo ya pembejeo za redio zilizopangwa kwa rafu ili kupanga vyema msingi wa maandishi.

Redio 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Upimaji wa lebo ya fomu mlalo

Hakikisha unatumia .col-form-label-smau .col-form-label-lgkwa <label>s au <legend>s zako kufuata kwa usahihi saizi ya .form-control-lgna .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>

Upimaji wa safu wima

Kama inavyoonyeshwa katika mifano iliyotangulia, mfumo wetu wa gridi ya taifa hukuruhusu kuweka idadi yoyote ya .cols ndani ya a .rowau .form-row. Watagawanya upana unaopatikana kwa usawa kati yao. Unaweza pia kuchagua kikundi kidogo cha safu wima zako kuchukua nafasi zaidi au kidogo, huku .cols iliyobaki ikigawanya iliyosalia kwa usawa, na madarasa maalum ya safu kama .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>

Kuweka ukubwa kiotomatiki

Mfano ulio hapa chini hutumia matumizi ya flexbox kuweka kiwima maudhui na mabadiliko .colili .col-autosafu wima zako zichukue nafasi nyingi inavyohitajika. Weka njia nyingine, saizi ya safu yenyewe kulingana na yaliyomo.

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

Kisha unaweza kuichanganya tena na madarasa ya safu wima ya saizi mahususi.

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

Na bila shaka vidhibiti vya fomu maalum vinasaidiwa.

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

Fomu za ndani

Tumia .form-inlinedarasa kuonyesha mfululizo wa lebo, vidhibiti vya fomu na vitufe kwenye safu mlalo moja. Vidhibiti vya fomu ndani ya fomu za ndani hutofautiana kidogo na hali zao chaguomsingi.

  • Vidhibiti ni display: flex, kukunja nafasi yoyote nyeupe ya HTML na kukuruhusu kutoa udhibiti wa upatanishi kwa kutumia nafasi na huduma za flexbox .
  • Vidhibiti na vikundi vya ingizo hupokea width: autoili kubatilisha chaguo-msingi la Bootstrap width: 100%.
  • Vidhibiti huonekana tu ndani ya mstari katika maeneo ya kutazamwa ambayo yana upana wa angalau 576px ili kuchangia maeneo finyu ya kutazama kwenye vifaa vya mkononi.

Huenda ukahitaji kushughulikia upana na upangaji wa vidhibiti vya fomu binafsi kwa kutumia huduma za kuweka nafasi (kama inavyoonyeshwa hapa chini). Mwishowe, hakikisha kuwa umejumuisha <label>kila kidhibiti cha kila fomu, hata kama unahitaji kukificha kutoka kwa wageni wasiosoma skrini na .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>

Vidhibiti na chaguo maalum vya fomu pia vinatumika.

<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>
Njia mbadala za lebo zilizofichwa

Teknolojia za usaidizi kama vile visoma skrini zitakuwa na shida na fomu zako ikiwa hutajumuisha lebo kwa kila ingizo. Kwa fomu hizi za ndani, unaweza kuficha lebo kwa kutumia .sr-onlydarasa. Kuna mbinu mbadala zaidi za kutoa lebo kwa teknolojia saidizi, kama vile aria-label, aria-labelledbyau titlesifa. Ikiwa hakuna kati ya hizi zilizopo, teknolojia ya usaidizi inaweza kuamua kutumia placeholdersifa, ikiwa iko, lakini kumbuka kuwa matumizi ya placeholderkama badala ya mbinu zingine za kuweka lebo hayashauriwi.

Nakala ya usaidizi

Maandishi ya usaidizi ya kiwango cha kuzuia katika fomu yanaweza kuundwa kwa kutumia .form-text(yaliyojulikana hapo awali kama .help-blockkatika v3). Maandishi ya usaidizi ya ndani yanaweza kutekelezwa kwa urahisi kwa kutumia kipengele chochote cha ndani cha HTML na madarasa ya matumizi kama vile .text-muted.

Kuhusisha maandishi ya usaidizi na vidhibiti vya fomu

Maandishi ya usaidizi yanapaswa kuhusishwa kwa uwazi na udhibiti wa fomu inayohusiana na kutumia aria-describedbysifa. Hii itahakikisha kwamba teknolojia saidizi—kama vile visoma skrini—zitatangaza maandishi haya ya usaidizi mtumiaji anapozingatia au kuingia kwenye udhibiti.

Maandishi ya usaidizi hapa chini ya ingizo yanaweza kutengenezwa kwa kutumia .form-text. Darasa hili linajumuisha display: blockna kuongeza ukingo wa juu kwa nafasi rahisi kutoka kwa ingizo hapo juu.

Nenosiri lako lazima liwe na urefu wa herufi 8-20, liwe na herufi na nambari, na lisiwe na nafasi, herufi maalum au 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>

Maandishi ya ndani yanaweza kutumia kipengee chochote cha kawaida cha HTML (iwe <small>, <span>, au kitu kingine) bila chochote zaidi ya darasa la matumizi.

Lazima iwe na urefu wa herufi 8-20. 
<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>

Fomu za walemavu

Ongeza disabledsifa ya boolean kwenye ingizo ili kuzuia mwingiliano wa watumiaji na kuifanya ionekane nyepesi.

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

Ongeza disabledsifa kwa a <fieldset>ili kuzima vidhibiti vyote ndani.

Mfano wa uga uliozimwa 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat na nanga

Vivinjari hushughulikia vidhibiti vyote vya fomu asili ( <input>, <select>, na <button>vipengee) vilivyo ndani <fieldset disabled>kama vilivyozimwa, na hivyo kuzuia mwingiliano wa kibodi na kipanya juu yake.

Hata hivyo, ikiwa fomu yako pia inajumuisha vipengele maalum kama vile vitufe kama vile <a ... class="btn btn-*">, hivi vitapewa tu mtindo wa pointer-events: none. Kama ilivyobainishwa katika sehemu inayohusu hali ya kuzimwa kwa vitufe (na haswa katika sehemu ndogo ya vipengee vya kuweka nanga), kipengele hiki cha CSS bado hakijasanifiwa na hakitumiki kikamilifu katika Internet Explorer 10. Vidhibiti vinavyotegemea nanga bado vitasawazishwa. inaangazia na inayoweza kuendeshwa kwa kutumia kibodi. Ni lazima urekebishe vidhibiti hivi wewe mwenyewe kwa kuongeza tabindex="-1"ili kuzizuia zisipokee umakini na aria-disabled="disabled"kuashiria hali yao kwa teknolojia saidizi.

Utangamano wa kivinjari

Ingawa Bootstrap itatumia mitindo hii katika vivinjari vyote, Internet Explorer 11 na chini haiauni kikamilifu disabledsifa kwenye <fieldset>. Tumia JavaScript maalum ili kuzima uga katika vivinjari hivi.

Uthibitishaji

Toa maoni muhimu na yanayoweza kutekelezeka kwa watumiaji wako kwa uthibitishaji wa fomu ya HTML5- inayopatikana katika vivinjari vyetu vyote vinavyotumika . Chagua kutoka kwa maoni ya uthibitishaji chaguomsingi wa kivinjari, au tekeleza ujumbe maalum ukitumia madarasa yetu yaliyojengewa ndani na JavaScript ya kuanzia.

Tunafahamu kwamba kwa sasa mitindo ya uthibitishaji maalum wa upande wa mteja na vidokezo vya zana hazipatikani, kwa sababu hazijaonyeshwa teknolojia saidizi. Tunaposhughulikia suluhu, tungependekeza kutumia chaguo la upande wa seva au mbinu chaguomsingi ya uthibitishaji wa kivinjari.

Inavyofanya kazi

Hivi ndivyo uthibitishaji wa fomu unavyofanya kazi na Bootstrap:

  • Uthibitishaji wa fomu ya HTML unatumika kupitia madarasa ya uwongo ya CSS, :invalidna :valid. Inatumika kwa <input>, <select>, na <textarea>vipengele.
  • Bootstrap inapeana :invalidna :validmitindo kwa .was-validateddarasa la mzazi, kawaida hutumika kwa <form>. Vinginevyo, sehemu yoyote inayohitajika bila thamani itaonekana kama batili kwenye upakiaji wa ukurasa. Kwa njia hii, unaweza kuchagua wakati wa kuziwasha (kawaida baada ya kujaribu kuwasilisha fomu).
  • Ili kuweka upya mwonekano wa fomu (kwa mfano, katika kesi ya uwasilishaji wa fomu inayobadilika kwa kutumia AJAX), ondoa .was-validateddarasa kutoka <form>tena baada ya kuwasilisha.
  • Kama njia mbadala, .is-invalidna .is-validmadarasa yanaweza kutumika badala ya madarasa ya uwongo kwa uthibitishaji wa upande wa seva . Hazihitaji .was-validateddarasa la wazazi.
  • Kwa sababu ya vikwazo katika jinsi CSS inavyofanya kazi, hatuwezi (kwa sasa) kutumia mitindo kwa <label>ambayo huja kabla ya udhibiti wa fomu katika DOM bila usaidizi wa JavaScript maalum.
  • Vivinjari vyote vya kisasa vinaauni API ya uthibitishaji wa kikwazo , mfululizo wa mbinu za JavaScript za kuthibitisha vidhibiti vya fomu.
  • Jumbe za maoni zinaweza kutumia chaguo-msingi za kivinjari (tofauti kwa kila kivinjari, na zisizo na mtindo kupitia CSS) au mitindo yetu maalum ya maoni yenye HTML na CSS ya ziada.
  • Unaweza kutoa ujumbe maalum wa uhalali setCustomValiditykatika JavaScript.

Kwa kuzingatia hilo, zingatia onyesho zifuatazo za mitindo yetu ya uthibitishaji wa fomu maalum, madarasa ya upande wa seva ya hiari na chaguo-msingi za kivinjari.

Mitindo maalum

Kwa ujumbe maalum wa uthibitishaji wa fomu ya Bootstrap, utahitaji kuongeza novalidatesifa ya boolean kwenye <form>. Hii inazima vidokezo vya maoni chaguomsingi vya kivinjari, lakini bado hutoa ufikiaji wa API za uthibitishaji wa fomu katika JavaScript. Jaribu kuwasilisha fomu hapa chini; JavaScript yetu itakatiza kitufe cha kuwasilisha na kuwasilisha maoni kwako. Unapojaribu kuwasilisha, utaona mitindo :invalidna :validvidhibiti vinavyotumika kwenye vidhibiti vya fomu yako.

Mitindo maalum ya maoni hutumia rangi maalum, mipaka, mitindo ya kuzingatia na aikoni za mandharinyuma ili kuwasiliana vyema na maoni. Aikoni za mandharinyuma za <select>s zinapatikana tu na .custom-select, na si .form-control.

Yapendeza!
Yapendeza!
Tafadhali toa jiji halali.
Tafadhali chagua jimbo halali.
Tafadhali toa zip halali.
Lazima ukubali kabla ya kuwasilisha. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Chaguo-msingi za kivinjari

Je, huvutiwi na ujumbe wa maoni ya uthibitishaji maalum au kuandika JavaScript ili kubadilisha tabia za fomu? Kila kitu kizuri, unaweza kutumia chaguo-msingi za kivinjari. Jaribu kuwasilisha fomu iliyo hapa chini. Kulingana na kivinjari chako na Mfumo wa Uendeshaji, utaona mtindo tofauti kidogo wa maoni.

Ingawa mitindo hii ya maoni haiwezi kutengenezwa kwa kutumia CSS, bado unaweza kubinafsisha maandishi ya maoni kupitia JavaScript.

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

Upande wa seva

Tunapendekeza utumie uthibitishaji wa upande wa mteja, lakini ikiwa utahitaji uthibitishaji wa upande wa seva, unaweza kuonyesha uga batili na sahihi wa fomu kwa .is-invalidna .is-valid. Kumbuka kwamba .invalid-feedbackpia inaungwa mkono na madarasa haya.

Kwa sehemu zisizo sahihi, hakikisha kuwa maoni/ujumbe wa hitilafu batili unahusishwa na uga wa fomu husika kwa kutumia aria-describedby. Sifa hii inaruhusu zaidi ya moja idkurejelewa, iwapo sehemu tayari itaelekeza kwenye maandishi ya fomu ya ziada.

Yapendeza!
Yapendeza!
Tafadhali toa jiji halali.
Tafadhali chagua jimbo halali.
Tafadhali toa zip halali.
Lazima ukubali kabla ya kuwasilisha. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Vipengele vinavyoungwa mkono

Mitindo ya uthibitishaji inapatikana kwa vidhibiti na vipengele vifuatavyo vya fomu:

  • <input>s na <textarea>s na.form-control
  • <select>s na .form-controlau.custom-select
  • .form-checks
  • .custom-checkboxs na .custom-radios
  • .custom-file
Tafadhali ingiza ujumbe katika eneo la maandishi.
Mfano maandishi ya maoni yasiyo sahihi
Mfano zaidi maandishi ya maoni yasiyo sahihi
Mfano wa maoni ya kuchagua maalum yasiyo sahihi
Mfano maoni batili ya faili maalum
@
Mfano maoni batili ya kikundi
Mfano maoni batili ya kikundi
Mfano maoni batili ya kikundi 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Vidokezo vya zana

Ikiwa mpangilio wa fomu yako unaruhusu, unaweza kubadilisha .{valid|invalid}-feedbackmadarasa kwa .{valid|invalid}-tooltipmadarasa ili kuonyesha maoni ya uthibitishaji katika kidokezo cha mtindo. Hakikisha kuwa na mzazi position: relativejuu yake kwa nafasi ya kidokezo. Katika mfano ulio hapa chini, madarasa yetu ya safu wima tayari yana hii, lakini mradi wako unaweza kuhitaji usanidi mbadala.

Yapendeza!
Yapendeza!
Tafadhali toa jiji halali.
Tafadhali chagua jimbo halali.
Tafadhali toa zip halali. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Kubinafsisha

Hali za uthibitishaji zinaweza kubinafsishwa kupitia Sass na $form-validation-statesramani. Ipo kwenye _variables.scssfaili yetu, ramani hii ya Sass imefungwa ili kutoa hali chaguo-msingi valid/ invaliduthibitishaji. Imejumuishwa ni ramani iliyowekwa kwa ajili ya kubinafsisha rangi na ikoni ya kila jimbo. Ingawa hakuna majimbo mengine yanayotumika na vivinjari, wale wanaotumia mitindo maalum wanaweza kuongeza kwa urahisi maoni changamano zaidi ya fomu.

Tafadhali kumbuka kuwa hatupendekezi kubinafsisha maadili haya bila pia kurekebisha form-validation-statemchanganyiko.

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

Ingiza uthibitishaji wa kikundi

Ili kugundua ni vipengele vipi vinahitaji pembe za mviringo ndani ya kikundi cha ingizo na uthibitishaji, kikundi cha ingizo kinahitaji .has-validationdarasa la ziada.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Tafadhali chagua jina la mtumiaji.

Fomu maalum

Kwa ubinafsishaji zaidi na uthabiti tofauti wa kivinjari, tumia vipengee vyetu vya fomu maalum kuchukua nafasi ya chaguo-msingi za kivinjari. Zimeundwa juu ya alama za kisemantiki na zinazoweza kufikiwa, kwa hivyo ni mbadala thabiti za udhibiti wowote wa fomu chaguomsingi.

Visanduku vya kuteua na redio

Kila kisanduku cha kuteua na redio <input>na <label>uoanishaji hufungwa katika a <div>ili kuunda udhibiti wetu maalum. Kimuundo, hii ni mbinu sawa na chaguo-msingi yetu .form-check.

Tunatumia kiteuzi cha kaka ( ~) kwa <input>majimbo yetu yote—kama :checked—kutengeneza kiashiria chetu cha fomu maalum. Ikiunganishwa na .custom-control-labeldarasa, tunaweza pia kuweka mtindo wa maandishi kwa kila kipengee kulingana na <input>hali ya '.

Tunaficha chaguo-msingi <input>na opacityna kutumia .custom-control-labelkuunda kiashiria kipya cha fomu maalum mahali pake na ::beforena ::after. Kwa bahati mbaya hatuwezi kuunda maalum kutoka kwa <input>sababu CSS contenthaifanyi kazi kwenye kipengele hicho.

Katika hali zilizowekwa alama, tunatumia ikoni za SVG zilizopachikwa base64 kutoka Open Iconic . Hii hutupatia udhibiti bora zaidi wa kuweka mitindo na uwekaji kwenye vivinjari na vifaa.

Visanduku vya kuteua

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

Visanduku maalum vya kuteua vinaweza pia kutumia :indeterminatedarasa bandia likiwekwa mwenyewe kupitia JavaScript (hakuna sifa ya HTML inayopatikana ya kuibainisha).

Ikiwa unatumia jQuery, kitu kama hiki kinapaswa kutosha:

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

Redio

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

Katika mstari

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

Imezimwa

Vikasha maalum vya kuteua na redio pia vinaweza kuzimwa. Ongeza disabledsifa ya boolean kwa <input>kiashiria maalum na maelezo ya lebo yatawekwa mtindo kiotomatiki.

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

Swichi

Swichi ina alama ya kisanduku cha kuteua maalum lakini hutumia .custom-switchdarasa kutoa swichi ya kugeuza. Swichi pia zinaauni disabledsifa.

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

Chagua menyu

Menyu maalum <select>zinahitaji tu darasa maalum, .custom-selectili kuanzisha mitindo maalum. Mitindo maalum ina mipaka ya <select>mwonekano wa awali na haiwezi kurekebisha <option>s kutokana na mapungufu ya kivinjari.

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

Unaweza pia kuchagua kutoka kwa chaguo ndogo na kubwa maalum ili kulinganisha maandishi yetu ya ukubwa sawa.

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

Sifa multiplepia inaungwa mkono:

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

Kama sizesifa:

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

Masafa

Unda <input type="range">vidhibiti maalum na .custom-range. Wimbo (usuli) na kidole gumba (thamani) zote zimeundwa ili kuonekana sawa kwenye vivinjari. Kwa vile IE na Firefox pekee ndizo zinazotumia "kujaza" wimbo wao kutoka kushoto au kulia kwa kidole gumba kama njia ya kuonyesha maendeleo, kwa sasa hatuungi mkono.

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

Ingizo za fungu la visanduku zina maadili kamili ya minna max- 0na 100, mtawalia. Unaweza kubainisha thamani mpya kwa wale wanaotumia minna maxsifa.

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

Kwa chaguo-msingi, ingizo za masafa "hupiga" hadi nambari kamili. Ili kubadilisha hii, unaweza kutaja stepthamani. Katika mfano hapa chini, tunaongeza idadi ya hatua mara mbili kwa kutumia step="0.5".

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

Kivinjari cha faili

Programu-jalizi inayopendekezwa ili kuhuisha ingizo la faili maalum: bs-custom-file-input , hilo ndilo tunalotumia kwa sasa katika hati zetu.

Ingizo la faili ndilo gumu zaidi kati ya rundo na linahitaji JavaScript ya ziada ikiwa ungependa kuziunganisha na utendakazi Chagua faili... na maandishi yaliyochaguliwa ya jina la faili.

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

Tunaficha faili chaguo-msingi <input>kupitia opacityna badala yake mtindo wa <label>. Kitufe kinatolewa na kuwekwa na ::after. Hatimaye, tunatangaza a widthna heightkwenye <input>kwa nafasi sahihi ya maudhui yanayozunguka.

Kutafsiri au kubinafsisha mifuatano na SCSS

Darasa la :lang()uwongo linatumika kuruhusu tafsiri ya maandishi ya "Vinjari" katika lugha zingine. Batilisha au ongeza maingizo kwa $custom-file-texttofauti ya Sass kwa lebo ya lugha husika na mifuatano iliyojanibishwa. Kamba za Kiingereza zinaweza kubinafsishwa kwa njia ile ile. Kwa mfano, hivi ndivyo mtu anaweza kuongeza tafsiri ya Kihispania (msimbo wa lugha ya Kihispania ni es):

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

Hapa kuna lang(es)kazi ya kuingiza faili maalum kwa tafsiri ya Kihispania:

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

Utahitaji kuweka lugha ya hati yako (au subtree yake) kwa usahihi ili maandishi sahihi yaonyeshwe. Hii inaweza kufanywa kwa kutumia sifa langkwenye kipengee <html>au Content-Languagekichwa cha HTTP , kati ya njia zingine.

Kutafsiri au kubinafsisha mifuatano na HTML

Bootstrap pia hutoa njia ya kutafsiri maandishi ya "Vinjari" katika HTML kwa data-browsesifa ambayo inaweza kuongezwa kwa lebo maalum ya ingizo (mfano kwa Kiholanzi):

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