Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
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, ~).

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

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

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

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

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

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

Soma maandishi wazi pekee

Lebo zinazoelea pia zinatumika .form-control-plaintext, ambayo inaweza kusaidia kwa kugeuza kutoka kwa inayoweza kuhaririwa <input>hadi thamani ya maandishi wazi bila kuathiri mpangilio wa ukurasa.

html 
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

Vikundi vya kuingiza

Lebo zinazoelea pia zinasaidia .input-group.

@
html 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

Wakati wa kutumia .input-groupna .form-floatingpamoja na uthibitishaji wa fomu, -feedbackinapaswa kuwekwa nje ya .form-floating, lakini ndani ya .input-group. Hii ina maana kwamba maoni yatahitaji kuonyeshwa kwa kutumia javascript.

@
Tafadhali chagua jina la mtumiaji.
html 
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Mpangilio

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

html 
<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">
        <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;