Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Asxaalee lola'an

Asxaalee unkaa salphaa bareedduu man'eewwan galtee kee irratti yaa'an uumi.

Fuula kana irratti

Fakkeenya

Man'ee unka barruu Bootstrap waliin asxaalee lola'an dandeessisuuf lamaan <input class="form-control">fi <label>elementoota keessaa marsi. .form-floatingA placeholdertokkoon tokkoon irratti barbaachisaadha <input>sababiin isaas malli keenya kan asxaalee CSS-qofaaf lola'an :placeholder-shownelementii sobaa fayyadama. Akkasumas hubadhu, <input>filannoo obbolaa fayyadamuu akka dandeenyuuf dursa dhufuu qaba (fkn, ~).

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Yeroo valueduraan ibsame jiru, <label>s ofumaan bakka isaanii kan lola'e ni sirreessa.

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

Akkaataan mirkaneessuu unkaas akkuma eegametti hojjetu.

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Naannoowwan barreeffamaa

Akka durtiitti, <textarea>s with .form-contrololka'iinsa s wajjin walfakkaata ta'a <input>.

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Olka'iinsa amala kee irratti saaguuf , amalli <textarea>hin fayyadamin . rowsInumaayyuu, ifatti saagi height(yookaan sarara keessaa yookiin karaa CSS amala).

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

Filata

, irraa kan hafe , asxaaleen lola'an s .form-controlqofa irratti argamu . .form-selectIsaanis haala walfakkaatuun hojjetu, garuu <input>s irraa adda ta'ee, yeroo hundumaa <label>haala isaa lola'aa keessatti agarsiisu. Waliin filata sizefi multiplehin deeggaraman.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Tarreeffama

Yeroo sirna tarjaa Bootstrap wajjin hojjettu, qaamolee unkaa gita tarjaa keessa kaa'uu mirkaneessi.

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

Sass jedhama

Jijjiiramoota

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;