Swivumbeko

Swikombiso na swiletelo swa matirhiselo ya switayele swa vulawuri bya tifomo, swihlawulekisi swa layout, na swiphemu swa ntolovelo swo tumbuluxa tifomo to hambana hambana.

Nkatsakanyo

Swilawuri swa fomo swa Bootstrap swi andlala eka switayele swa hina swa fomo leswi Rebooted hi titlilasi. Tirhisa titlilasi leti ku hlawula eka swikombiso swa tona leswi endleriweke ku hundzuluxela loku nga cincekiki eka swihlamusela-marito ni switirhisiwa.

Tiyisisa leswaku u tirhisa typexihlawulekisi lexi faneleke eka swingheniso hinkwaswo (xikombiso, emaileka adirese ya imeyili kumbe numbereka vuxokoxoko bya tinhlayo) ku tirhisa vulawuri bya swingheniso leswintshwa swo fana na ku tiyisisiwa ka imeyili, ku hlawula tinomboro, na swin’wana.

Hi lexi xikombiso xo hatlisa xo kombisa switayele swa xivumbeko xa Bootstrap. Tshama u ri karhi u hlaya ku kuma matsalwa ya titlilasi leti lavekaka, maendlelo ya fomo, na swin’wana.

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

Vulawuri bya xivumbeko

Swilawuri swa xivumbeko xa matsalwa—ku fana na <input>s, <select>s na <textarea>s—swi endliwa hi xitayili na .form-controltlilasi. Ku katsa ni switayele swa ku languteka hi ku angarhela, xiyimo xa ku kongomisa, ku pima mpimo ni swin’wana.

Tiyisisa leswaku u kambisisa tifomo ta hina ta ntolovelo ku yisa emahlweni switayele <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>

Eka swingheniso swa fayili, cincana hi .form-controlfor .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>

Ku pima mpimo

Seta ku tlakuka hi ku tirhisa titlilasi to fana .form-control-lgna na .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>

Ku hlaya ntsena

Engetela readonlyxihlawulekisi xa boolean eka xingheniso ku sivela ku cinciwa ka nkoka wa xingheniso. Swingheniso leswi hlayiwaka ntsena swi vonaka swi olova (ku fana ni swingheniso leswi nga tirhiki), kambe hlayisa xikombiso xa ntolovelo.

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

Ku hlaya ntsena tsalwa ro olova

Loko u lava ku va na <input readonly>swiaki eka fomo ya wena leswi endliweke hi xitayili tanihi tsalwa ro olova, tirhisa .form-control-plaintexttlilasi ku susa xitayili xa nsimu ya fomo ya ntolovelo na ku hlayisa margin na padding leyi faneleke.

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

Switirhisiwa swa Range

Seta swingheniso swa rhengu leswi nga rhendzelekaka hi ndlela yo olova hi ku tirhisa .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>

Mabokisi yo kambela ni swiya-ni-moya

Mabokisi yo kambela ya ntolovelo na swiya-ni-moya swi antswisiwa hi ku pfuniwa hi .form-check, tlilasi yin'we ya tinxaka timbirhi ta ku nghenisa leyi antswisaka maendlelo na mahanyelo ya swiaki swa swona swa HTML . Mabokisi yo kambela i ya ku hlawula xin’we kumbe swo hlayanyana eka nxaxamelo, kasi swiya-ni-moya i swa ku hlawula ndlela yin’we eka yo tala.

Mabokisi yo kambela lama nga tirhiki na swiya-ni-moya swa seketeriwa, kambe ku nyika not-allowedxikombiso eka hover ya mutswari <label>, u ta fanela ku engetela disabledxihlawulekisi eka .form-check-input. Xihlawulekisi lexi nga tirhiki xi ta tirhisa muvala wo vonikela ku pfuneta ku kombisa xiyimo xa ku nghenisa.

Mabokisi yo kambela na swiya-ni-moya leswi tirhisiwaka swi akiwile ku seketela ku tiyisisiwa ka fomo leyi simekiweke eka HTML na ku nyika malebvu yo koma, lama fikelelaka. Hi ndlela yaleyo, <input>s na <label>s ya hina i swiaki swa vamakwavo ku hambana na an <input>endzeni ka a <label>. Leswi swi na marito nyana tani hi leswi u faneleke ku boxa idna forswihlawulekisi ku hlanganisa <input>na <label>.

Xihlawulekisi (xi hlengeletiwile) .

Hi ku tiyimisela, nhlayo yihi na yihi ya mabokisi yo kambela ni swiya-ni-moya leswi nga makwavo wa le kusuhi swi ta hlanganisiwa hi ndlela leyi yimisiweke naswona swi ta vekiwa hi ndlela leyi faneleke hi .form-check.

Bokisi ro kambela ra xiviri

Bokisi ro kambela leri nga tirhiki

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

Xiya-ni-moya xa ntolovelo

Xiya-ni-moya xa vumbirhi xa ntolovelo

Radio leyi nga tirhiki

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

Inline

Hlengeleta mabokisi yo kambela kumbe swiya-ni-moya eka layini yin’we leyi nga etlhelo hi ku engetela .form-check-inlineeka yin’wana ni yin’wana .form-check.

3 (va lamaleke) .

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

3 (va lamaleke) .

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

Handle ka malebvu

Engetelani .position-staticeka swingheniso endzeni .form-checkleswi nga riki na tsalwa ra lebula. Tsundzuka ku ha nyika xivumbeko xo karhi xa lebula ya thekinoloji yo pfuneta (xikombiso, ku tirhisa 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>

Vuandlalo

Tanihi leswi Bootstrap yi tirhaka display: blockna width: 100%kwalomu ka vulawuri bya hina hinkwabyo bya tifomo, tifomo hi ku tiyimisela ti ta stack hi ku kongoma. Titlilasi to engetela ti nga tirhisiwa ku cinca-cinca layout leyi hi ku ya hi fomo yin’wana na yin’wana.

Vumba mintlawa

Tlilasi .form-groupi ndlela yo olova yo engetela xivumbeko xo karhi eka tifomo. Yi nyika tlilasi leyi cinca-cincaka leyi khutazaka ku hlengeletiwa loku faneleke ka malebvu, vulawuri, tsalwa ra mpfuneto leri nga hlawuriwa, na ku rhumela marungula ya ku tiyisisa fomo. By default it only applies margin-bottom, kambe yi teka switayele leswi engetelekeke eka .form-inlineloko swi laveka. Yi tirhise na <fieldset>s, <div>s kumbe kwalomu ka xiaki xin’wana ni xin’wana.

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

Fomo ya gridi

Tifomo leti rharhanganeke swinene ti nga akiwa hi ku tirhisa titlilasi ta hina ta gridi. Tirhisa leswi eka swivumbeko swa tifomo leswi lavaka tikholomu to tala, ku anama ko hambana-hambana, na swihlawulekisi swo engetela swa ku ringanisa.

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

Fomo ya layini

U nga ha tlhela u cincana .rowhi .form-row, ku cinca ka layini ya hina ya gridi ya ntolovelo leyi tlulaka ti-gutter ta kholomo ta ntolovelo ku kuma swivumbeko leswi tiyisiweke ni leswi ringanaka.

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

Ti layouts leti rharhanganeke swinene tinga tlhela ti endliwa hi sisiteme ya grid.

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

Xivumbeko xa horizontal

Endla tifomo ta horizontal hi gridi hi ku engetela .rowtlilasi ku vumba mintlawa na ku tirhisa .col-*-*titlilasi ku boxa ku anama ka malebvu ya wena na vulawuri. Tiyisisa leswaku u engetela .col-form-labeleka s ya wena <label>na yona leswaku yi va vertically centered na vulawuri bya yona bya xivumbeko lebyi fambelanaka.

Minkarhi yin’wana, kumbexana u fanele u tirhisa switirhisiwa swa margin kumbe swa padding leswaku u endla ku ringanana koloko loku hetisekeke loku u ku lavaka. Xikombiso, hi susile padding-toplebula ya hina ya swingheniso swa xiya-ni-moya leswi hlanganisiweke ku ringanisa ku antswa masungulo ya tsalwa.

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

Ku ringanisiwa ka lebula ya xivumbeko xa horizontal

Tiyisisa leswaku u tirhisa .col-form-label-smkumbe .col-form-label-lgeka <label>s kumbe <legend>s ya wena ku landzelela kahle vukulu bya .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>

Ku pima mpimo wa tikholomu

Hilaha swi kombisiweke hakona eka swikombiso leswi hundzeke, sisiteme ya hina ya giridi yi ku pfumelela ku veka nhlayo yihi na yihi ya .cols endzeni ka a .rowkumbe .form-row. Va ta avanyisa ku anama loku nga kona hi ku ringana exikarhi ka vona. U nga ha tlhela u hlawula ntlawa lowutsongo wa tikholomu ta wena ku teka ndhawu yo tala kumbe yitsongo, kasi .cols leyi saleke yi avanyisa hi ku ringana leswi seleke, hi titlilasi to karhi ta tikholomu to fana na .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>

Ku cinca-cinca ka swilo hi ku tisungulela

Xikombiso lexi nga laha hansi xi tirhisa xitirhisiwa xa flexbox ku veka exikarhi hi ndlela yo yima leswi nga endzeni na ku cinca .colleswaku .col-autotikholomu ta wena ti teka ntsena ndhawu yo tala hilaha swi lavekaka hakona. Hi ndlela yin’wana, kholomo yi tisayisa hi yoxe hi ku ya hi leswi nga endzeni.

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

U nga ha tlhela u hlanganisa sweswo nakambe hi titlilasi ta tikholomu leti kongomeke hi sayizi.

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

Naswona hakunene vulawuri bya fomo ya ntolovelo bya seketeriwa.

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

Tifomo ta le ndzeni ka layini

Tirhisa .form-inlinetlilasi ku kombisa nxaxamelo wa malebvu, swilawuri swa fomo ni swikomba-nkarhi eka layini yin’we leyi nga etlhelo. Vulawuri bya tifomo endzeni ka tifomo ta le ndzeni ka layini byi hambana nyana na swiyimo swa tona swa ntolovelo.

Vulawuri i display: flex, ku wisa ndhawu yihi na yihi yo basa ya HTML na ku ku pfumelela ku nyika vulawuri bya ku ringanisa na switirhisiwa swa ku hambana na flexbox .
Swilawuri na mintlawa yo nghenisa swi amukela width: autoku tlula Bootstrap default width: 100%.
Swilawuri swi humelela ntsena endzeni ka layini eka swivono leswi nga kwalomu ka 576px hi ku anama ku hlamusela swivono swo koma eka switirhisiwa swa tiselfoni.

U nga ha lava ku lulamisa hi voko ku anama na ku ringanisiwa ka vulawuri bya fomo yin’wana na yin’wana na switirhisiwa swa ku hambana (hilaha swi kombisiweke hakona laha hansi). Xo hetelela, tiyisisa leswaku minkarhi hinkwayo u katsa a <label>na vulawuri byin’wana na byin’wana bya fomo, hambiloko u lava ku byi tumbeta eka vaendzi lava nga riki vahlayi va xikirini hi .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>

Vulawuri bya fomo ya ntolovelo na swihlawulekisi na swona swa seketeriwa.

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

Swilo swin’wana leswi nga tirhisiwaka eka malebvu lama fihliweke

Tithekinoloji to pfuneta to fana na swihlaya swa xikirini ti ta va na xiphiqo eka tifomo ta wena loko u nga katsi lebula eka ku nghenisa kun’wana na kun’wana. Eka tifomo leti ta le ndzeni ka layini, u nga fihla malebvu hi ku tirhisa .sr-onlytlilasi. Ku na tindlela tin’wana to nyika lebula ya thekinoloji yo pfuneta, ku fana na aria-label, aria-labelledbykumbe titlexihlawulekisi. Loko ku nga ri na xin’we xa leswi lexi nga kona, thekinoloji yo pfuneta yi nga ha tirhisa placeholderxihlawulekisi, loko yi ri kona, kambe xiya leswaku ku tirhisiwa placeholdertanihi ku siva tindlela tin’wana to lebula a swi tsundzuxiwi.

Tsalwa ra mpfuneto

Tsalwa ra mpfuneto ra xiyimo xa xibokisana eka tifomo ri nga endliwa hi ku tirhisa .form-text(khale a ri tiviwa tanihi .help-blockeka v3). Tsalwa ra mpfuneto wa le ndzeni ka layini ri nga tirhisiwa hi ku cinca-cinca hi ku tirhisa xiaki xihi na xihi xa HTML xa le ndzeni ka layini na titlilasi ta vukorhokeri to fana na .text-muted.

Ku hlanganisa tsalwa ra mpfuneto na vulawuri bya fomo

Tsalwa ra mpfuneto ri fanele ku fambelanisiwa hi ku kongoma na vulawuri bya xivumbeko lebyi ri fambelanaka na ku tirhisa aria-describedbyxihlawulekisi. Leswi swi ta tiyisisa leswaku thekinoloji yo pfuneta—yo tanihi swihlaya-swikirini—yi ta tivisa tsalwa leri ra mpfuno loko mutirhisi a kongomisa kumbe a nghena eka vulawuri.

Tsalwa ra mpfuneto ehansi ka swingheniso ri nga endliwa xitayili hi .form-text. Tlilasi leyi yi katsa display: blockno engetela margin yin’wana ya le henhla ku kuma ku hambana ko olova ku suka eka swingheniso leswi nga laha henhla.

Phasiwedi Password ya wena yi fanele yi lehe 8-20 wa swihlawulekisi, yi ri na maletere na tinomboro, naswona a yi fanelanga ku va na swivandla, swihlawulekisi swo hlawuleka, kumbe 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>

Tsalwa ra le ndzeni ka layini ri nga tirhisa xiaki xihi na xihi xa HTML xa le ndzeni ka layini lexi tolovelekeke (ku nga va <small>, <span>, kumbe swin’wana) lexi nga riki na nchumu handle ka tlilasi ya vukorhokeri.

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

Tifomo ta vulema

Engetela disabledxihlawulekisi xa boolean eka input ku sivela ku tirhisana ka vatirhisi na ku endla leswaku yi vonaka yi olova.

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

Engetela disabledxihlawulekisi eka a <fieldset>ku tshikisa vulawuri hinkwabyo endzeni.

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

Xitsundzuxo lexi nga ni tinsoma

Hi ku tiyimisela, swihlamusela-marito swi ta khoma vulawuri hinkwabyo bya xivumbeko xa ntumbuluko ( <input>, <select>na <button>swiaki) endzeni ka a <fieldset disabled>tanihi leswi nga tirhiki, swi sivela ku tirhisana ka khibhodi na mbeva eka swona. Kambe loko fomo ya wena yi tlhela yi katsa <a ... class="btn btn-*">swiaki, leswi swi ta nyikiwa ntsena xitayili xa pointer-events: none. Hilaha swi kombisiweke hakona eka xiyenge lexi vulavulaka hi xiyimo lexi nga tirhiki xa swikomba-nkarhi (naswona hi ku kongoma eka xiyengentsongo xa swiaki swa anchor), nhundzu leyi ya CSS a yi si ringanisiwa naswona a yi seketeriwi hi ku helela eka Internet Explorer 10, naswona a yi nge siveli vatirhisi va khibhodi ku va tano ku kota ku kongomisa kumbe ku tirhisa swihlanganisi leswi. Kutani leswaku u hlayiseka, tirhisa JavaScript leyi endleriweke wena ku tshikisa swihlanganisi swo tano.

Ku fambisana ka cross-browser

Loko Bootstrap yi ta tirhisa switayele leswi eka swihlamusela-marito hinkwaswo, Internet Explorer 11 na le hansi a yi seketeli hi ku helela disabledxihlawulekisi eka <fieldset>. Tirhisa JavaScript ya ntolovelo ku tshikisa fieldset eka swihlamusela-marito leswi.

Ku tiyisisiwa ka swilo

Nyika vuyelo bya nkoka, lebyi nga tekiwaka goza eka vatirhisi va wena hi ku tiyisisiwa ka fomo ya HTML5– leyi kumekaka eka swihlamusela-marito swa hina hinkwaswo leswi seketeriwaka . Hlawula eka vuyelo bya ku tiyisisa bya xiviri bya browser, kutani u tirhisa marungula ya ntolovelo hi titlilasi ta hina leti akiweke endzeni na JavaScript yo sungula.

Sweswi hi ringanyeta ku tirhisa switayele swa ku tiyisisa swa ntolovelo, tanihileswi marungula ya ku tiyisisa ya xiviri ya xihlamusela-marito xa ntumbuluko ma nga tshamisekangiki ku paluxiwa eka thekinoloji yo pfuneta eka swihlamusela-marito hinkwaswo (ngopfu-ngopfu, Chrome eka desktop na movha).

Ndlela leyi swi tirhaka ha yona

Hi leyi ndlela leyi ku tiyisisiwa ka fomo ku tirhaka ha yona hi Bootstrap:

Ku tiyisisiwa ka fomo ya HTML ku tirhisiwa hi ku tirhisa titlilasi timbirhi ta vuxisi ta CSS, :invalidna :valid. Yi tirha eka <input>, <select>, na <textarea>swiaki.
Bootstrap yi hlanganisa switayele swa :invalidna :valideka tlilasi ya mutswari .was-validated, hi ntolovelo swi tirhisiwa eka <form>. Handle ka sweswo, nsimu yihi na yihi leyi lavekaka leyi nga riki na ntikelo yi kombisa tanihi leyi nga tirhiki eka ku layicha pheji. Hi ndlela leyi, u nga ha hlawula leswaku u ta ti tirhisa rini (hi ntolovelo endzhaku ka loko ku ringetiwile ku rhumela fomo).
Ku tlhela u veka xivumbeko xa fomo (xikombiso, eka xiyimo xa ku rhumeriwa ka fomo leyi cinca-cincaka hi ku tirhisa AJAX), susa .was-validatedtlilasi eka <form>nakambe endzhaku ko rhumela.
Tanihi fallback, .is-invalidnaswona .is-validtitlilasi ti nga tirhisiwa ematshan’wini ya titlilasi ta vuxisi ta ku tiyisisiwa ka tlhelo ra sevha . A va lavi .was-validatedtlilasi ya mutswari.
Hikwalaho ka swipimelo eka ndlela leyi CSS yi tirhaka ha yona, a hi nge (sweswi) tirhisa switayele eka a <label>leyi taka emahlweni ka vulawuri bya fomo eka DOM handle ko pfuniwa hi JavaScript ya ntolovelo.
Swihlamusela-marito hinkwaswo swa manguva lawa swi seketela API ya ku tiyisisa swipimelo , nxaxamelo wa tindlela ta JavaScript to tiyisisa vulawuri bya fomo.
Mahungu ya vuyelo ma nga ha tirhisa swilo leswi nga riki swa xiviri swa xihlamusela-marito (leswi hambaneke eka xihlamusela-marito xin’wana ni xin’wana, naswona swi nga cinciwi hi ku tirhisa CSS) kumbe switayele swa hina swa vuyelo lebyi endleriweke hi ku tirhisa HTML ni CSS leyi engetelekeke.
U nga ha nyika marungula ya ntiyiso ya ntolovelo na setCustomValidityeka JavaScript.

Hi ku tsundzuka sweswo, anakanya hi tidemo leti landzelaka ta switayele swa hina swa ku tiyisisa fomo ya ntolovelo, titlilasi ta le tlhelo ra sevha leti nga hlawuriwa, ni swilo leswi nga riki swa xiviri swa xihlamusela-marito.

Switayili swa ntolovelo

Eka marungula ya ku tiyisisa fomo ya Bootstrap ya ntolovelo, u ta lava ku engetela novalidatexihlawulekisi xa boolean eka <form>. Leswi swi tshikisa switsundzuxo swa vuyelo bya xiviri bya xihlamusela-marito, kambe swa ha nyika mfikelelo eka ti-API ta ku tiyisisa fomo eka JavaScript. Ringeta ku rhumela fomo leyi nga laha hansi; JavaScript ya hina yi ta kavanyeta buti yo rhumela ivi yi ku hundzisela vuxokoxoko.

Loko u ringeta ku rhumela, u ta vona :invalidna :validswitayele swi tirhisiwa eka vulawuri bya wena bya fomo.

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

Swivumbeko swa xihlamusela-marito

A wu tsakeli marungula ya vuyelo bya ku tiyisisiwa ka ntolovelo kumbe ku tsala JavaScript ku cinca mahanyelo ya fomo? Hinkwaswo swi kahle, u nga tirhisa ti-default ta browser. Ringeta ku rhumela fomo leyi nga laha hansi. Ku ya hi browser ya wena na OS, u ta vona xitayili lexi hambaneke nyana xa vuxokoxoko.

Loko switayele leswi swa mbuyelo swi nga ta ka swi nga endliwi xitayili hi CSS, wa ha kota ku lulamisa tsalwa ra mbuyelo hi ku tirhisa 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>

Xiphemu xa sevha

Hi ringanyeta ku tirhisa ku tiyisisiwa ka tlhelo ra xilayenti, kambe loko ko tshuka ku ri leswaku u lava tlhelo ra sevha, u nga kombisa tinsimu ta fomo leti nga tirhiki ni leti tirhaka hi .is-invalidna .is-valid. Xiya leswaku .invalid-feedbackna swona swi seketeriwa hi titlilasi leti.

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

Swiaki leswi seketeriwaka

Tifomo ta hina ta xikombiso ti kombisa matsalwa ya ntumbuluko <input>s laha henhla, kambe switayele swa ku tiyisisa fomo swa kumeka eka vulawuri bya hina bya tifomo ta ntolovelo, na swona.

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

Switsundzuxo swa Switirhisiwa

Loko xivumbeko xa wena xa fomo xi swi pfumelela, u nga cincana .{valid|invalid}-feedbacktitlilasi hi .{valid|invalid}-tooltiptitlilasi ku kombisa mbuyelo wa ku tiyisisa eka xitsundzuxo xa xitirhisiwa lexi nga na xitayili. Tiyisisa leswaku u na mutswari loyi a nga na position: relativeyena eka tooltip positioning. Eka xikombiso lexi nga laha hansi, titlilasi ta hina ta tikholomu se ti na leswi, kambe phurojeke ya wena yi nga ha lava ku lulamisiwa kun’wana.

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

Tifomo ta ntolovelo

Ku kuma ku cinca loku engetelekeke swinene ni ku ringanana ka xihlamusela-marito xo tsemakanya, tirhisa swiaki swa hina swa fomo leswi endleriweke hi ku helela ku siva swilo leswi nga riki swa xiviri swa xihlamusela-marito. Ti akiwile ehenhla ka ximaki xa semantiki na lexi fikelelaka, kutani i ku cinca loku tiyeke eka vulawuri byihi na byihi bya xivumbeko xa ntolovelo.

Mabokisi yo kambela ni swiya-ni-moya

Bokisi rin’wana na rin’wana ro kambela na xiya-ni-moya swi phutseriwe hi a <div>na makwavo <span>ku endla vulawuri bya hina bya ntolovelo na a <label>ya tsalwa leri fambisanaka na rona. Hi xivumbeko, leyi i ndlela leyi fanaka ni ya hina ya xiviri .form-check.

Hi tirhisa xihlawulekisi xa vamakwerhu ( ~) eka <input>swifundzha swa hina hinkwaswo—ku fana na :checked—ku xitayili kahle xikombiso xa hina xa xivumbeko xa ntolovelo. Loko hi hlanganisiwa na .custom-control-labeltlilasi, hi nga tlhela hi xitayili tsalwa ra nchumu wun’wana na wun’wana hi ku ya hi xiyimo xa <input>'s.

Hi fihla xihlawulekisi <input>hi opacityna ku tirhisa .custom-control-labelku aka xikombiso lexintshwa xa xivumbeko xa ntolovelo ematshan'wini ya xona hi ::beforena ::after. Khombo ra kona a hi nge swi koti ku aka custom one from just the <input>hikuva CSS's contenta yi tirhi eka element yoleyo.

Eka swiyimo leswi kamberiweke, hi tirhisa swifaniso swa SVG leswi nghenisiweke swa base64 ku suka eka Open Iconic . Leswi swi hi nyika vulawuri lebyinene bya ku endla switayele na ku veka swiyimo eka swihlamusela-marito na switirhisiwa.

Mabokisi yo kambela

Cheka bokisi leri ro kambela ra ntolovelo

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

Mabokisi yo kambela ya ntolovelo ya nga tlhela ya tirhisa :indeterminatetlilasi ya vuxisi loko yi vekiwile hi voko hi ku tirhisa JavaScript (a ku na xihlawulekisi xa HTML lexi kumekaka xo xi boxa).

Cheka bokisi leri ro kambela ra ntolovelo

Loko u tirhisa jQuery, nchumu wo fana na lowu wu fanele wu enela:

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

Swiya-ni-moya

Cinca-cinca xiya-ni-moya lexi xa ntolovelo

Kumbe u cinca-cinca xiya-ni-moya lexi xin’wana xa ntolovelo

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

Inline

Cinca-cinca xiya-ni-moya lexi xa ntolovelo

Kumbe u cinca-cinca xiya-ni-moya lexi xin’wana xa ntolovelo

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

Lamarile

Mabokisi yo kambela ya ntolovelo ni swiya-ni-moya na swona swi nga ha pfariwa. Engetela disabledxihlawulekisi xa boolean eka <input>na xikombiso xa ntolovelo na nhlamuselo ya lebula swi ta endliwa hi ku tisungulela.

Cheka bokisi leri ro kambela ra ntolovelo

Cinca-cinca xiya-ni-moya lexi xa ntolovelo

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

Timenyu ta ntolovelo <select>ti lava ntsena tlilasi ya ntolovelo, .custom-selectku hlohlotela switayele swa ntolovelo. Switayili swa ntolovelo swi pimiwile eka <select>xivumbeko xo sungula xa 's naswona a swi nge swi koti ku cinca <option>s hikwalaho ka swipimelo swa xihlamusela-marito.

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

U nga ha tlhela u hlawula eka swihlawulekisi leswitsongo ni leswikulu swa ntolovelo leswaku swi fambisana ni swingheniso swa hina swa matsalwa leswi nga ni mpimo lowu fanaka.

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

Xihlawulekisi multiplelexi xi tlhela xi seketeriwa:

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

Tanihi leswi sizexihlawulekisi xi nga xiswona:

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

Mpimo

Endla <input type="range">vulawuri bya ntolovelo hi .custom-range. Track (ndhavuko) na thumb (nhlayo) havumbirhi bya swona swi endliwe hi xitayili leswaku swi vonaka swi fana eka swihlamusela-marito hinkwaswo. Tanihi leswi ntsena IE na Firefox va seketelaka ku “tata” track ya vona ku suka eximatsini kumbe exineneni xa xikunwana tanihi ndlela yo kombisa hi mahlo nhluvuko, sweswi a hi yi seketeli.

Xikombiso xa rhengu

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

Switirhisiwa swa range swi na mimpimo leyi nga kongomangiki ya minna max— 0na 100, hi ku landzelelana. U nga ha boxa mimpimo leyintshwa ya lava tirhisaka swihlawulekisi swa minna .max

Xikombiso xa rhengu

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

Hi ku tiyimisela, swingheniso swa rhengu swi “snap” eka mimpimo ya nhlayo leyi heleleke. Ku cinca leswi, u nga boxa stepntikelo. Eka xikombiso lexi nga laha hansi, hi andzisa magoza kambirhi hi ku tirhisa step="0.5".

Xikombiso xa rhengu

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

Xihlamusela-marito xa fayili

Ku nghenisa fayili i gnarly swinene eka ntlhambi naswona ku lava JavaScript yo engetela loko u lava ku va khoma hi ntirho Hlawula fayili... na tsalwa ra vito ra fayili leri hlawuriweke.

Hlawula fayili

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

Hi tumbeta fayili ya ntolovelo <input>hi ku tirhisa opacitynaswona ematshan’weni ya sweswo hi xitayili xa <label>. Batani yi endliwa no vekiwa hi ::after. Xo hetelela, hi tivisa a widthna heighteka the <input>for proper spacing for surrounding content.

Ku hundzuluxela kumbe ku endla leswaku tintambhu ti va leti u ti lavaka

Tlilasi :lang()ya vuxisi yi tirhisiwa ku pfumelela ku hundzuluxeriwa ka tsalwa ra “Browse” hi tindzimi tin’wana. Tlula kumbe ku engetela swilo leswi nghenisiweke eka $custom-file-textxihlawulekisi xa Sass hi thegi ya ririmi leyi faneleke na tintambhu ta laha kaya. Tintambhu ta Xinghezi ti nga endliwa hi ndlela leyi fanaka. Hi xikombiso, hi leyi ndlela leyi munhu a nga engetelaka vuhundzuluxeri bya Xipaniya ha yona (khodi ya ririmi ra Xipaniya i es):

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

Hi leswi swi lang(es)tirhaka eka ku nghenisa ka fayili ya ntolovelo ya vuhundzuluxeri bya Xipaniya:

Xihlawulekisi xa Archivo

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

U ta fanela ku veka ririmi ra tsalwa ra wena (kumbe murhi lowutsongo wa rona) hi ndlela leyinene leswaku tsalwa lerinene ri ta kombisiwa. Leswi swi nga endliwa hi ku tirhisa xihlawulekisi langeka elemente <html>kumbe nhloko ya Content-LanguageHTTP , exikarhi ka tindlela tin’wana.

Swivumbeko

Nkatsakanyo

Vulawuri bya xivumbeko

Ku pima mpimo

Ku hlaya ntsena

Ku hlaya ntsena tsalwa ro olova

Switirhisiwa swa Range

Mabokisi yo kambela ni swiya-ni-moya

Xihlawulekisi (xi hlengeletiwile) .

Inline

Handle ka malebvu

Vuandlalo

Vumba mintlawa

Fomo ya gridi

Fomo ya layini

Xivumbeko xa horizontal

Ku ringanisiwa ka lebula ya xivumbeko xa horizontal

Ku pima mpimo wa tikholomu

Ku cinca-cinca ka swilo hi ku tisungulela

Tifomo ta le ndzeni ka layini

Swilo swin’wana leswi nga tirhisiwaka eka malebvu lama fihliweke

Tsalwa ra mpfuneto

Ku hlanganisa tsalwa ra mpfuneto na vulawuri bya fomo

Tifomo ta vulema

Xitsundzuxo lexi nga ni tinsoma

Ku fambisana ka cross-browser

Ku tiyisisiwa ka swilo

Ndlela leyi swi tirhaka ha yona

Switayili swa ntolovelo

Swivumbeko swa xihlamusela-marito

Xiphemu xa sevha

Swiaki leswi seketeriwaka

Switsundzuxo swa Switirhisiwa

Tifomo ta ntolovelo

Mabokisi yo kambela ni swiya-ni-moya

Mabokisi yo kambela

Swiya-ni-moya

Inline

Lamarile

Hlawula menu

Mpimo

Xihlamusela-marito xa fayili

Ku hundzuluxela kumbe ku endla leswaku tintambhu ti va leti u ti lavaka