Unkaalee

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="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

Barruu unkaa

Barruu unkaa sadarkaa ugguraa ykn sadarkaa sarara keessaa fayyadamuun uumuun ni danda'ama .form-text.

Barruu unkaa galteewwan jalatti akkaataa .form-text. Yoo elementiin sadarkaa ugguraa fayyadame, galteewwan armaan olii irraa addaan fageenya salphaa ta'eef margaan gubbaa dabalama.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

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

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

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>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-*">...</a>, kunniin akkaataa , qofatu kennamaaf pointer-events: none, jechuunis ammallee xiyyeeffannoo fi gabatee furtuu fayyadamuun hojjetamuu danda'u. Haala kana keessatti, too'annoowwan kana tabindex="-1"xiyyeeffannoo akka hin arganne ittisuu fi aria-disabled="disabled"haala isaanii teeknooloojiiwwan gargaarsaa agarsiisuuf dabaluudhaan harkaan fooyyessuu qabda.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <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>

Dhaqqabummaa

To’annoon unkaa hundi kaayyoon isaanii fayyadamtoota teeknooloojiiwwan gargaarsaatiif akka dabarfamuuf maqaa dhaqqabamaa ta’e qabaachuu isaanii mirkaneessuu. Karaan salphaan kana galmaan ga'uuf <label>elementii fayyadamuudha, ykn—haala qaree keessatti—barruu ibsa gahaa akka qaama <button>...</button>qabiyyeetti hammachuudha.

Haalota <label>qabiyyee barruu mul'atu ykn sirrii ta'e hammachuun hin danda'amneef, karaaleen filannoo ammallee maqaa dhaqqabamaa ta'e kennuu danda'an jiru, kan akka:

• <label>elementoota .visually-hiddengita fayyadamuun dhokfaman
• Qabeentaa jiru kan akka asxaa fayyadamuun hojjechuu danda'u agarsiisuuaria-labelledby
• titleAmala kennuu
• Maqaa dhaqqabamaa elementii fayyadamuun ifatti saaguuaria-label

Yoo kanneen keessaa tokkollee hin jirre, teeknooloojiiwwan gargaaraa maqaa dhaqqabamaa ta'aniif fi elementootaaf placeholderamallicha akka duubatti deebi'uutti fayyadamuutti gargaaramuu danda'u. Fakkeenyonni kutaa kana keessatti argaman malawwan yaada kennaman muraasa, haala addaatiin kennaman ni kennu.<input><textarea>

Qabiyyee mul'ataan dhokate fayyadamuun ( .visually-hidden, aria-label, fi qabiyyee illee placeholder, kan dirree unkaa qabiyyee qabaatee booda badu) fayyadamtoota teeknooloojii gargaaraa fayyadamtoota kan fayyadu yoo ta'u, hanqinni barruu asxaa mul'atu ammallee fayyadamtoota murtaa'aniif rakkoo ta'uu danda'a. Asxaa mul'atu bifa tokko tokko akka waliigalaatti mala hundarra gaarii dha, dhaqqabummaa fi itti fayyadamaaf.

Sass jedhama

Jijjiiramoonni unkaa baay'een sadarkaa waliigalaa irratti qaamolee unkaa dhuunfaatiin irra deebi'anii akka itti fayyadamanii fi babal'isuuf saagamu. $input-btn-*Isaan kana yeroo baay'ee akka fi $input-*jijjiiramootaatti ni argita .

Jijjiiramoota

$input-btn-*jijjiiramoonni jijjiiramoota addunyaa qaree keenyaa fi qaamolee unkaa keenya gidduutti qoodamaniidha. Isaan kun yeroo baay'ee akka gatiiwwan jijjiiramoota qaama addaa birootti irra deebi'anii ramadaman ni argatta.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;