Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
in English

Lebo zinazoelea

Unda lebo za fomu rahisi ambazo huelea juu ya sehemu zako za uingizaji.

Katika ukurasa huu

Mfano

Funga jozi <input class="form-control">na <label>vipengee ndani .form-floatingili kuwezesha lebo zinazoelea kwa uga wa muundo wa maandishi wa Bootstrap. A placeholderinahitajika kwa kila moja <input>kwani mbinu yetu ya lebo zinazoelea za CSS pekee hutumia :placeholder-shownkipengele bandia. Pia kumbuka kuwa <input>lazima iwe kwanza ili tuweze kutumia kiteuzi cha kaka (kwa mfano, ~).

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

Wakati kuna valuetayari imefafanuliwa, <label>s itarekebisha kiotomatiki kwa nafasi yao iliyoelea.

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

Mitindo ya uthibitishaji wa fomu pia hufanya kazi inavyotarajiwa.

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

Sehemu za maandishi

Kwa chaguo-msingi, <textarea>s with .form-controlitakuwa na urefu sawa na <input>s.

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

Ili kuweka urefu maalum kwenye <textarea>, usitumie rowssifa. Badala yake, weka wazi height(iwe ndani ya mstari au kupitia CSS maalum).

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

Inachagua

Zaidi ya .form-control, lebo zinazoelea zinapatikana tu kwenye .form-selects. Zinafanya kazi kwa njia sawa, lakini tofauti na <input>s, zitaonyesha kila wakati <label>katika hali yake ya kuelea. Inachagua sizena multiplehaitumiki.

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

Mpangilio

Unapofanya kazi na mfumo wa gridi ya Bootstrap, hakikisha kuweka vipengele vya fomu ndani ya madarasa ya safu.

<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

Vigezo

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