Source

Mafomu

Zitsanzo ndi malangizo ogwiritsira ntchito masitayelo owongolera mafomu, zosankha zamasanjidwe, ndi zida zomwe zimapangidwira kupanga mitundu yosiyanasiyana.

Mwachidule

Kuwongolera mawonekedwe a Bootstrap kumakulitsa masitayilo athu a Rebooted mawonekedwe ndi makalasi. Gwiritsani ntchito makalasiwa kuti mulowe m'mawonekedwe awo makonda kuti aziwonetsa mosasinthasintha pamasakatuli ndi zida.

Onetsetsani kuti mukugwiritsa ntchito malingaliro oyenera typepazolowetsa zonse (monga emailma adilesi a imelo kapena numbermanambala) kuti mutengere mwayi pazowongolera zatsopano monga kutsimikizira imelo, kusankha manambala, ndi zina zambiri.

Nachi chitsanzo chachangu chowonetsera masitayilo a Bootstrap. Pitilizani kuwerenga zolemba pamakalasi ofunikira, masanjidwe a fomu, ndi zina zambiri.

Sitidzagawana imelo yanu ndi wina aliyense. 
<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>

Kuwongolera mawonekedwe

Maulamuliro a mawonekedwe - monga <input>s, <select>s, ndi <textarea>s - amalembedwa ndi .form-controlkalasi. Kuphatikizidwa ndi masitayelo amawonekedwe wamba, mawonekedwe, kukula, ndi zina zambiri.

Onetsetsani kuti mwafufuza mafomu athu kuti mupititse patsogolo masitayelo <select>a 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>

Kuti mulowetse mafayilo, sinthanani .form-controlndi .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>

Kukula

Khazikitsani utali pogwiritsa ntchito makalasi monga .form-control-lgndi .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>

Kuwerenga kokha

Onjezani mawonekedwe a readonlyboolean pazolowetsa kuti mupewe kusintha kwa mtengo wake. Zolowetsa zowerengera zokha zimawoneka zopepuka (monga zolowetsa zozimitsidwa), koma sungani cholozera chokhazikika.

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

Werengani mawu osavuta

Ngati mukufuna kukhala ndi <input readonly>zinthu m'mawonekedwe anu olembedwa ngati mawu osavuta, gwiritsani ntchito .form-control-plaintextkalasi kuti muchotse masitayelo amtundu wokhazikika ndikusunga malire olondola ndi padding.

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

Zolowetsa zosiyanasiyana

Khazikitsani zolowetsa mozungulira mozungulira pogwiritsa ntchito .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>

Mabokosi ndi mawailesi

Mabokosi osasinthika ndi mawayilesi amasinthidwa mothandizidwa ndi .form-check, kalasi imodzi yamitundu yonse yolowetsa yomwe imawongolera masanjidwe ndi machitidwe azinthu zawo za HTML . Mabokosi amasankha chimodzi kapena zingapo pamndandanda, pomwe mawayilesi ndi osankha njira imodzi kuchokera ambiri.

Mabokosi ndi mawayilesi olemala amathandizidwa. Chizindikirocho disabledchikhala ndi utoto wopepuka kuti uthandizire kuwonetsa momwe zalowetsedwera.

Mabokosi ndi mabatani a wailesi amathandizira kutsimikizira mawonekedwe a HTML ndikupereka zilembo zazifupi, zopezeka. Chifukwa chake, <input>s ndi <label>s ndi abale athu motsutsana ndi <input>mkati mwa <label>. Izi ndizowonjezera pang'ono monga momwe muyenera kufotokozera idndi forzikhumbo kuti mugwirizane <input>ndi <label>.

Zofikira (zosanjikiza)

Mwachisawawa, chiwerengero chilichonse cha mabokosi ndi mawailesi omwe ndi abale apamtima azisakanizidwa molunjika ndikusiyanitsidwa moyenerera ndi .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>

Motsatana

Gulu mabokosi kapena mawayilesi pamzere wopingasa womwewo powonjezera .form-check-inline..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>

Popanda zilembo

Onjezani .position-staticpazolowetsa .form-checkzomwe zilibe mawu aliwonse. Kumbukirani kuperekabe mtundu wina wa zilembo zamatekinoloje othandizira (mwachitsanzo, kugwiritsa ntchito 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>

Kamangidwe

Popeza Bootstrap imagwira ntchito display: blockndipo width: 100%pafupifupi pafupifupi mawonekedwe athu onse amawongolera, mafomu amangounjika mokhazikika. Makalasi owonjezera angagwiritsidwe ntchito kusinthira masinthidwe awa pamtundu uliwonse.

Pangani magulu

Kalasi .form-groupndiyo njira yosavuta yowonjezeramo mawonekedwe. Zimapereka kalasi yosinthika yomwe imalimbikitsa kusanjika koyenera kwa malembo, zowongolera, mawu ofunikira, ndi mauthenga otsimikizira mawonekedwe. Mwachikhazikitso imagwira ntchito margin-bottom, koma imatenga masitayelo owonjezera .form-inlinemomwe ikufunikira. Gwiritsani ntchito ndi <fieldset>s, <div>s, kapena pafupifupi chinthu china chilichonse.

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

Fomu ya grid

Mafomu ovuta kwambiri amatha kupangidwa pogwiritsa ntchito makalasi athu a gridi. Gwiritsani ntchito izi pamapangidwe amafomu omwe amafunikira mizati ingapo, m'lifupi mwake mosiyanasiyana, ndi njira zina zoyankhulirana zina.

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

Mzere wa fomu

Mutha kusinthiranso , kusinthika .rowkwa .form-rowmzere wathu wa gridi womwe umapitilira machulukidwe osasinthika kuti akhale olimba komanso ophatikizika.

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

Mapangidwe ovuta kwambiri amathanso kupangidwa ndi grid system.

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

Chopingasa mawonekedwe

Pangani mafomu opingasa ndi gululi powonjezera .rowkalasi kuti mupange magulu ndikugwiritsa ntchito .col-*-*makalasiwo kuti mutchule m'lifupi mwamalebulo ndi zowongolera zanu. Onetsetsani kuti muwonjezenso .col-form-labelku ma <label>s anu kuti akhazikike molunjika ndikuwongolera mawonekedwe awo.

Nthawi zina, mungafunike kugwiritsa ntchito maginito kapena ma padding zida kuti mupange mawonekedwe abwino omwe mukufuna. Mwachitsanzo, padding-toptachotsa lebulo yapawailesi yosanjidwa kuti tigwirizane bwino ndi zoyambira.

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

Onetsetsani kuti mukugwiritsa ntchito .col-form-label-smkapena s kapena s kuti mutsatire molondola kukula kwa ndi ..col-form-label-lg<label><legend>.form-control-lg.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>

Kukula kwa mizati

Monga tawonera m'zitsanzo zam'mbuyomu, makina athu a gridi amakulolani kuyika nambala iliyonse ya .cols mkati mwa a .rowkapena .form-row. Adzagawaniza kukula komwe kulipo mofanana pakati pawo. Mukhozanso kusankha kagawo kakang'ono kamipingo yanu kuti mutenge malo ochulukirapo kapena ochepa, pamene otsalawo .colamagawanitsa ena onse, ndi makalasi apadera monga .col-7.

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

Auto-saizi

Chitsanzo chomwe chili pansipa chimagwiritsa ntchito chida cha flexbox kuti chikhazikike pakati pazomwe zili mkati ndikusintha kotero .colkuti .col-automizati yanu imangotenga malo ochulukirapo momwe mungafunire. Mwa njira ina, ndime imadzikulitsa yokha kutengera zomwe zili mkati.

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

Kenako mutha kusakanizanso izi ndi makalasi otengera kukula kwake.

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

Ndipo ndithudi kuwongolera mawonekedwe kumathandizidwa.

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

Mafomu apaintaneti

Gwiritsani ntchito .form-inlinekalasi kuti muwonetse zolemba zingapo, zowongolera mafomu, ndi mabatani pamzere umodzi wopingasa. Kuwongolera mafomu mkati mwa mafomu apaintaneti kumasiyana pang'ono ndi momwe amakhalira.

  • Zowongolera ndi display: flex, kugwetsa malo oyera a HTML ndikukulolani kuti muzitha kuyang'anira masitayilo ndi zida zosinthira .
  • Maulamuliro ndi magulu olowetsa amalandila width: autokuti apitirire kusakhazikika kwa Bootstrap width: 100%.
  • Zowongolera zimangowoneka pamzere pamawonekedwe omwe ali osachepera 576px m'lifupi kuti awerengere malo ocheperako pazida zam'manja.

Mungafunike kuthana ndi m'lifupi ndi kuyanitsidwa kwa mawonekedwe amtundu uliwonse ndi zida zolekanitsa (monga momwe ziliri pansipa). Pomaliza, onetsetsani kuti nthawi zonse mumaphatikiza <label>mawonekedwe amtundu uliwonse, ngakhale mungafunike kubisa kwa alendo osawerenga skrini omwe ali ndi .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>

Kuwongolera mafomu ndi zosankha kumathandizidwanso.

<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>
Njira zina zolembera zobisika

Tekinoloje zothandizira monga zowerengera skrini zitha kukhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pama fomu apaintaneti, mutha kubisa zilembo pogwiritsa ntchito .sr-onlykalasi. Palinso njira zina zoperekera chizindikiro chaukadaulo wothandizira, monga aria-label, aria-labelledbykapena mawonekedwe title. Ngati palibe chimodzi mwa izi, matekinoloje othandizira amatha kugwiritsa ntchito mawonekedwewo placeholder, ngati alipo, koma dziwani kuti kugwiritsa placeholderntchito m'malo mwa njira zina zolembera sikulangizidwa.

Thandizani mawu

Zolemba zothandizira mu block-level mu mafomu zitha kupangidwa pogwiritsa ntchito .form-text(omwe kale ankadziwika kuti .help-blockmu v3). Zolemba zothandizira pa intaneti zitha kukhazikitsidwa mosavuta pogwiritsa ntchito chinthu chilichonse chamkati cha HTML ndi makalasi othandizira ngati .text-muted.

Gwirizanitsani zolemba zothandizira ndi zowongolera mawonekedwe

Mawu othandizira akuyenera kulumikizidwa momveka bwino ndi mawonekedwe omwe akukhudzana ndi kugwiritsa ntchito mawonekedwe aria-describedby. Izi ziwonetsetsa kuti matekinoloje othandizira-monga owerenga skrini-alengeza mawu othandizira pamene wogwiritsa ntchitoyo ayang'ana kapena ayamba kuyang'anira.

Mawu othandizira omwe ali pansipa akhoza kulembedwa ndi .form-text. Kalasi iyi imaphatikizanso display: blockndikuwonjezera malire apamwamba kuti mutalikirane mosavuta ndi zomwe zili pamwambapa.

Mawu anu achinsinsi akuyenera kukhala aatali a zilembo 8-20, azikhala ndi zilembo ndi manambala, ndipo asakhale ndi mipata, zilembo zapadera, kapena 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>

Zolemba zapaintaneti zitha kugwiritsa ntchito chinthu chilichonse chamkati cha HTML (chikhale <small>, <span>, kapena china) popanda china chilichonse koma gulu lothandizira.

Ayenera kukhala kutalika kwa zilembo 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>

Mafomu olumala

Onjezani mawonekedwe a disabledboolean pazolowetsa kuti mupewe kulumikizana ndi ogwiritsa ntchito ndikupangitsa kuti ziwonekere zopepuka.

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

Onjezani zomwe zili disabledku a <fieldset>kuti muletse zowongolera zonse mkati.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat ndi anangula

Mwachikhazikitso, asakatuli azitha kuyang'anira mawonekedwe onse ( <input>, <select>ndi <button>zinthu) mkati <fieldset disabled>mwazolephereka, kulepheretsa kuyanjana kwa kiyibodi ndi mbewa pa iwo. Komabe, ngati mawonekedwe anu alinso ndi <a ... class="btn btn-*">zinthu, izi zidzangopatsidwa kalembedwe ka pointer-events: none. Monga tafotokozera m'chigawo chokhudza mabatani olemala (ndipo makamaka mugawo lazinthu za nangula), katundu wa CSS sanakhazikitsidwebe ndipo sakuthandizidwa mokwanira mu Internet Explorer 10, ndipo sangalepheretse ogwiritsa ntchito kiyibodi kukhala. amatha kuyang'ana kapena kuyambitsa maulalo awa. Chifukwa chake kuti mukhale otetezeka, gwiritsani ntchito JavaScript kuti mulepheretse maulalo oterowo.

Kugwirizana kwa msakatuli

Ngakhale Bootstrap idzagwiritsa ntchito masitayelo awa mu asakatuli onse, Internet Explorer 11 ndi pansipa sizigwirizana ndi disabledmawonekedwe a <fieldset>. Gwiritsani ntchito JavaScript yokhazikika kuti muyimitse gawo la asakatuli awa.

Kutsimikizira

Perekani mayankho ofunika, otheka kwa ogwiritsa ntchito anu potsimikizira mafomu a HTML5- omwe amapezeka m'masakatuli athu onse othandizidwa . Sankhani kuchokera pa msakatuli wotsimikizira zotsimikizira, kapena gwiritsani ntchito mauthenga okhazikika ndi makalasi athu omangidwira ndikuyambitsa JavaScript.

Tikukulimbikitsani kugwiritsa ntchito masitayelo otsimikizira, popeza mauthenga otsimikizira osasintha a msakatuli samawonetsedwa nthawi zonse ndi matekinoloje othandizira m'masakatuli onse (makamaka, Chrome pakompyuta ndi m'manja).

Momwe zimagwirira ntchito

Umu ndi momwe kutsimikizira mawonekedwe kumagwirira ntchito ndi Bootstrap:

  • Kutsimikizika kwa mawonekedwe a HTML kumagwiritsidwa ntchito kudzera m'makalasi awiri achinyengo a CSS, :invalidndi :valid. Zimakhudza <input>, <select>, ndi <textarea>zinthu.
  • Bootstrap imayang'ana :invalidndi :validmasitayelo ku .was-validatedkalasi ya makolo, nthawi zambiri amagwiritsidwa ntchito ku <form>. Kupanda kutero, gawo lililonse lofunikira lopanda mtengo likuwoneka ngati losavomerezeka pamasamba. Mwanjira iyi, mutha kusankha nthawi yoti muyambitse (nthawi zambiri mukayesa kutumiza fomu).
  • Kuti mukonzenso mawonekedwe a fomuyo (mwachitsanzo, popereka mawonekedwe osinthika pogwiritsa ntchito AJAX), chotsani .was-validatedkalasiyo <form>pambuyo popereka.
  • Monga kubweza, .is-invalidndipo .is-validmakalasi atha kugwiritsidwa ntchito m'malo mwa pseudo-class pakutsimikizira mbali ya seva . Safuna .was-validatedkalasi ya makolo.
  • Chifukwa cha zopinga momwe CSS imagwirira ntchito, sitingathe (pakali pano) kugwiritsa ntchito masitayelo ku <label>omwe amabwera patsogolo pa mawonekedwe mu DOM popanda kuthandizidwa ndi JavaScript.
  • Asakatuli onse amakono amathandizira API yotsimikizira zoletsa , njira zingapo za JavaScript zotsimikizira kuwongolera mawonekedwe.
  • Mauthenga oyankha atha kugwiritsa ntchito zosasintha za msakatuli (zosiyana pa msakatuli uliwonse, komanso zosalembedwera kudzera pa CSS) kapena masitayelo athu oyankha omwe ali ndi HTML ndi CSS yowonjezera.
  • Mutha kupereka mauthenga ovomerezeka ndi setCustomValidityJavaScript.

Poganizira izi, lingalirani ma demo otsatirawa a masitayelo athu otsimikizira mawonekedwe, makalasi am'mbali mwa seva, ndi kusasintha kwa msakatuli.

Masitayelo mwamakonda

Kwa mauthenga otsimikizira mawonekedwe a Bootstrap, muyenera kuwonjezera mawonekedwe a novalidateboolean ku fayilo yanu ya <form>. Izi zimayimitsa zida zosinthira msakatuli, komabe zimapereka mwayi wopeza ma API otsimikizira mu JavaScript. Yesani kutumiza fomu ili pansipa; JavaScript yathu idumpha batani lotumiza ndikutumiza ndemanga kwa inu. Mukayesa kutumiza, muwona mawonekedwe :invalidndi :validmasitayelo akugwiritsidwa ntchito pazowongolera mafomu anu.

Masitayelo oyankha mwamakonda anu amagwiritsa ntchito mitundu yokhazikika, malire, masitayelo akutsogolo, ndi zithunzi zakumbuyo kuti athe kulumikizana bwino ndi mayankho. Zithunzi zakumbuyo za <select>s zimapezeka ndi .custom-select, osati .form-control.

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

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

Zosasintha za msakatuli

Simukufuna kumva mauthenga otsimikizira kapena kulemba JavaScript kuti musinthe machitidwe? Zabwino zonse, mutha kugwiritsa ntchito osasintha osatsegula. Yesani kutumiza fomu ili pansipa. Kutengera msakatuli wanu ndi OS, muwona mayankho osiyanasiyana.

Ngakhale masitayelo oyankhawa sangalembedwe ndi CSS, mutha kusinthanso zolemba zanu kudzera mu JavaScript.

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

Mbali ya seva

Tikukulimbikitsani kugwiritsa ntchito kutsimikizira kwa kasitomala, koma ngati mukufuna kutsimikizira mbali ya seva, mutha kuwonetsa magawo omwe ali olakwika komanso ovomerezeka .is-invalidndi .is-valid. Dziwani kuti .invalid-feedbackamathandizidwanso ndi makalasi awa.

Zikuwoneka bwino!
Zikuwoneka bwino!
@
Chonde sankhani dzina lolowera.
Chonde perekani mzinda wovomerezeka.
Chonde sankhani dziko lovomerezeka.
Chonde perekani zip yolondola.
Muyenera kuvomereza musanapereke. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Zinthu zothandizira

Masitayelo otsimikizira alipo pazowongolera mafomu otsatirawa ndi zigawo zake:

  • <input>s ndi <textarea>s ndi .form-control(kuphatikiza mpaka m'modzi .form-controlm'magulu olowetsa)
  • <select>s ndi .form-controlor.custom-select
  • .form-checks
  • .custom-checkboxs ndi .custom-radios
  • .custom-file
Chonde lowetsani uthenga m'malembawo.
Chitsanzo mawu oyankha ndi olakwika
Zitsanzo zinanso mawu olakwika
Chitsanzo chosankhika chosayenera
Ndemanga za fayilo yosavomerezeka 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

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

Malangizo

Ngati masanjidwe anu amaloleza, mutha kusintha .{valid|invalid}-feedbackmakalasiwo .{valid|invalid}-tooltipkuti awonetse mayankho otsimikizira mu chida cholembedwa. Onetsetsani kuti muli ndi kholo lomwe lili ndi position: relativechida chothandizira. Muchitsanzo chomwe chili pansipa, makalasi athu ali ndi izi kale, koma polojekiti yanu ingafunike kukhazikitsidwa kwina.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Kusintha mwamakonda

Mayiko otsimikizira atha kusinthidwa makonda kudzera pa Sass ndi $form-validation-statesmapu. Zopezeka mufayilo yathu _variables.scss, mapu a Sass awa adalumikizidwa kuti apange zokhazikika valid/ invalidzovomerezeka. Kuphatikizidwa ndi mapu okhazikitsidwa kuti musinthe mtundu ndi chithunzi cha dziko lililonse. Ngakhale kuti palibe mayiko ena omwe amathandizidwa ndi asakatuli, omwe amagwiritsa ntchito masitayelo azokonda amatha kuwonjezera mayankho ovuta kwambiri.

Chonde dziwani kuti sitikulangiza kuti musinthe izi mwamakonda popanda kusinthanso form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Mafomu achizolowezi

Kuti musinthe makonda anu komanso kusasinthika kwa msakatuli, gwiritsani ntchito mawonekedwe athu amitundu yonse kuti mulowe m'malo mwa osatsegula. Amamangidwa pamwamba pa semantic komanso kupezeka mosavuta, kotero ndikusintha kokhazikika kwa mawonekedwe aliwonse osasinthika.

Mabokosi ndi mawailesi

Bokosi lililonse loyang'ana ndi wailesi <input>ndi ma <label>pairing amakutidwa ndi <div>kupanga makonda athu. Mwamakhalidwe, iyi ndi njira yofanana ndi yosasinthika yathu .form-check.

Timagwiritsa ntchito chosankha cha abale athu ( ~) m'maboma athu <input>onse-monga- :checkedkuti tisinthe bwino chizindikiro chathu. Tikaphatikiza ndi .custom-control-labelkalasi, tithanso kupanga masitayilo a chinthu chilichonse motengera momwe <input>'s state.

Timabisa zosasinthika <input>ndikugwiritsa opacityntchito .custom-control-labelkupanga chizindikiro chatsopano m'malo mwake ::beforendi ::after. Tsoka ilo sitingathe kupanga chizolowezi kuchokera <input>chifukwa ma CSS contentsagwira ntchito pa chinthucho.

M'magawo osankhidwa , timagwiritsa ntchito zithunzi za SVG zophatikizidwa ndi base64 kuchokera ku Open Iconic . Izi zimatipatsa mwayi wowongolera masitayelo ndi mawonekedwe pa asakatuli ndi zida zonse.

Mabokosi

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

Mabokosi a makonda amathanso kugwiritsa ntchito :indeterminatekalasi yabodza ikakhazikitsidwa pamanja kudzera pa JavaScript (palibe mawonekedwe a HTML ofotokozera).

Ngati mukugwiritsa ntchito jQuery, chinthu chonga ichi chiyenera kukhala chokwanira:

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

Wailesi

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

Motsatana

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

Wolumala

Mabokosi osankhidwa ndi mawayilesi amathanso kuzimitsidwa. Onjezani mawonekedwe a disabledboolean ku <input>ndipo chizindikiro cha makonda ndi mafotokozedwe a zilembo zidzasinthidwa zokha.

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

Masinthidwe

Kusintha kuli ndi chizindikiro cha bokosi loyang'ana makonda koma amagwiritsa ntchito .custom-switchkalasiyo kuti azitha kusintha. Masiwichi amathandiziranso mawonekedwe disabled.

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

Sankhani menyu

Mindandanda <select>yazakudya imafunikira kalasi yokhayokha, .custom-selectkuti muyambitse masitayelo achikhalidwe. Masitayelo anthawi zonse amangokhala ndi <select>mawonekedwe oyambira ndipo sangathe kusintha <option>s chifukwa chakulephera kwa msakatuli.

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

Mutha kusankhanso kuchokera pazosankha zazing'ono kapena zazikulu kuti zigwirizane ndi zolemba zathu zofananira.

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

Khalidweli multiplelimathandizidwanso:

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

Monga momwe zilili size:

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

Mtundu

Pangani zowongolera <input type="range">makonda ndi .custom-range. Nyimboyi (kumbuyo) ndi chala chachikulu (mtengo) zonse zidalembedwa kuti ziwonekere mofanana pakusakatula. Monga IE ndi Firefox okha amathandizira "kudzaza" njanji yawo kuchokera kumanzere kapena kumanja kwa chala chachikulu monga njira yowonetsera kupita patsogolo, sitikuchirikiza pano.

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

Zolowetsa zosiyanasiyana zimakhala ndi zikhalidwe za minndi max- 0ndi 100, motsatana. Mutha kutchula zatsopano za omwe akugwiritsa ntchito minndi mawonekedwe max.

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

Mwachisawawa, zolowetsa zamitundu "snap" kumagulu onse. Kuti musinthe izi, mutha kufotokoza stepmtengo. Muchitsanzo chomwe chili pansipa, timachulukitsa kuchuluka kwa masitepe pogwiritsa ntchito step="0.5".

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

Msakatuli wapamwamba

Pulagi yovomerezeka yosinthira mafayilo amtundu wanu: bs-custom-file-input , ndizomwe tikugwiritsa ntchito pano muzolemba zathu.

Kuyika kwamafayilo ndikovuta kwambiri pagululi ndipo kumafunikira JavaScript yowonjezera ngati mungafune kuwalumikiza ndi magwiridwe antchito Sankhani fayilo …

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

Timabisa fayilo yokhazikika <input>kudzera opacitym'malo mwake ndikusintha mawonekedwe a <label>. Batani limapangidwa ndikuyikidwa ndi ::after. Pomaliza, tikulengeza a widthndi heightpa malo <input>oyenera a zinthu zozungulira.

Kumasulira kapena kusintha zingwe ndi SCSS

Gulu :lang()lachinyengo limagwiritsidwa ntchito kulola kumasulira mawu a "Sakatulani" m'zilankhulo zina. Sonyezani kapena onjezani zosintha za $custom-file-textSass ndi tagi yogwirizana ndi zilankhulo ndi zingwe zamalo. Zingwe za Chingerezi zitha kusinthidwa mwanjira yomweyo. Mwachitsanzo, umu ndi momwe munthu angawonjezere zomasulira za Chisipanishi (kodi ya chilankhulo cha Chisipanishi ndi es):

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

Nazi zomwe lang(es)zikuchitika pamafayilo osinthidwa mwamakonda pa zomasulira za Chisipanishi:

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

Muyenera kukhazikitsa chilankhulo cha chikalata chanu (kapena subtree yake) molondola kuti mawu olondola awonetsedwe. Izi zitha kuchitika pogwiritsa ntchito zomwe zili langpatsamba kapena <html>mutu wa Content-LanguageHTTP , mwa njira zina.

Kumasulira kapena kusintha zingwe ndi HTML

Bootstrap imaperekanso njira yomasulira mawu a "Sakatulani" mu HTML ndi mawonekedwe data-browseomwe atha kuwonjezedwa ku lebulo lolowera (chitsanzo mu Chidatchi):

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