Source

Foomamka

Tusaalooyinka iyo tilmaamaha isticmaalka ee qaababka xakamaynta foomka, ikhtiyaarada qaabaynta, iyo qaybaha gaarka ah ee abuuritaanka foomamka kala duwan ee ballaaran.

Dulmar

Koontaroolada foomamka Bootstrap waxay ku fidiyaan qaababkayada qaabka dib loo furay oo leh fasalo. Isticmaal fasalladan si aad u dooratid bandhigyadooda loo habeeyey si ay si joogto ah uga dhex muuqdaan daalacashada iyo qalabka.

Hubi inaad isticmaasho typesifo ku habboon dhammaan agabyada (tusaale, emailciwaanka iimaylka ama numbermacluumaadka nambarada) si aad uga faa'iidaysato kontaroolada cusub ee gelinta sida xaqiijinta iimaylka, xulashada lambarka, iyo in ka badan.

Waa kuwan tusaale degdeg ah oo lagu muujinayo qaababka foomka Bootstrap. Sii wad inaad akhrido dukumentiyada fasallada loo baahan yahay, qaabaynta foomka, iyo in ka badan.

Marna lama wadaagno iimaylkaaga qof kale. 
<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>

Koontaroolada foomka

Koontaroolada qaabka qoraalka -sida <input>s, <select>s, iyo <textarea>s - ayaa lagu qaabeeyey .form-controlfasalka. Waxaa ku jira qaababka muuqaalka guud, xaaladda diiradda, cabbirka, iyo in ka badan.

U hubso inaad sahamiso foomamkayaga gaarka ah si aad u sii waddo <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>

Galitaanka faylka, ku .form-controlbeddel .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>

Cabbirka

Deji dhererka adoo isticmaalaya fasalada sida .form-control-lgiyo .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>

Kaliya akhri

Ku dar readonlysifada booleenka wax gelinta si aad uga hortagto wax ka beddelka qiimaha gelinta. Wax galinta akhri-kaliya waxay u muuqdaan kuwo fudud (sida kuwa naafada ah), laakiin waxay hayaan cursorka caadiga ah.

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

Qoraal cad oo akhri kaliya

Haddii aad rabto in <input readonly>canaasirta qaabkaaga ah loo qaabeeyey sida qoraal cad, isticmaal .form-control-plaintextfasalka si aad meesha uga saarto habaynta qaabka caadiga ah oo aad u ilaaliso xadka saxda ah iyo suufka.

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

Qaybaha kala duwan

Deji soo gelisyada kala duwan ee si toosan loo rogi karo adoo isticmaalaya .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>

Sanduuqyada hubinta iyo raadiyaha

Sanduuqyada hubinta ee asalka ah iyo raadiyaha ayaa lagu wanaajiyey iyadoo la kaashanayo .form-check, hal fasal oo ah labada nooc ee wax gelinta taas oo wanaajisa qaabka iyo habdhaqanka curiyayaasha HTML . Sanduuqyada hubinta waxaa loogu talagalay in lagu xusho hal ama dhowr ikhtiyaar oo liiska ku jira, halka raadiyayaashu ay yihiin kuwa badan oo laga dooranayo hal doorasho.

Sanduuqyada hubinta ee naafada ah iyo raadiyaha waa la taageerayaa. Sifadu disabledwaxay adeegsan doontaa midab khafiif ah si ay u caawiso muujinta xaaladda gelinta.

Sanduuqyada hubinta iyo badhamada raadiyaha waxay taageeraan ansaxinta foomka HTML-ku-salaysan waxayna bixiyaan calaamado kooban oo la heli karo. Sidan oo kale, innaga <input>iyo <label>syadu waa xubno walaalo ah oo ka soo horjeeda <input>gudaha a <label>. Kani waa ka hadal badan yahay maadaama ay tahay inaad qeexdo idiyo forsifooyinka aad la xidhiidho <input>iyo <label>.

Default (la dulsaaray)

Sida caadiga ah, tiro kasta oo sanduuqyada hubinta ah iyo raadiyaha ee walaalaha ah ayaa si toosan loo dhejin doonaa oo si habboon loo kala fogayn doonaa .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline

Koox sanduuqyada hubinta ama raadiyaha ku yaal saf toosan adoo ku daraya .form-check-inlinemid kasta .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Aan lahayn calaamado

Ku dar .position-staticagabka gudaha .form-checkee aan lahayn wax qoraal ah oo sumadeedka Xusuusnow inaad weli bixiso nooc ka mid ah calaamadaynta tignoolajiyada caawinta (tusaale ahaan, adigoo isticmaalaya 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>

Qaabka

Maadaama Bootstrap uu khuseeyo display: blockiyo width: 100%ku dhawaad ​​dhammaan kontaroolada foomkayaga, foomamku waxay si toos ah u xidhmi doonaan si toos ah. Fasalo dheeraad ah ayaa loo isticmaali karaa in lagu beddelo qaabkan qaab qaabaysan.

Samee kooxo

Fasalka .form-groupayaa ah habka ugu fudud ee lagu daro qaab dhismeed foomamka. Waxay bixisaa fasal dabacsan oo dhiirigeliya kooxaynta saxda ah ee sumadaha, kontaroolada, qoraalka caawimada ikhtiyaariga ah, iyo foomka fariimaha ansaxinta. Sida caadiga ah waxay khusaysaa oo keliya margin-bottom, laakiin waxay soo qaadanaysaa qaabab dheeraad ah .form-inlinehaddii loo baahdo. U isticmaal <fieldset>s, <div>s, ama ku dhawaad ​​shay kasta oo kale.

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

Shabakadda foomka

Foomamka kakan ayaa la dhisi karaa iyadoo la isticmaalayo fasaladayada xajmiyeedka. U isticmaal kuwan qaab-qaabaynta oo u baahan tiirar badan, ballacyo kala duwan, iyo ikhtiyaaro toosin dheeraad ah.

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

Foom safka

Waxa kale oo aad u beddeli .rowkartaa .form-row, kala duwanaanshiyaha safka jaranjarada caadiga ah kaas oo meesha ka saaraya majaraha tiirarka caadiga ah si aad u adkeyso oo aad u qaabeyso.

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

Nidaamyo kakan oo aad u adag ayaa sidoo kale lagu abuuri karaa nidaamka 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>

Qaab toosan

Ku samee foomamka jiifka ah ee shabagga ah adiga oo ku daraya .rowfasalka si aad u samaysatid kooxo una isticmaal .col-*-*fasalada si aad u qeexdo ballaca calaamadahaaga iyo kontarooladaada. U hubso inaad ku darto s- .col-form-labelgaaga <label>sidoo kale si ay si toos ah xuddun u noqdaan kontaroolada foomka la xidhiidha.

Mararka qaarkood, waxaa laga yaabaa inaad u baahato inaad isticmaasho margin ama yutiilitida suufka si aad u abuurto toosinta saxda ah ee aad u baahan tahay. Tusaale ahaan, waxaan ka saarnay padding-topsummada idaacadaha ee dul-saaran si aan u waafajino gundhigga qoraalka.

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

U hubso inaad isticmaasho .col-form-label-smama u isticmaasho s ama s .col-form-label-lg-gaaga si aad si sax ah u raacdo cabbirka iyo .<label><legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Cabbirka tiirka

Sida ku cad tusaalooyinkii hore, nidaamka xajmigu wuxuu kuu ogolaanayaa inaad dhigato tiro kasta oo .cols gudaha a .rowama .form-row. Waxay u kala qaybin doonaan ballaca la heli karo si siman dhexdooda. Waxa kale oo aad dooran kartaa qayb ka mid ah tiirarkaaga si aad u qaadato meel ka badan ama ka yar, halka inta soo hadhay .colay si siman u qaybsanayso inta soo hartay, oo leh fasallo tiirar gaar ah sida .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>

Si otomaatig ah u cabbirka

Tusaalaha hoose waxa uu isticmaalaa utility flexbox si uu toos ugu dhexeeyo waxa ku jira iyo isbeddelada .colsi .col-autoay tiirarkaagu u qaataan kaliya inta boos ee loo baahdo. Si kale u dhig, tiirka laftiisa ayaa cabbiraya iyadoo ku saleysan waxa ku jira.

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

Waxaad markaa dib ugu qasi kartaa taas mar labaad oo leh fasallo tiirar cabbir-gaar ah.

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

Iyo dabcan kontaroolada qaabka gaarka ah waa la taageeray.

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

Foomamka xariiqda

Isticmaal .form-inlinefasalka si aad u muujiso taxane ah calaamado, qaab kontaroolo, iyo badhamada safka toosan. Koontaroolada foomamka gudaha foomamka khadku wax yar way ka duwan yihiin goboladooda caadiga ah.

  • Xakamaynta ayaa ah display: flex, burburinaysa meel kasta oo cad oo HTML ah waxayna kuu oggolaanaysaa inaad bixiso kontoroolka toosinta ee kala dheeraynta iyo yutiilitirka flexbox .
  • Koontaroolada iyo kooxaha wax gelinta waxay helayaan width: autosi ay meesha uga saaraan Bootstrap-ka caadiga ah width: 100%.
  • Koontarooladu waxay ka muuqdaan khadka tooska ah ee goobaha daawashada kuwaas oo ah ugu yaraan 576px ballaaran si loogu xisaabtamo daawashada cidhiidhiga ah ee aaladaha mobilada.

Waxa laga yaabaa inaad u baahato inaad gacanta ku wax ka qabato ballaca iyo isku toosinta kontaroolada foomamka gaarka ah oo leh tas-hiilaadka kala dheeraynta (sida hoos ku cad). Ugu dambeyntii, hubi inaad had iyo jeer ku darto <label>foom kasta oo kontorool ah, xitaa haddii aad u baahan tahay inaad ka qariso kuwa aan akhristayaasha lahayn ee leh .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>

Koontaroolada qaabka gaarka ah iyo xulashada sidoo kale waa la taageerayaa.

<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>
Beddelka calaamadaha qarsoon

Tignoolajiyada caawinta sida akhristayaasha shaashadda ayaa dhib kala kulmi doona foomamkaaga haddii aadan ku darin calaamad wax kasta oo la geli karo. Foomamkaan khadka tooska ah, waxaad qarin kartaa summada adigoo isticmaalaya .sr-onlyfasalka. Waxaa jira habab kale oo kale oo lagu bixiyo summada tignoolajiyada caawinta, sida aria-label, aria-labelledbyama titlesifada. Haddii kuwan midkoodna aanu jirin, tignoolajiyada caawisa ayaa laga yaabaa inay adeegsadaan placeholdersifada, haddii ay jiraan, laakiin ogow isticmaalka placeholderbeddelka hababka calaamadaynta kale aan lagula talin.

Qoraalka caawinta

Qoraalka caawinta heerka xannibaadda ee foomamka waxaa lagu abuuri karaa iyadoo la isticmaalayo .form-text(horey loo yiqiin .help-blockv3). Qoraalka caawimada khadka dhexda ah waxaa loo hirgelin karaa dabacsanaan iyadoo la isticmaalayo HTML kasta oo khadka ah iyo fasalada utility sida .text-muted.

Ku xidhidhiyaha qoraalka caawimada kontaroolada foomka

Qoraalka caawimada waa in si cad loola xidhiidhiyaa xakamaynta foomka ee la xidhiidha isticmaalka aria-describedbysifada. Tani waxay hubin doontaa in tignoolajiyada caawinta-sida akhristayaasha shaashadda-ay ku dhawaaqi doonaan qoraalkan caawinta marka isticmaaluhu diiradda saaro ama galo kantaroolka.

Qoraalka caawinta ee hoose waxa lagu qaabayn karaa .form-text. Fasalkan waxaa ku jira display: blockoo ku daraa xoogaa sare oo xad dhaaf ah si ay u fududaato kala dheeraynta agabyada sare.

Furahaagu waa inuu ahaadaa 8-20 xaraf, ka kooban yahay xarfo iyo nambaro, waana inuusan ku jirin meelo bannaan, xarfo gaar ah, ama 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>

Qoraalka khadku wuxuu isticmaali karaa HTML kasta oo khad dhexdeed ah (ha ahaado a <small>, <span>, ama shay kale) iyada oo aan wax kale ka badan fasalka utility.

Waa in uu dhererkiisu yahay 8-20 xaraf. 
<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>

Foomamka naafada

Ku dar disabledsifada boolean gelinta si aad uga hortagto isdhexgalka isticmaalaha oo ay u muuqato mid fudud.

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

Ku dar disabledsifada a <fieldset>si aad u joojiso dhammaan kontaroolada ku jira.

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

Sida caadiga ah, daalacayaashu waxay ula dhaqmi doonaan dhammaan kontaroolada qaabka asalka ah ( <input>, <select>iyo <button>walxaha) gudaha <fieldset disabled>sida naafada, iyaga oo ka hortagaya isdhexgalka kiiboodhka iyo jiirka labadaba. Si kastaba ha ahaatee, haddii foomkaaga sidoo kale ay ku jiraan <a ... class="btn btn-*">xubno, kuwan waxaa la siin doonaa oo kaliya qaabka pointer-events: none. Sida lagu xusay qaybta ku saabsan gobolka naafada ah ee badhamada (iyo gaar ahaan qaybta-hoosaadka walxaha barroosinka), hantida CSS weli lama jaanqaadin oo si buuxda uma taageero Internet Explorer 10, kamana ilaalin doonto isticmaaleyaasha kiiboodhka inay noqdaan awood u leh in uu diirada saaro ama dhaqaajiyo xiriiriyeyaashan. Markaa si aad badbaado u hesho, isticmaal JavaScript-ka caadiga ah si aad u damiso xidhiidhyadaas.

Waafaqsanaanta browser-ka

Iyadoo Bootstrap ay ku dabaqi doonto qaababkan dhammaan daalacashada, Internet Explorer 11 iyo kuwa hoose si buuxda uma taageeraan disabledsifada <fieldset>. Adeegso JavaScript-ka caadiga ah si aad u damiso goobta daalacashadan.

Xaqiijinta

Sii jawaab celin qiimo leh, la shaqayn karo isticmaalayaashaada qaab HTML5 ah oo ansax ah – laga helayo daalacashadayada oo dhan . Ka dooro faallo celinta ansaxinta biraawsarka, ama ku dhaqan fariimaha gaarka ah ee fasaladayada lagu dhex dhisay iyo JavaScript-bilawga.

Waxaan hadda ku talinaynaa in la isticmaalo qaababka ansaxinta gaarka ah, maadaama fariimaha ansaxinta caadiga ah ee browserka aan si joogta ah loogu soo bandhigin tignoolajiyada caawimada ee daalacashada oo dhan (gaar ahaan Chrome-ka desktop-ka iyo moobaylka).

Sida ay u shaqeyso

Waa kan sida xaqiijinta foomku ula shaqeyso Bootstrap:

  • Xaqiijinta foomka HTML waxa lagu dabaqaa labada fasal ee been abuurka ah ee CSS, :invalidiyo :valid. Waxay qusaysaa <input>, <select>, iyo <textarea>curiyayaasha.
  • Bootstrap waxay u kala xadaynaysaa :invalidiyo :validqaababka .was-validatedfasalka waalidka, oo badanaa lagu dabaqo <form>. Haddii kale, goob kasta oo loo baahan yahay oo aan qiimo lahayn ayaa u muuqata mid aan sax ahayn oo ku jirta culayska bogga. Sidan, waxaad dooran kartaa goorta aad dhaqaajinayso (sida caadiga ah ka dib marka la isku dayo soo gudbinta foomka).
  • Si dib loogu habeeyo muuqaalka foomka (tusaale ahaan, xaalada soo gudbinta foom firfircoon oo la isticmaalayo AJAX), ka saar .was-validatedfasalka <form>mar labaad soo gudbinta ka dib.
  • Dib-u-dhac ahaan, .is-invalidiyo .is-validfasallada waxaa loo isticmaali karaa beddelka fasallada been-abuurka ah ee xaqiijinta dhinaca server-ka . Uma baahna .was-validatedfasalka waalidka.
  • Caqabadaha ku jira sida CSS u shaqeyso awgeed, ma awoodno (hadda) ku dabaqi karno qaababka <label>ka hor inta aan la xakameynin foomka DOM iyada oo aan la helin caawimaad JavaScript caadiga ah.
  • Dhammaan daalacashada casriga ah waxay taageeraan ansaxinta xannibaadda API , taxane ah hababka JavaScript ee lagu xaqiijinayo kontaroolada foomka.
  • Farimaha dib -u-celinta waxa laga yaabaa inay ka faa'iidaysato khaladka browserka (ka duwan biraawsar kasta, iyo mid aan habayn CSS) ama hababkayada jawaab celinta caadada oo leh HTML iyo CSS dheeraad ah.
  • Waxaad ku siin kartaa farriimaha ansaxnimada gaarka ah setCustomValidityee JavaScript.

Iyadoo taas maskaxda lagu hayo, ka fiirso demosyada soo socda ee qaababka ansixinta qaabka caadiga ah, fasalada dhinaca serverka ee ikhtiyaarka ah, iyo khaladaadka browserka.

Hababka gaarka ah

Farriimaha xaqiijinta foomka Bootstrap caadadii, waxaad u baahan doontaa inaad ku darto novalidatesifada booleankaaga <form>. Tani waxay curyaamisaa aaladaha jawaab celinta caadiga ah ee biraawsarka, laakiin wali waxay siisaa gelitaanka API-yada ansaxinta foomka JavaScript. Isku day inaad gudbiso foomka hoose; JavaScript-kayaga ayaa kaa joojin doona badhanka soo gudbinta oo ku soo gudbin doona jawaab celinta. Markaad isku daydo inaad soo gudbiso, waxaad arki doontaa :invalidiyo :validqaababka lagu dabaqay kontaroolada foomkaaga.

Hababka warcelinta gaarka ah waxay adeegsadaan midabada gaarka ah, xuduudaha, qaababka diirada, iyo astaanta asalka si ay si wanagsan ugu gudbiyaan jawaab celinta. Astaamaha asalka ah ee <select>s waxaa lagu heli karaa oo keliya .custom-select, ee lama heli karo .form-control.

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

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

Browser-ka khaladka ah

Ma xiisaynayso fariimaha jawaab celinta ansixinta caadada ah ama qorista JavaScript si aad u bedesho habdhaqanka foomka? Wax kasta oo wanaagsan, waxaad isticmaali kartaa browser-ka caadiga ah. Isku day inaad soo gudbiso foomka hoose. Iyada oo ku xidhan biraawsarkaaga iyo OS-kaaga, waxaad arki doontaa qaab jawaab celin ka duwan.

Iyadoo qaababkan jawaab celinta aan lagu qaabayn karin CSS, waxaad weli ku habeyn kartaa qoraalka jawaab celinta JavaScript.

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

Dhinaca server-ka

Waxaan kugula talineynaa isticmaalka ansaxinta dhinaca macmiilka, laakiin haddii ay dhacdo inaad u baahato ansaxinta dhinaca server-ka, waxaad muujin kartaa foom aan sax ahayn oo ansax ah oo leh .is-invalidiyo .is-valid. Ogow in .invalid-feedbacksidoo kale lagu taageeray fasaladan.

Waxay u egtahay mid wanaagsan!
Waxay u egtahay mid wanaagsan!
@
Fadlan door magac isticmaale
Fadlan keen magaalo sax ah.
Fadlan dooro gobol sax ah
Fadlan bixi sib sax ah
Waa inaad ogolaataa ka hor intaanad gudbin 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Curiyayaasha la taageeray

Qaababka xaqiijinta ayaa diyaar u ah kontaroolada iyo qaybaha soo socda:

  • <input>s iyo <textarea>s leh .form-control(ay ku jiraan ilaa mid ka mid .form-controlah kooxaha wax gelinta)
  • <select>s leh .form-controlama.custom-select
  • .form-checks
  • .custom-checkboxs iyo .custom-radios
  • .custom-file
Fadlan geli fariinta goobta qoraalka
Tusaale qoraal jawaab celin aan sax ahayn
Tusaale dheeraad ah qoraalka jawaab celinta aan sax ahayn
Tusaalaha doorashada jawaab celin aan sax ahayn
Tusaale jawaab celinta faylalka gaarka ah ee aan ansax ahayn 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

Tilmaamaha Qalabka

Haddii qaabka qaabkaagu kuu ogolaado, waxaad u bedeli kartaa .{valid|invalid}-feedbackfasalada .{valid|invalid}-tooltipfasalada si aad u muujiso jawaab celinta ansaxinta qalab habaysan. Hubi inaad haysato waalid position: relativeku yaal meelaynta qalabaynta. Tusaalaha hoose, fasaladayada tiirarka ayaa tan hore u lahaa, laakiin mashruucaagu waxa uu u baahan karaa hab kale.

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

Habaynta

Gobolada xaqiijinta waxa lagu habeyn karaa Sass oo leh $form-validation-stateskhariidad. Ku yaal _variables.scssfaylkayaga, khariidadan Sass waa la dafiray si loo soo saaro kuwa caadiga ah valid/ invalidqabalada ansaxinta. Waxaa ku jira khariidad buul leh oo loogu talagalay in lagu habeeyo midabka iyo astaanta gobol kasta. Iyadoo aanay jirin dawlado kale oo ay taageerayaan daalacashada, kuwa isticmaalaya qaababka caadiga ah waxay si fudud ugu dari karaan jawaab celin foom oo adag.

Fadlan ogow in aanan ku talinayn in la habeeyo qiyamkan iyada oo aan sidoo kale wax laga form-validation-statebeddelin isku darka.

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

Foomamka gaarka ah

Si aad u hesho habayn dheeraad ah iyo is-waafajinta browserka, isticmaal walxaha qaab-dhismeedkayaga oo dhammaystiran si aad u bedesho khaladaadka browserka. Waxay ka dul dhisan yihiin simantic-ga iyo calaamadaynta la heli karo, sidaa darteed waxay u yihiin beddelka adag ee qaab kasta oo la xakameeyo.

Sanduuqyada hubinta iyo raadiyaha

Sanduuqa hubinta iyo raadiyaha <input>iyo <label>lammaane kasta ayaa lagu duuduubay a <div>si loo abuuro kontoroolka gaarka ah. Qaab dhismeed ahaan, kani waa isla habkii nalooga baahnaa .form-check.

Waxaan u isticmaalnaa xulashada walaalaha ( ~) dhammaan <input>gobolladeenna-sida- :checkedsi aan si habboon u habaynno tusaha foomka caadada u ah. Marka lagu daro .custom-control-labelfasalka, waxaan sidoo kale qaabeyn karnaa qoraalka shay kasta iyadoo lagu saleynayo <input>gobolka.

Waanu ku qarinayna khaladka aan caadiga ahayn <input>oo aan opacityisticmaalno .custom-control-labelsi aan u dhisno tilmaame cusub oo habaysan oo ku jira booskiisa ::beforeiyo ::after. Nasiib darro ma dhisi karno mid caado ah oo kaliya <input>sababtoo ah CSS's contentkuma shaqeeyo cunsurkaas.

Gobolada la hubiyay, waxaanu isticmaalnaa base64 summada SVG ee guntan ka ah Iconic Furan . Tani waxay ina siinaysaa xakamaynta ugu fiican ee habaynta iyo meelaynta daalacashada iyo qalabka.

Sanduuqyada hubinta

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

Sanduuqyada hubinta gaarka ah waxay sidoo kale isticmaali karaan :indeterminatefasalka been abuurka marka gacanta lagu dhejiyo JavaScript (ma jirto sifo HTML ah oo la heli karo oo lagu qeexayo).

Haddii aad isticmaalayso jQuery, wax sidan oo kale ah ayaa kugu filan:

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

Idaacadaha

<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

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

Naafada

Sanduuqyada hubinta gaarka ah iyo raadiyaha sidoo kale waa la joojin karaa. Ku dar disabledsifo boolean ah <input>oo tilmaame caadadii ah iyo sharraxaadda summada si toos ah ayaa loo qaabayn doonaa.

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

Gawaarida

Beddelku waxa uu leeyahay calaamadaynta sanduuqa hubinta ee caadiga ah laakiin waxa uu isticmaalaa .custom-switchfasalka si uu u sameeyo beddelka beddelka. Gawaarida sidoo kale waxay taageeraan disabledsifada.

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

Dooro liiska

Menu-yada gaarka <select>ah waxay u baahan yihiin kaliya fasal gaar ah, .custom-selectsi loo kiciyo qaababka gaarka ah. Hababka gaarka ahi waxay ku xaddidan yihiin <select>muuqaalka hore mana beddeli karaan <option>s sababtoo ah xaddidaadyada browserka.

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

Waxa kale oo aad ka dooran kartaa xulo yar iyo weyn oo caado ah si aad u waafajiso qoraaladayada isku midka ah.

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

Sifada multiplesidoo kale waa la taageeray:

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

Sida sizesifadu tahay:

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

Range

Ku samee <input type="range">kontaroolada gaarka ah .custom-range. Jidka (dharka dambe) iyo suulka (qiimaha) labaduba waxay u qaabaysan yihiin inay isku mid ugu muuqdaan daalacashada. Sida kaliya ee IE iyo Firefox ay u taageeraan "buuxinta" raadkooda bidix ama midig ee suulka si ay muuqaal ahaan u muujiyaan horumarka, hadda ma taageerno.

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

Qaybaha kala duwani waxay leeyihiin qiimayaal aan toos ahayn miniyo max- 0iyo 100, siday u kala horreeyaan. Waxaad u cayimi kartaa qiimayaal cusub kuwa isticmaalaya sifooyinka miniyo maxsifooyinka.

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

Sida caadiga ah, kala duwanaanshiyaha wax-soo-gelinta "snap" ilaa qiimaha isugeynta. Si tan loo beddelo, waxaad cayimi kartaa stepqiime Tusaalaha hoose, waxaanu labanlaabaynaa tirada tillaabooyinka anagoo adeegsanayna step="0.5".

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

Faylka browserka

Plugin-ka lagu taliyay in lagu dhaqo gelinta faylka gaarka ah: bs-custom-file-input , taasi waa waxa aan hadda ku isticmaaleyno halkan dukumeentiyadayada.

Gelitaanka faylka ayaa ah midka ugu jilicsan ee farabadan wuxuuna u baahan yahay JavaScript dheeri ah haddii aad jeclaan lahayd inaad ku xidho iyaga oo leh Dooro faylka shaqeynaya… iyo magaca faylka la doortay.

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

Waxaanu ku qarinaa faylka caadiga ah anagoo <input>adeegsanayna opacitytaa beddelkeedana qaabaynaynaa <label>. Badhanka ayaa la sameeyay oo la dhigay ::after. Ugu dambayntii, waxaanu ku dhawaaqnay a widthiyo heightku saabsan <input>kala dheeraynta habboon ee nuxurka ku xeeran.

Ku turjumida ama habaynta xargaha SCSS

Fasalka :lang()been abuurka ah waxaa loo isticmaalaa in lagu oggolaado tarjumaada qoraalka "Browse" ee luqadaha kale. Burburi ama ku dar $custom-file-textgelida doorsoomiyaha Sass ee leh summada luqadda ee habboon iyo xargaha gudaha. Xadhkaha Ingiriisiga waxaa loo habeyn karaa si la mid ah. Tusaale ahaan, waa kan sida qofku ugu dari karo turjumaadda Isbaanishka ( Koodhka luqadda Isbaanishka waa es):

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

Waa kuwan lang(es)ficilka galitaanka faylka gaarka ah ee tarjumaada Isbaanishka:

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

Waxaad u baahan doontaa inaad si sax ah u dejiso luqadda dukumeentigaaga (ama qaybtiisa hoose) si qoraalka saxda ah loo muujiyo. Tan waxaa lagu samayn karaa iyadoo la adeegsanayo sifada langku taal <html>curiyaha ama Content-Languagemadaxa HTTP , iyo habab kale.

Ku turjumida ama habaynta xargaha HTML

Bootstrap waxa kale oo ay bixisaa hab lagu tarjumo qoraalka "Browse" ee HTML oo wata data-browsesifada lagu dari karo calaamadda gelinta caadada ah (tusaale Dutch):

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