Source

Unkaalee

Fakkeenyota fi qajeelfama fayyadama akkaataa too'annoo unkaa, filannoowwan qindaa'ina, fi qaamolee amala unkaalee adda addaa bal'aa uumuuf.

Haala Waliigalaa

To'annoon unkaa Bootstrap akkaataa unkaa keenya Rebooted gita waliin bal'isu. Gitoota kana fayyadamii agarsiisa isaanii kan dhuunfate keessa filachuuf agarsiisa caalaatti walsimaa ta'eef biraawzarootaa fi meeshaalee hunda irratti.

To'annoo galtee haaraa kan akka mirkaneessa iimeelii, filannoo lakkoofsaa fi kkf fayyadamuuf galtee hunda irratti amaloota sirrii ta'e fayyadamuu kee mirkaneessi type(fkn, emailteessoo imeeliidhaaf ykn numberodeeffannoo lakkoofsaaf).

Akkaataa unkaa Bootstrap agarsiisuuf fakkeenya saffisaa kunooti. Galmeewwan gita barbaachisoo, haalata unkaa fi kkf irratti dubbisuu itti fufi.

Email keessan nama biraaf gonkumaa hin qoodnu. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

To'annoo unkaa

Too'annoowwan unkaa barruu-akka <input>s, <select>s, fi s- gita <textarea>waliin akkaataa . .form-controlAkkaataawwan bifa waliigalaa, haalata xiyyeeffannoo, guddinaa fi kkf hammatamaniiru.

Unkaalee aadaa keenya qorachuu mirkaneeffadhu akkaataa <select>s dabalataaf.

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

.form-controlGaltee faayiliidhaaf, kan jijjiiri .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>

Saayizii gochuu

.form-control-lgGitoota akka fi fayyadamuun olka'iinsa saagi .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>

Dubbisa qofaaf

readonlyFooyya'iinsa gatii galtee ittisuuf amalli boolii galtee irratti dabali . Galteen dubbisa qofaaf salphaa ta'ee mul'ata (akkuma galtee hanqifame), garuu qaree istaandaardii qabadhu.

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

Barreeffama ifa ta'e dubbisa qofa

Yoo <input readonly>qaamolee unkaa kee keessa jiran akka barruu ifaatti akkaataa taasifaman qabaachuu barbaadde, .form-control-plaintextakkaataa dirree unkaa durtii haquu fi margaa fi qaaqa sirrii eeguuf gita fayyadami.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Galteewwan Daangaa

Galteewwan hangaa qajeelaan garagalfamuu danda'an fayyadamuun saagi .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>

Sanduuqawwan filannoo fi raadiyoo

Sanduuqawwan filannoo fi raadiyoowwan durtii gargaarsa .form-check, gosoota galtee lamaaniif gita tokkoo kan haalata fi amala qaamolee HTML isaanii fooyyessuudhaan fooyya'u . Sanduuqonni filannoo tarree tokko keessatti filannoo tokko ykn hedduu filachuuf yoo ta'an, raadiyoowwan ammoo filannoo tokko baay'ee keessaa filachuuf.

Sanduuqawwan filannoo fi raadiyoowwan hanqifaman ni deeggaraman, garuu not-allowedqaree hover warraa irratti kennuudhaaf, amallicha <label>gara . Amalli hanqifame haala galtee agarsiisuuf gargaaruuf halluu ifa ta'e hojii irra oolcha.disabled.form-check-input

Sanduuqawwan filannoo fi raadiyoowwan fayyadaman mirkaneessa unkaa HTML irratti hundaa'e deeggaruuf fi asxaalee gabaabaa, dhaqqabamaa ta'an kennuudhaaf ijaaramaniiru. Akka kanaan, <input>s fi s keenya <label>elementoota obbolaa yoo ta’an faallaa an <input>keessaa a <label>. Kun xiqqoo jechoota caalaa waan ta'eef fi amaloota idfi forwalqabsiisuuf ifteessuu qabda .<input><label>

Durtii (tuulame) .

Akka durtiitti, lakkoofsi kamiyyuu saanduqawwan filannoo fi raadiyoowwan obboleessa battalaa ta'an vertikaaliin tuulamanii fi haala sirrii ta'een addaan baafamanii .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>

Sarara keessaa

Sanduuqawwan filannoo ykn raadiyoo tarree qajeelaa walfakkaataa irratti .form-check-inlinekamiyyuu irratti dabaluudhaan garee .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>

Asxaa malee

.position-staticGalteewwan .form-checkbarruu asxaa tokkollee hin qabne keessa jiranitti dabali . Ammas teknooloojiiwwan gargaarsaaf bifa asxaa tokko tokko kennuu yaadadhu (fakkeenyaaf, fayyadamuu 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>

Tarreeffama

Bootstrap waan hojiirra ooluu display: blockfi width: 100%too'annoo unkaa keenya hunda jechuun ni danda'ama, unkaaleen akka durtiitti vertikaaliin ni tuulamu. Kutaalee dabalataa haalata kana unka tokkoon tokkoon jijjiiruuf fayyadamuun ni danda'ama.

Garee uumuu

Kutaan .form-groupunkaalee irratti caasaa tokko tokko dabaluudhaaf karaa salphaadha. Gitaa jijjiiramaa kan asxaalee, too'annoowwan, barruu gargaarsa filannoo, fi ergaa mirkaneessuu unkaa sirnaan garee gochuu jajjabeessu kenna. Akka durtiitti qofa hojiirra oola , garuu akka barbaachisummaa isaatti margin-bottomakkaataa dabalataa keessaa fudhata . s, s, ykn elementii biraa kamiyyuu jechuun ni danda'ama .form-inlinewaliin fayyadami .<fieldset><div>

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Giriidii unkaa

Unkaalee walxaxaa ta'an gita giiridii keenya fayyadamuun ijaaruun ni danda'ama. Kanneen qindaa'inoota unkaa tarjaawwan hedduu, bal'ina garaa garaa, fi filannoowwan qindaa'ina dabalataa barbaadaniif fayyadami.

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

Tarree unkaa

Akkasumas , jijjiirama tarree tarjaa istaandaardii keenyaa .rowkan .form-rowgutters tarjaa durtii qindaa'inoota ciccimoo fi kompaaktii ta'aniif irra darbu jijjiiruu dandeessa.

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

Haalata walxaxaa ta'e sirna giiridii wajjinis uumuun ni danda'ama.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Bifa qajeelaa

Unkaalee qajeeloo tarjaa waliin uumi .rowgita gareewwan unkaa irratti dabaluu fi gita fayyadamuun .col-*-*bal'ina asxaalee fi too'annoowwan kee ifteessuu. .col-form-labelAkkasumas s kee irratti dabaluu kee mirkaneessi akka <label>isaan too'annoo unkaa isaanii wajjin walqabatan waliin giddugaleessa dhaabbataa ta'aniif.

Yeroo tokko tokko, tarii margin ykn padding utilities fayyadamuun walsimsiisa mudaa hin qabne sana si barbaachisu uumuuf si barbaachisa ta'a. Fakkeenyaaf, padding-topsarara bu'uuraa barruu haala gaariin qindeessuuf asxaa galtee raadiyoo tuulame keenya irratti haqneerra.

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

Guddina fi sirriitti hordofuuf ykn gara .col-form-label-sms ykn s .col-form-label-lgkeetti fayyadamuu kee mirkaneessi .<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>

Safara tarjaa

Akkuma fakkeenyota darban irratti mul'ate, sirni giiridii keenyaa lakkoofsa .cols kamiyyuu a .rowykn keessa akka kaa'an si dandeessisa .form-row. Bal'ina jiru walqixa isaan gidduutti qoodu. Akkasumas tuuta xiqqaa tarjaawwan kee bakka xiqqaa fi guddaa fudhachuuf filachuu dandeessa, yeroo .cols hafe walqixa kan hafe qoodu, gita tarjaa murtaa'aa akka .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>

Ofiin safaruu

Fakkeenyi armaan gadii faayidaa flexbox fayyadama qabiyyee dhaabbataadhaan giddugaleessa gochuu fi .colgara jijjiiramoota akka .col-autotarjaawwan kee bakka hamma barbaachisu qofa fudhatan. Karaa biraatiin yoo ilaalle, tarjaan qabiyyee irratti hundaa'uun of safara.

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

Sana booda sana ammas gita tarjaa hammangaa murtaa'e waliin irra deebi'ii makamuu dandeessa.

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

Akkasumas beekamaadha too'annoon unkaa amala ni deeggarama.

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

Unkaalee sarara keessaa

.form-inlineTartiiba asxaalee, too'annoo unkaa, fi qaree tarree qajeelaa tokko irratti agarsiisuuf gita fayyadami . To'annoon unkaa unkaalee sarara keessaa keessaa haalata durtii isaanii irraa xiqqoo garaagarummaa qabu.

  • Too'annoon , iddoo adii HTML kamiyyuu kuffisuu fi to'annoo qindaa'ina faayidaalee addaan fageenyaa fi flexboxdisplay: flex waliin akka kennitu si dandeessisu .
  • Too'annoo fi gareewwan galtee width: autodurtii Bootstrap irra darbuuf fudhatu width: 100%.
  • Too'annoon sarara keessaa qofa mul'atu buufatawwan ilaalchaa yoo xiqqaate bal'ina 576px qaban keessatti mul'atawwan mul'annoo dhiphoo meeshaalee sochootuu irratti herregaaf.

Bal'ina fi qindaa'ina too'annoo unkaa dhuunfaa faayidaa addaan fageenyaa wajjin harkaan ilaaluu si barbaachisuu danda'a (akkuma armaan gadiitti). Dhumarratti, yeroo hunda <label>to'annoo unkaa tokkoon tokkoo wajjin a dabaluu kee mirkaneessi, yoo daawwattoota dubbisaa iskiriinii hin taane irraa dhoksuu barbaaddellee .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>

To'annoo fi filannoowwan unkaa amala akkasumas ni deeggaraman.

<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>
Filannoowwan asxaalee dhokataa

Teeknooloojiiwwan gargaaraa kanneen akka dubbistoota iskiriinii unkaalee kee irratti rakkina ni qabaatu yoo galtee hundaaf asxaa hin daballe. .sr-onlyUnkaalee sarara keessaa kanaaf, asxaalee gita fayyadamuun dhoksuu dandeessa . Malli filannoo dabalataa teknooloojiiwwan gargaarsaaf asxaa kennuu, kan akka aria-label, aria-labelledbyykn titleamalli jiru. Yoo kanneen keessaa tokkollee hin jirre, teknooloojiiwwan gargaarsaa amallicha fayyadamuutti gargaaramuu danda’u , yoo jiraate, garuu akka bakka bu’aa malawwan asxaa birootti placeholderfayyadamuun akka hin gorfanne hubadhu .placeholder

Barreeffama gargaarsaa

Barruu gargaarsaa sadarkaa ugguraa unkaalee keessatti fayyadamuun uumuun ni danda'ama (duraan akka v3 keessatti .form-textbeekama ture ). .help-blockBarruun gargaarsa sarara keessaa qaama HTML sarara keessaa kamiyyuu fi gita faayidaa akka .text-muted.

Barruu gargaarsaa too'annoo unkaa wajjin walqabsiisuu

aria-describedbyBarruun gargaarsaa too'annoo unkaa amaloota fayyadamuu wajjin walqabatu waliin ifatti walqabsiisuu qaba . Kunis teknooloojiiwwan gargaaraa-kan akka dubbistoota iskiriinii-yeroo fayyadamaan xiyyeeffatu ykn too'annoo seenu barruu gargaarsaa kana akka beeksisan ni mirkaneessa.

Barruu gargaarsaa galteewwan jalatti akkaataa .form-text. Gitni kun display: blockgalteewwan armaan olii irraa addaan fageenya salphaa ta'eef margina gubbaa tokko tokko of keessatti qabata fi dabalata.

Jechi icciitii kee arfiilee 8-20 dheerachuu qaba, qubee fi lakkoofsa of keessaa qabaachuu qaba, akkasumas iddooqa, arfiilee addaa, ykn emoji qabaachuu hin qabu. 
<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>

Barruun sarara keessaa qaama HTML sarara keessaa idilee kamiyyuu fayyadamuu danda'a (a <small>, <span>, ykn waan biraa haa ta'u) gita faayidaa malee homaa hin qabne.

Dheerinni isaa arfiilee 8-20 ta’uu qaba. 
<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>

Unkaalee qaama miidhamtoota

disabledWalqunnamtii fayyadamaa ittisuu fi salphaa akka mul'atu gochuuf amalli boolii galtee irratti dabali .

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

Too'annoowwan hunda keessaa hanqisuuf disabledamalli gara atti dabali .<fieldset>

<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>
Of eeggannoo anchors waliin

Akka durtiitti, biraawzaroonni too'annoo unkaa dhalootaa ( <input>, <select>fi <button>qaamolee) a keessa jiran hunda <fieldset disabled>akka hanqifameetti ilaalu, walqunnamtii furtuu fi hantuutee lamaanuu isaan irratti dhorka. Haa ta'u malee, yoo unkaan kee <a ... class="btn btn-*">elementootas of keessaa qabaate, kunniin akkaataa pointer-events: none. Akkuma kutaa waa'ee haalata hanqifame qareedhaaf (fi addatti kutaa xiqqaa qaamolee anchor keessatti) keessatti ibsame, qabeentiin CSS kun ammallee sadarkaa hin qabnee fi Internet Explorer 10 keessatti guutummaatti hin deeggaramne, akkasumas fayyadamtoonni kiiboordii akka hin taane hin dhorku hidhannoowwan kana irratti xiyyeeffachuu ykn hojiitti galchuu danda’u. Kanaafuu nageenya qabaachuuf, hidhannoo akkasii hanqisuuf JaavaScript amala fayyadami.

Walsimsiisa qaxxaamuraa-browser

Bootstrap akkaataa kana biraawzaroota hunda keessatti hojiirra oolchu yoo ta'u, Internet Explorer 11 fi isaa gadii disabledamaloota a irratti guutummaatti hin deeggaran <fieldset>. Tuuta dirree biraawwaroota kana keessatti hanqisuuf JaavaScript amala fayyadami.

Mirkaneessuu

Fayyadamtoota keessaniif yaada gatii qabu, tarkaanfii fudhachuu danda’u mirkaneessa unka HTML5 waliin kenni– biraawzaroota keenya deeggaraman hunda keessatti argama . Yaada mirkaneessuu durtii biraawzari irraa filadhu, ykn ergaawwan amala gita keenya keessaa ijaaramanii fi JaavaScript jalqabaa wajjin hojiirra oolchi.

Yeroo ammaa akkaataa mirkaneessuu amala fayyadamuu ni gorsina, sababiin isaas ergaawwan mirkaneessuu durtii biraawzari dhalootaa yeroo hunda teeknooloojiiwwan gargaaraa biraawzaroota hunda keessatti hin saaxilaman (keessattuu, Chrome deeskitooppii fi mobaayila irratti).

Akkaataa itti hojjetu

Akkaataa mirkaneessi unkaa Bootstrap waliin hojjetu kunooti:

  • Mirkaneessi unka HTML karaa CSS's lamaan pseudo-classes, :invalidfi :valid. <input>, <select>, fi <textarea>elementoota irratti hojjeta .
  • Bootstrap akkaataa :invalidfi gara gita :validwarraatti bal'isa, yeroo baay'ee . Yoo kana hin taane, man'ee barbaadamu kamiyyuu gatii hin qabne fe'iinsa fuula irratti akka sirrii hin taaneetti mul'ata. Haala kanaan, yoom akka isaan kakaastu filachuu dandeessa (akkaataa idileetti erga unka galchuuf yaalamee booda)..was-validated<form>
  • Mul'ata unkaa deebisanii saaguuf (fakkeenyaaf, haala ergaa unkaa daayinamikii AJAX fayyadamuun), .was-validatedgita <form>ammas erga ergamee booda irraa haqi.
  • Akka duubatti deebi'uutti, .is-invalidfi .is-validgitaawwan bakka gita-sobaa mirkaneessuu gama sarvariidhaaf fayyadamuu danda'u . .was-validatedKutaa warraa hin barbaadan .
  • Sababa danqaa akkaataa CSS itti hojjetu irraa kan ka'e, <label>gargaarsa JaavaScript amala malee to'annoo unkaa DOM keessatti dura dhufutti (yeroo ammaa) akkaataalee hojii irra oolchuu hin dandeenyu.
  • Biraawuzaroonni ammayyaa hundi API mirkaneessa danqaa deeggaru , malawwan JaavaScript walduraa duubaan too'annoo unkaa mirkaneessuuf.
  • Ergaawwan yaada deebii durtii biraawzariitti fayyadamuu danda'u (tokkoon tokkoo biraawzariif adda addaa, fi karaa CSS kan hin style) ykn akkaataa yaada keenya amala HTML fi CSS dabalataa wajjin fayyadamuu danda'u.
  • setCustomValidityErgaawwan sirrii ta'uu amala JaavaScript keessatti waliin kennuu dandeessa .

Kana yaada keessa galchuun, akkaataawwan mirkaneessuu unkaa amala keenyaaf, gitawwan gama sarvarii filannoo, fi durtii biraawzariif demoowwan armaan gadii ilaali.

Akkaataawwan amala

novalidateErgaawwan mirkaneessuu unkaa Bootstrap amalaaf, amaloota boolii gara keetti dabaluu si barbaachisa <form>. Kunis gorsa meeshaalee yaada durtii biraawzari hanqisa, garuu ammas APIwwan mirkaneessuu unkaa JaavaScript keessatti qaqqabummaa kenna. Unka armaan gadii dhiyeessuuf yaalaa; JavaScript keenya button submit jedhu addaan kutee yaada isiniif dabarsee isiniif dabarsa. :invalidYeroo galchuuf yaaltu, akkaataalee fi :validtoo'annoo unkaa kee irratti hojiirra oolan ni argita .

Akkaataan yaada amala halluu amala, daangaa, akkaataa xiyyeeffannoo, fi mallattoolee duubbee yaada haala gaariin walqunnamsiisuuf hojii irra oolchu. Mallattoolee duubbee <select>s qofa waliin argamu .custom-select, malee hin argamu .form-control.

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

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

Durtii biraawzari

Ergaawwan yaada mirkaneessuu amala ykn amala unkaa jijjiiruuf JaavaScript barreessuudhaaf fedhii hin qabduu? Hundi gaarii dha, durtii browser fayyadamuu dandeessa. Unka armaan gadii galchuuf yaalaa. Browser fi OS keessan irratti hundaa'uun akkaataa yaada xiqqoo adda ta'e ni argitu.

Akkaataan yaada kennuu kun CSS waliin akkaataa ta'uu kan hin dandeenye yoo ta'ellee, ammas barruu yaada deebii karaa JaavaScript dhuunfachuu dandeessa.

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

Gama sarvariitiin

Mirkaneessuu gama maamilaa fayyadamuu ni gorsina, garuu yoo mirkaneessuu gama sarvarii barbaadde, man'ee unkaa sirrii hin taanee fi sirrii ta'e fi waliin agarsiisuu .is-invaliddandeessa .is-valid. Hubadhaa innis .invalid-feedbackgita kanaan deeggaramee jira.

Gaarii fakkaata!
Gaarii fakkaata!
@
Maaloo maqaa fayyadamaa filadhu.
Mee magaalaa seera qabeessa ta'e nuuf kenni.
Mee haala sirrii ta'e kenni.
Mee ziip sirrii ta'e nuuf kenni.
Osoo hin galchiin dura walii galuu qabda. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Qaamolee deeggaraman

Unkaaleen fakkeenyaa keenya <input>s barruu dhalootaa armaan olitti agarsiisu, garuu akkaataaleen mirkaneessuu unkaa <textarea>s fi too'annoo unkaa amalaafs ni argamu.

Mee bakka barreeffamaa keessatti ergaa galchi.
Fakkeenya barruu yaada deebii sirrii hin taane
Fakkeenya dabalataa barruu yaada sirrii hin taane
Fakkeenya yaada filannoo amala sirrii hin taane
Fakkeenya yaada faayilii amala sirrii hin taane 
<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>

Gorsa Meeshaalee

Yoo qindaa'inni unkaa kee hayyame, yaada mirkaneessuu gorsa meeshaa akkaataa keessatti agarsiisuuf gitawwan .{valid|invalid}-feedbackgitaaf jijjiiruu dandeessa . Tooltip positioning'f .{valid|invalid}-tooltipwarra irratti qabu qabaachuu kee mirkaneessi . position: relativeFakkeenya armaan gadii keessatti, gitaawwan tarjaa keenya kana duraan qabu, garuu pirojektiin kee qindeessaa filannoo barbaadu danda'a.

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

Unkaalee amala

Daran caalaa dhuunfachiisaa fi walsimsiisaa qaxxaamuraa biraawzarii, elementoota unkaa keenya guutummaatti amala keenya fayyadamii durtii biraawzari bakka buusuuf. Isaan mallattoo hiikaa fi dhaqqabamaa gubbaatti ijaaramaniiru, kanaaf isaan bakka bu'oota jajjaboo too'annoo unkaa durtii kamiifuu.

Sanduuqawwan filannoo fi raadiyoo

Tokkoon tokkoon sanduuqa filannoo fi raadiyoo <input>fi wal-qabsiisuu too'annoo amala keenya uumuuf <label>a keessatti marfama . <div>Caasaadhaan, kun mala durtii keenyaa wajjin tokkodha .form-check.

Filataa obbolaa ( ) kan kutaalee ~keenya hundaaf fayyadamna—akka —agarsiiftuu unkaa amala keenyaa sirnaan akkaataa itti tolchuuf. Yeroo gita waliin walitti makamu , akkasumas barruu tokkoon tokkoo wantaaf haalata 's irratti hundaa'uun akkaataa itti ta'uu dandeenya .<input>:checked.custom-control-label<input>

Durtii <input>waliin dhoksina fi agarsiiftuu unkaa amala haaraa bakka isaa fi waliin ijaaruuf opacityfayyadamna . Kan nama dhibu CSS'n elementii sana irratti waan hin hojjenneef qofa irraa kan amala ijaaruu hin dandeenyu ..custom-control-label::before::after<input>content

Haalota sakatta'aman keessatti, mallattoolee SVG base64 uumaman Open Iconic irraa fayyadamna . Kunis to'annoo hundarra gaarii ta'e kan akkaataa fi bakka biraawzarootaa fi meeshaalee hunda irratti nuuf kenna.

Sanduuqawwan filannoo

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

Sanduuqonni filannoo amala akkasumas yeroo harkaan karaa JaavaScript saagamu gita sobaa fayyadamuu danda'u :indeterminate(amalli HTML ifteessuuf hin jiru).

Yoo jQuery fayyadamaa jirta ta'e, wanti akkanaa gahaa ta'uu qaba:

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

Raadiyoowwan

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

Sarara keessaa

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

Miidhamaa

Sanduuqawwan filannoo fi raadiyoowwan amala akkasumas hanqisuun ni danda'ama. disabledAmala boolii gara fi <input>agarsiiftuu amalaafi ibsi asxaa ofumaan akkaataa itti dabalamu.

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

Jijjiirraa

Jijjiirraan mallattoo sanduuqa filannoo amala qaba garuu .custom-switchjijjiiraa jijjiirraa agarsiisuuf gita fayyadama. Jijjiirraawwan disabledamalootas ni deeggaru.

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

Menuu filadhu

Sajoo <select>amala gita amala qofa barbaadu, .custom-selectakkaataa amala kakaasuuf. Akkaataawwan amala mul'ata jalqabaa 's irratti daangeffamaniiru, sababa daangeffama biraawwaaraatiin s <select>fooyyessuu hin danda'an .<option>

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

Akkasumas galtee barruu keenya hamma walfakkaatuun walsimsiisuuf filannoowwan amala xixiqqoo fi gurguddoo keessaa filachuu dandeessa.

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

Amalli multiplekunis ni deeggara:

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

Akkuma sizeamalli jiru:

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

Hamma garaagarummaa

<input type="range">To'annoowwan amala waliin uumi .custom-range. Hordoffiin (duuba) fi qubni guddaan (gatii) lamaan isaanii akkaataa biraawzaroota hunda keessatti walfakkaataa ta'anii mul'ataniiru. IE fi Firefox qofti akka mala guddina mul’ataan agarsiisuutti track isaanii bitaa ykn mirga qubbee irraa “guutuu” waan deeggaraniif, yeroo ammaa hin deeggarru.

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

Galteewwan hangaa gatiiwwan icciitii minfi max— 0fi 100, akkaataa walduraa duubaan qabu. Warra amaloota minfi fayyadamaniif gatiiwwan haaraa ifteessuu dandeessa .max

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

Akka durtiitti, galteewwan hangaa “snap” gara gatiiwwan lakkoofsa guutuutti. Kana jijjiiruuf, stepgatii ifteessuu dandeessa. Fakkeenya armaan gadii keessatti, fayyadamuun lakkoofsa tarkaanfiiwwanii dachaa lama guddifna step="0.5".

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

Faayilii biraawzari

Galtee faayilii amala sochoosuuf plugin gorfame: bs-custom-file-input , kanuma yeroo ammaa as docs keenya keessatti fayyadamaa jirra.

Galteen faayilii baay'ee gnarly tuuta keessaa yoo ta'u yoo isaan dalagaa Faayilii Filadhu... fi barruu maqaa faayilii filatame waliin walqabsiisuu barbaadde JaavaScript dabalataa barbaada .

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

Faayilii durtii <input>karaa opacityfi inumaayyuu akkaataa <label>. Qabduun kan uumamee fi ::after. Dhumarratti, qabiyyee naannoodhaaf addaan fageenya sirrii ta'eef a widthfi heightirratti labsina .<input>

Dhangiiwwan SCSS waliin hiikuu ykn dhuunfachuu

Gitni :lang()sobaa barreeffama “Browse” gara afaanota birootti akka hiikamu hayyamuuf kan gargaarudha. Galteewwan gara $custom-file-textjijjiiramaa Sass mallattoo afaanii barbaachisaa fi dhangiiwwan naannoo ta'aniin irra darbi ykn dabali. Hidhaawwan Ingiliffaa haala walfakkaatuun dhuunfachuun ni danda'ama. Fakkeenyaaf, akkaataa namni tokko hiika Ispeen itti dabaluu danda'u kunooti (koodii afaan Ispeen es):

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

Kunoo lang(es)galtee faayilii amala hiika Ispeen irratti gochaan jira:

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

Barruun sirrii akka agarsiifamuuf afaan galmee keetii (ykn muka xiqqaa isaa) sirritti saaguu si barbaachisa. Kunis amaloota elementii irratti ykn mataduree HTTP , malawwan biroo keessaa fayyadamuun raawwatamuu danda'a.lang<html>Content-Language

HTML waliin dhangiiwwan hiikuu ykn dhuunfachuu

Bootstrap akkasumas karaa barruu “Browse” HTML keessatti data-browseamaloota asxaa galtee amala irratti dabalamuu danda’uun hiikuuf kenna (fakkeenya afaan Daach):

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