Source

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" placeholder="Enter email">
    <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" placeholder="Password">
  </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" placeholder="Password">
    </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, lakini ili kutoa not-allowedkielekezi kwenye kielelezo cha mzazi <label>, utahitaji kuongeza disabledsifa kwenye .form-check-input. Sifa iliyozimwa itaweka rangi nyepesi ili kusaidia kuonyesha hali ya ingizo.

Visanduku vya kuteua na utumiaji wa redio vimeundwa ili kusaidia uthibitishaji wa fomu unaotegemea HTML na kutoa 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 lebo 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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
Kisanduku cha kuteua 
<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" placeholder="Email">
    </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" placeholder="Password">
    </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>
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.

<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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat na nanga

Kwa chaguo-msingi, vivinjari vitashughulikia vidhibiti vyote vya fomu asili ( <input>, <select>na <button>vipengee) ndani <fieldset disabled>kama vilivyozimwa, na kuzuia mwingiliano wa kibodi na kipanya juu yao. Walakini, ikiwa fomu yako pia inajumuisha <a ... class="btn btn-*">vipengee, hivi vitapewa tu mtindo wa pointer-events: none. Kama ilivyobainishwa katika sehemu kuhusu hali ya vitufe vilivyozimwa (na haswa katika sehemu ndogo ya vipengee vya nanga), kipengele hiki cha CSS bado hakijasawazishwa na hakitumiki kikamilifu katika Internet Explorer 10, na haitazuia watumiaji wa kibodi kuwa. kuweza kuzingatia au kuamilisha viungo hivi. Kwa hivyo ili kuwa salama, tumia JavaScript maalum kuzima viungo kama hivyo.

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.

Kwa sasa tunapendekeza kutumia mitindo maalum ya uthibitishaji, kwa vile ujumbe wa uthibitishaji chaguomsingi wa kivinjari hauonekani mara kwa mara kwa teknolojia ya usaidizi katika vivinjari vyote (hasa, Chrome kwenye eneo-kazi na simu).

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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide 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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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 upande wa seva, unaweza kuonyesha sehemu za fomu zisizo sahihi na sahihi kwa .is-invalidna .is-valid. Kumbuka kwamba .invalid-feedbackpia inaungwa mkono na madarasa haya.

Yapendeza!
Yapendeza!
@
Tafadhali chagua jina la mtumiaji.
Tafadhali toa jiji halali.
Tafadhali toa hali halali.
Tafadhali toa zip halali.
Lazima ukubali kabla ya kuwasilisha. 
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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>

Vipengele vinavyoungwa mkono

Fomu zetu za mifano zinaonyesha maandishi asilia <input>hapo juu, lakini mitindo ya uthibitishaji wa fomu inapatikana kwa vidhibiti vyetu maalum vya fomu, pia.

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 
<form class="was-validated">
  <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>

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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide 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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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 hufungwa kwa <div>pamoja na ndugu <span>ili kuunda udhibiti wetu maalum na <label>kwa maandishi yanayoambatana. 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="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>

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="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</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

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

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.