Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Labels flottant (Label minnu bɛ panpan).

Aw ye sɛbɛnfura labeli nɔgɔmanw dilan minnu bɛ panpan aw ka dondaw kan.

Nin ɲɛ in kan

Misaliya

Aw bɛ fɛn fila siri <input class="form-control">ani <label>fɛnw na .form-floatingwalasa ka labeliw wulilenw kɛ ni Bootstrap ka sɛbɛnni foroko forow ye. A placeholderbɛ ɲini u kelen-kelen bɛɛ kan <input>i n’a fɔ an ka fɛɛrɛ min bɛ CSS-dɔrɔn labeli-fɔcogo la, o bɛ baara Kɛ ni :placeholder-shownpseudo-element ye. A kɔlɔsi fana ko ka <input>kan ka na fɔlɔ walasa an ka se ka baara kɛ ni balimakɛ sugandili ye (misali la, ~).

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

Ni valueɲɛfɔli dɔ bɛ yen kaban, <label>s bɛna a yɛrɛ Labɛn u ka jɛgɛn-yɔrɔ la.

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

Formulaire validation styles fana bɛ baara kɛ i n’a fɔ a bɛ fɔ cogo min na.

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

Sɛbɛnnikɛyɔrɔw

Ka da a kan, <textarea>s ni .form-controlbɛna kɛ <input>s janya ye kelen ye.

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

Walasa ka ladamu janya dɔ sigi i ka <textarea>, i kana baara kɛ ni o rowsfɛnsɛbɛnni ye. O nɔ na, ​​i ka ɲɛfɔli jɛlen dɔ sigi sen kan height(inline walima CSS ladamu fɛ).

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

A bɛ sugandi

N’o tɛ .form-control, labeli minnu bɛ panpan, olu bɛ sɔrɔ .form-selects dɔrɔn de kan. U bɛ baara Kɛ o cogo kelen na, nka u tɛ i n'a fɔ <input>s, u bɛna a jira tuma bɛɛ a <label>cogo la min bɛ wuli. Sugandili ni sizeani multiplea tɛ dɛmɛn.

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

Labɛn cogo

Ni aw bɛ baara kɛ ni Bootstrap grid system ye, aw ye aw jija ka foroko kɔnɔfɛnw bila kulu kalasi kɔnɔ.

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

Yɛlɛma-yɛlɛmaw

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