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

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">
    </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 ni swiya-ni-moya swa seketeriwa. Xihlawulekisi disabledxi ta tirhisa muvala wo vonikela ku pfuneta ku kombisa xiyimo xa ngheniso.

Mabokisi yo kambela na swikomba-nkarhi swa xiya-ni-moya swi seketela ku tiyisisiwa ka fomo leyi simekiweke eka HTML naswona swi 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 vito leri fikelelaka ra 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 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>

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

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">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

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 endla vukulu 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, vulawuri bya fomo, na 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 bya fomo yin’wana na yin’wana, hambiloko u lava ku yi 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 fomo 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 ku lehe swihlawulekisi swa 8-20, 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>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Xitsundzuxo lexi nga ni tinsoma

Swihlamusela-marito swi 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 swiaki leswi fanaka ni buti ya ntolovelo swo tanihi <a ... class="btn btn-*">, 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. Vulawuri lebyi sekeriweke eka anchor na byona byi ta va bya ha ri tano yi kota ku kongomisa naswona yi tirha hi ku tirhisa khibhodi. U fanele ku cinca hi voko vulawuri lebyi hi ku engetela tabindex="-1"ku byi sivela ku amukela ku kongomisa na aria-disabled="disabled"ku kombisa xiyimo xa byona eka thekinoloji yo pfuneta.

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.

Ha swi tiva leswaku sweswi switayele swa ku tiyisisiwa ka ntolovelo swa tlhelo ra xilayenti na switsundzuxo swa switirhisiwa a swi fikeleleki, tanihileswi swi nga hlanganangiki na thekinoloji yo pfuneta. Loko hi ri karhi hi tirha eka ntlhantlho, hi nga ringanyeta ku tirhisa nhlawulo wa le tlhelo ra sevha kumbe ndlela ya ku tiyisisa xihlamusela-marito xa ntolovelo.

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, xiya ti-demo leti landzelaka ta switayele swa hina swa ku tiyisisiwa ka 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.

Switayili swa mbuyelo wa ntolovelo swi tirhisa mihlovo ya ntolovelo, mindzilakano, switayele swa ku kongomisa, na swifaniso swa le ndzhaku ku hlanganisa mbuyelo ku antswa. Swifaniso swa le ndzhaku swa <select>s swi kumeka ntsena hi .custom-select, naswona a hi .form-control.

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

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

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

Xiphemu xa sevha

Hi ringanyeta ku tirhisa ku tiyisisiwa ka tlhelo ra xilayenti, kambe loko ko tshuka ku ri leswaku u lava ku tiyisisiwa ka 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.

Eka tinsimu leti nga tirhiki, tiyisisa leswaku rungula ra mbuyelo/xihoxo leri nga tirhiki ri fambelanisiwa na nsimu ya fomo leyi faneleke hi ku tirhisa aria-describedby. Xihlawulekisi lexi xi pfumelela ku tlula xin’we idku kongomisiwa, loko ku ri leswaku nsimu se yi kombetela eka tsalwa ra fomo yo engetela.

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

Swiaki leswi seketeriwaka

Switayili swa ku tiyisisa swa kumeka eka vulawuri bya fomo na swiphemu leswi landzelaka:

<input>s na <textarea>s na.form-control
<select>s na .form-controlkumbe.custom-select
.form-checks
.custom-checkboxs na .custom-radios
.custom-file

Ndhawu ya matsalwa

Hi kombela u nghenisa rungula eka ndhawu ya matsalwa.

Cheka bokisi leri ro kambela ra ntolovelo

Xikombiso xa tsalwa ra mbuyelo leri nga tirhiki

Cinca-cinca xiya-ni-moya lexi xa ntolovelo

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

Xikombiso xo tala tsalwa ra mbuyelo leri nga tirhiki

Xikombiso lexi nga tirhiki xa custom select feedback

Hlawula fayili...

Xikombiso xa mbuyelo wa fayili ya ntolovelo lowu nga tirhiki

Xikombiso xa mbuyelo wa ntlawa wa swingheniso lowu nga tirhiki

Swihlawulekisi

Xikombiso xa mbuyelo wa ntlawa wa swingheniso lowu nga tirhiki

Hlawula fayili...

Xikombiso xa mbuyelo wa ntlawa wa swingheniso lowu nga tirhiki

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

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

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

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

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

Ku endla swilo hi ku landza swilaveko swa wena

Swiyimo swa ku tiyisisa swi nga endliwa hi ku tirhisa Sass hi $form-validation-statesmepe. Yi kumeka eka fayili ya hina _variables.scss, mepe lowu wa Sass wu looped over ku tumbuluxa swiyimo swa default valid/ invalidvalidation. Ku katsiwile mepe lowu pfanganisiweke wa ku cinca muvala ni xifaniso xa tiko rin’wana ni rin’wana. Hambileswi ku nga riki na swifundzha swin’wana leswi seketeriwaka hi swihlamusela-marito, lava tirhisaka switayele swa ntolovelo va nga engetela hi ku olova vuyelo bya fomo lebyi rharhanganeke swinene.

Hi kombela u xiya leswaku a hi bumabumeli ku cinca mimpimo leyi handle ko tlhela u cinca 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));
}

Ku tiyisisiwa ka ntlawa wa swingheniso

Ku kuma leswaku hi swihi swiaki leswi lavaka tikhoneni leti rhendzelekaka endzeni ka ntlawa wa swingheniso leswi nga na ku tiyisisiwa, ntlawa wa swingheniso wu lava .has-validationtlilasi yo engetela.

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

Hi kombela u hlawula vito ra mutirhisi.

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 radio <input>na ku <label>hlanganisiwa swi phutseriwe hi a <div>ku endla vulawuri bya hina bya ntolovelo. 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 endla xitayili xa 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="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

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

Swiwitsi

Swiwitsi swi na mfungho wa bokisi ro kambela ra ntolovelo kambe swi tirhisa .custom-switchtlilasi ku humesa swiwitsi swo cinca-cinca. Swiwitsi na swona swi seketela disabledxihlawulekisi.

Toggle element leyi ya swiwitsi

Xiaki xa swiwitsi lexi nga tirhiki

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

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

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

Example range

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

File browser

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file

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

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Translating or customizing the strings with SCSS

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):

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

Here’s lang(es) in action on the custom file input for a Spanish translation:

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

Ku hundzuluxela kumbe ku lulamisa tintambhu hi HTML

Bootstrap yi tlhela yi nyika ndlela yo hundzuluxela tsalwa ra “Browse” eka HTML hi data-browsexihlawulekisi lexi nga engeteriwa eka lebula ya ku nghenisa ya ntolovelo (xikombiso hi Xidachi):

Voeg je tsalwa ra xikunwana

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

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

Ku endla swilo hi ku landza swilaveko swa wena

Ku tiyisisiwa ka ntlawa wa swingheniso

Tifomo ta ntolovelo

Mabokisi yo kambela ni swiya-ni-moya

Mabokisi yo kambela

Swiya-ni-moya

Inline

Lamarile

Swiwitsi

Hlawula menu

Mpimo

File browser

Translating or customizing the strings with SCSS

Ku hundzuluxela kumbe ku lulamisa tintambhu hi HTML