Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Mga lumulutang na label

Lumikha ng magagandang simpleng mga label ng form na lumulutang sa iyong mga input field.

Sa pahinang ito

Halimbawa

I-wrap ang isang pares ng <input class="form-control">at mga <label>elemento .form-floatingupang paganahin ang mga lumulutang na label gamit ang mga field ng textual form ng Bootstrap. Kinakailangan ang A placeholdersa bawat <input>isa dahil ang aming paraan ng CSS-only na mga lumulutang na label ay gumagamit ng :placeholder-shownpseudo-element. Tandaan din na ang <input>dapat ay mauna upang magamit natin ang isang kapatid na tagapili (hal., ~).

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>

Kapag may valuenatukoy na, <label>s ay awtomatikong aayusin sa kanilang lumutang na posisyon.

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>

Gumagana rin ang mga istilo ng pagpapatunay ng form gaya ng inaasahan.

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>

Textareas

Bilang default, <textarea>ang s with .form-controlay magiging kapareho ng taas ng <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>

Upang magtakda ng custom na taas sa iyong <textarea>, huwag gamitin ang rowsattribute. Sa halip, magtakda ng tahasang height(inline man o sa pamamagitan ng custom na CSS).

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>

Pinipili

Maliban sa .form-control, ang mga lumulutang na label ay magagamit lamang sa .form-selects. Gumagana ang mga ito sa parehong paraan, ngunit hindi tulad ng <input>s, palagi nilang ipapakita ang <label>nasa floated state nito. Pumipili kasama sizeat multiplehindi sinusuportahan.

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>

Readonly plaintext

Sinusuportahan din ng mga lumulutang na label .form-control-plaintextang , na maaaring makatulong para sa pag-toggle mula sa isang nae-edit <input>patungo sa isang plaintext na halaga nang hindi naaapektuhan ang layout ng pahina.

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>

Mga pangkat ng input

Sinusuportahan din ng mga lumulutang na label ang .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>

Kapag gumagamit .input-groupat .form-floatingkasama ng pagpapatunay ng form, ang -feedbackdapat ay ilagay sa labas ng .form-floating, ngunit sa loob ng .input-group. Nangangahulugan ito na ang feedback ay kailangang ipakita gamit ang javascript.

@
Mangyaring pumili ng isang username.
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>

Layout

Kapag nagtatrabaho sa Bootstrap grid system, siguraduhing ilagay ang mga elemento ng form sa loob ng mga klase ng column.

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

Mga variable

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