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.

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

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 . Galteewwan dubbisa qofaaf salphaa ta'anii mul'atu (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 keessatti 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">
    </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. Amalli disabledhaala galtee agarsiisuuf gargaaruuf halluu ifa ta'e hojii irra oolcha.

Sanduuqawwan filannoo fi qaree raadiyoo mirkaneessuu unkaa HTML irratti hundaa'e deeggaru fi asxaalee gabaabaa, dhaqqabamaa ta'an ni kennu. 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.

Sanduuqa filannoo durtii

Sanduuqa filannoo hanqifame

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

Raadiyoo durtii

Raadiyoo durtii lammaffaa

Raadiyoo hojii irraa oolche

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

1. 1.

2. 2.

3 (qaama miidhame) .

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

1. 1.

2. 2.

3 (qaama miidhame) .

<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 teeknooloojiiwwan gargaarsaaf maqaa dhaqqabamaa bifa 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 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>

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>

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

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 uumuu si barbaachisa ta'a. Fakkeenyaaf, padding-topsarara bu'uuraa barruu haala gaariin qindeessuuf asxaa galtee raadiyoo tuulame keenya irratti haqneerra.

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

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.

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

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

Of eeggannoo anchors waliin

Biraawuzaroonni too'annoo unkaa dhalootaa ( <input>, <select>, fi <button>elementoota) a keessa jiran hunda <fieldset disabled>akka hanqifameetti ilaalu, walqunnamtii furtuu fi hantuutee lamaanuu isaan irratti dhorka.

Haa ta'u malee, yoo unkaan kee akkasumas qaamolee qaree amala fakkaatanii kan akka , of keessatti hammate <a ... class="btn btn-*">, 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.To'annoon anchor irratti hundaa'e akkasumas ammallee ni ta'a xiyyeeffannoo kan qabuu fi kiiboordii fayyadamuun kan hojjetu ta’uu danda’a. tabindex="-1"To'annoowwan kana xiyyeeffannoo akka hin arganne ittisuu fi aria-disabled="disabled"haala isaanii teeknooloojiiwwan gargaarsaa agarsiisuuf dabaluudhaan harkaan fooyyessuu qabda .

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 akkaataaleen mirkaneessuu amala gama maamilaa fi gorsi meeshaalee, teknooloojiiwwan gargaarsaaf waan hin saaxilamneef, dhaqqabamaa akka hin taane ni beekna. Furmaata irratti osoo hojjennu, filannoo gama sarvarii ykn mala mirkaneessa biraawzari durtii fayyadamuu ni gorsina.

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.

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

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

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.

Man'eewwan sirrii hin taaneef, ergaan yaada/dogongoraa sirrii hin taane dirree unkaa barbaachisaa ta'e waliin walqabsiisuu isaa fayyadamuun mirkaneessi aria-describedby. Amalli kun tokkoo ol idakka wabii ta'u hayyama, yoo dirree duraan barruu unkaa dabalataa agarsiisu.

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

Qaamolee deeggaraman

Akkaataaleen mirkaneessuu too'annoowwanii fi qaamolee unkaa armaan gadiitiif ni argamu:

<input>s fi <textarea>s waliin.form-control
<select>s waliin .form-controlykn.custom-select
.form-checks
.custom-checkboxs fi .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>

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.

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

Dhuunfachiisuu

$form-validation-statesHaalawwan mirkaneessuu karaa Sass kaartaa waliin dhuunfachuu danda'u . Faayilii keenya keessatti kan argamu _variables.scss, kaartaan Sass kun haalata durtii valid/ invalidmirkaneessuu uumuuf loop over godhama. Halluu fi mallattoo haalata tokkoon tokkoo dhuunfachuuf kaartaa man'ee dabalameera. Haalli biroo biraawzarootaan kan hin deeggaramne yoo ta'ellee, warri akkaataa amala fayyadaman salphaatti yaada unkaa walxaxaa ta'e dabaluu danda'u.

Hubadhaa, osoo form-validation-statemixin hin fooyyessin gatiiwwan kana dhuunfachuu akka hin gorsine.

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

Mirkaneessuu garee galtee

Garee galtee mirkaneessuu waliin keessaa elementoota maaltu golee geengoo barbaadu adda baasuuf, gareen galtee .has-validationgita dabalataa barbaada.

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

Maaloo maqaa fayyadamaa filadhu.

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

Sanduuqa filannoo amala kana mallatteessi

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

Sanduuqa filannoo amala kana mallatteessi

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

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

Raadiyoowwan

Raadiyoo amala kana jijjiiri

Yookiin raadiyoo amala biraa kana jijjiiri

<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

Raadiyoo amala kana jijjiiri

Yookiin raadiyoo amala biraa kana jijjiiri

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

Miidhamaa

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

Sanduuqa filannoo amala kana mallatteessi

Raadiyoo amala kana jijjiiri

<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 amallichas ni deeggaru disabled.

Qaama jijjiirraa kana jijjiiri

Qaama jijjiirraa hanqifame

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

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 ijaan agarsiisuutti track isaanii bitaa ykn mirga qubbee irraa “guutuu” waan deeggaraniif, yeroo ammaa hin deeggarru.

Fakkeenya daangaa

<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

Fakkeenya daangaa

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

Fakkeenya daangaa

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

Faayilii filadhu

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

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

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

Voeg je sanada qubbee harkaa

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

Unkaalee

Haala Waliigalaa

To'annoo unkaa

Saayizii gochuu

Dubbisa qofaaf

Barreeffama ifa ta'e dubbisa qofa

Galteewwan Daangaa

Sanduuqawwan filannoo fi raadiyoo

Durtii (tuulame) .

Sarara keessaa

Asxaa malee

Tarreeffama

Garee uumuu

Giriidii unkaa

Tarree unkaa

Bifa qajeelaa

Safara asxaa unkaa qajeelaa

Safara tarjaa

Ofiin safaruu

Unkaalee sarara keessaa

Filannoowwan asxaalee dhokataa

Barreeffama gargaarsaa

Barruu gargaarsaa too'annoo unkaa wajjin walqabsiisuu

Unkaalee qaama miidhamtoota

Of eeggannoo anchors waliin

Walsimsiisa qaxxaamuraa-browser

Mirkaneessuu

Akkaataa itti hojjetu

Akkaataawwan amala

Durtii biraawzari

Gama sarvariitiin

Qaamolee deeggaraman

Gorsa Meeshaalee

Dhuunfachiisuu

Mirkaneessuu garee galtee

Unkaalee amala

Sanduuqawwan filannoo fi raadiyoo

Sanduuqawwan filannoo

Raadiyoowwan

Sarara keessaa

Miidhamaa

Jijjiirraa

Menuu filadhu

Hamma garaagarummaa

Faayilii biraawzari

Dhangiiwwan SCSS waliin hiikuu ykn dhuunfachuu

HTML waliin dhangiiwwan hiikuu ykn dhuunfachuu