Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Malebvu lama papamalaka

Endla malebvu ya fomo yo olova yo saseka lama papamalaka ehenhla ka tinsimu ta wena to nghenisa.

Eka tluka leri

Xikombiso

Pfuxeta mpatswa wa <input class="form-control">na <label>swiaki eka .form-floatingku endla leswaku ku va na malebvu lama papamalaka hi tinsimu ta xivumbeko xa matsalwa ya Bootstrap. A placeholderya laveka eka yin’wana na yin’wana <input>tanihileswi ndlela ya hina ya malebvu lama papamalaka ya CSS ntsena yi tirhisaka :placeholder-shownpseudo-element. Nakambe xiya leswaku swi <input>fanele swi ta ku sungula leswaku hi ta kota ku tirhisa xihlawulekisi xa vamakwerhu (xikombiso, ~).

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

Loko ku ri na lexi valuese xi hlamuseriweke, <label>s yi ta tilulamisela hi yoxe eka xiyimo xa yona xo papamala.

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

Switayele swa ku tiyisisa fomo na swona swi tirha tanihilaha swi languteriweke hakona.

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

Tindhawu ta matsalwa

Hi ku tiyimisela, <textarea>s with .form-controlyi ta va yi ri ku tlakuka loku fanaka 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>

Ku veka ku tlakuka ka ntolovelo eka , ya wena <textarea>, u nga tirhisi rowsxihlawulekisi. Ematshan’weni ya sweswo, veka lexi nga erivaleni height(ku nga ha va endzeni ka layini kumbe hi ku tirhisa CSS ya ntolovelo).

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

Ku hlawula

Handle ka .form-control, malebvu lama papamalaka ma kumeka ntsena eka .form-selects. Ti tirha hi ndlela leyi fanaka, kambe ku hambana na <input>s, ti ta tshama ti kombisa the <label>eka xiyimo xa yona xo papamala. Hlawula na sizenaswona multiplea swi seketeriwi.

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

Vuandlalo

Loko u tirha na sisiteme ya giridi ya Bootstrap, tiyisisa leswaku u veka swiaki swa fomo endzeni ka titlilasi ta tikholomu.

<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

Swilo leswi cinca-cincaka

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