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.

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

Galinta faylka, ku .form-controlbeddelo .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>canaasiirta 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 oo 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 iyo raadiyaha caadiga ah ayaa lagu wanaajiyaa 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.

Sanduuqa hubinta ee caadiga ah

Sanduuqa hubinta ee naafada

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

Raadiyaha caadiga ah

Raadiyaha caadiga ah ee labaad

Raadiyaha naafada ah

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

3 (naafo)

<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 (naafo)

<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 wali bixiso nooc ka mid ah magaca la heli karo ee 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 habboon ee sumadaha, kontaroolada, qoraalka caawimada ikhtiyaarka 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 fasalladayada 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 qulqulka.

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

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

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 calaamado ah, kontaroolada foomka, 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 ogolaanaysaa inaad bixiso kontoroolka isku xidhka 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 daraya xoogaa sare oo xad dhaaf ah si ay u fududaato kala dheeraynta agabyada sare.

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

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

Digniin leh barroosinno

Browser-yadu waxay ula dhaqmaan dhammaan kontaroolada qaabka asalka ah ( <input>, <select>, iyo <button>walxaha) gudaha <fieldset disabled>sida naafo, iyaga oo ka hortagaya isdhexgalka kiiboodhka iyo jiirka labadaba.

Si kastaba ha ahaatee, haddii foomkaaga uu sidoo kale ku jiro walxo u eg badhanka sida <a ... class="btn btn-*">, 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 hoose ee walxaha barroosinka ah), hantida CSS weli lama jaanqaadin oo si buuxda looguma taageero Internet Explorer 10. Koontaroolada ku salaysan barroosinka ayaa sidoo kale wali ahaan doona. diirada saari kara oo shaqayn kara iyadoo la isticmaalayo kiiboodhka. Waa inaad gacanta ku beddeshaa kontarooladan adigoo ku daraya tabindex="-1"si aad uga hortagto inay helaan diiradda iyo aria-disabled="disabled"inaad u muujiso gobolkooda tignoolajiyada caawinta.

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 daalacashada ku jirta.

Xaqiijinta

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

Waxaan la soconaa in aan hadda la heli karin qaababka ansaxinta caadadii ee dhinaca macmiilka iyo qalabyada, maadaama aysan la kulmin tignoolajiyada caawinta. Inta aan xalka ka shaqeyneyno, waxaan ku talineynaa in la isticmaalo xulashada dhinaca server-ka ama habka ansaxinta browserka caadiga ah.

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 waxay u muuqataa mid aan sax ahayn oo ku jirta culayska bogga. Sidan, waxaad dooran kartaa goorta aad dhaqaajinayso (sida caadiga ah ka dib marka foomka la isku dayo).
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 cilladaha 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.

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

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

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.

Goobaha aan ansax ahayn, hubi in jawaab-celinta/fariinta khaladka ah ee aan sax ahayn ay la xiriirto goobta foomamka ku habboon iyadoo la adeegsanayo aria-describedby. Sifadani waxay ogolanaysaa in ka badan hal idin la tixraaco, haddii ay dhacdo in goobta mar horeba farta ku fiiqdo qoraal dheeraad ah.

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

Curiyayaasha la taageeray

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

<input>s iyo <textarea>s leh.form-control
<select>s leh .form-controlama.custom-select
.form-checks
.custom-checkboxs iyo .custom-radios
.custom-file

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

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.

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

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

Ansixinta kooxda gelinta

Si loo ogaado waxa curiyayaasha u baahan yihiin geeso wareegsan gudaha kooxda gelinta leh ansaxinta, kooxda wax gelinta waxay u baahan tahay .has-validationfasal dheeraad ah.

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

Fadlan door magac isticmaale

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

Calaamadee sanduuqa hubinta ee caadada u ah

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

Calaamadee sanduuqa hubinta ee caadada u ah

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

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

Idaacadaha

Beddel raadiyahan gaarka ah

Ama beddel raadiyahan gaarka ah

<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

Beddel raadiyahan gaarka ah

Ama beddel raadiyahan gaarka ah

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

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.

Calaamadee sanduuqa hubinta ee caadada u ah

Beddel raadiyahan gaarka ah

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

Bedeli curiyahan beddelka

Curiyaha beddelka naafada

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

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.

Tusaalaha kala duwan

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

Tusaalaha kala duwan

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

Tusaalaha kala duwan

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

Dooro faylka

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

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

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 xadhkaha 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):

Voeg je dukumentiga suulasha

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

Foomamka

Dulmar

Koontaroolada foomka

Cabbirka

Kaliya akhri

Qoraal cad oo akhri kaliya

Qaybaha kala duwan

Sanduuqyada hubinta iyo raadiyaha

Default (la dulsaaray)

Inline

Aan lahayn calaamado

Qaabka

Samee kooxo

Shabakadda foomka

Foom safka

Qaab toosan

Cabbirka calaamadaynta qaabka horizontal

Cabbirka tiirka

Si otomaatig ah u cabbirka

Foomamka xariiqda

Beddelka calaamadaha qarsoon

Qoraalka caawinta

Ku xidhidhiyaha qoraalka caawimada kontaroolada foomka

Foomamka naafada

Digniin leh barroosinno

Waafaqsanaanta browser-ka

Xaqiijinta

Sida ay u shaqeyso

Hababka gaarka ah

Browser-ka khaladka ah

Dhinaca server-ka

Curiyayaasha la taageeray

Tilmaamaha Qalabka

Habaynta

Ansixinta kooxda gelinta

Foomamka gaarka ah

Sanduuqyada hubinta iyo raadiyaha

Sanduuqyada hubinta

Idaacadaha

Inline

Naafada

Gawaarida

Dooro liiska

Range

Faylka browserka

Ku turjumida ama habaynta xargaha SCSS

Ku turjumida ama habaynta xadhkaha HTML