Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Floating labels

Tsim cov ntawv sau yooj yooj yim zoo nkauj uas ntab hla koj qhov chaw nkag.

Ntawm nplooj ntawv no

Piv txwv

Qhwv ib khub ntawm <input class="form-control">thiab <label>cov ntsiab lus .form-floatinglos ua kom cov ntawv ntab ntab nrog Bootstrap cov ntawv sau ua teb. Ib qho placeholderyuav tsum tau ua ntawm txhua tus <input>raws li peb txoj kev ntawm CSS-tsuas yog cov ntawv ntab ntab siv cov :placeholder-shownpseudo-element. Tsis tas li ntawd nco ntsoov tias qhov <input>yuav tsum tau ua ntej yog li peb tuaj yeem siv tus kwv tij xaiv xaiv (xws li, ~).

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

Thaum muaj qhov valuetwb tau hais tseg lawm, <label>s yuav hloov kho rau lawv txoj haujlwm ntab.

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

Daim ntawv validation style kuj ua haujlwm raws li qhov xav tau.

<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

Los ntawm lub neej ntawd, <textarea>s nrog .form-controlyuav yog tib qhov siab li <input>s.

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

Txhawm rau teeb tsa qhov siab ntawm koj tus kheej <textarea>, tsis txhob siv tus rowscwj pwm. Hloov chaw, teeb tsa qhov tseeb height(xws li hauv kab lossis ntawm kev cai CSS).

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

Xaiv

Tsis tas li .form-controlntawd, cov ntawv ntab ntab tsuas muaj nyob rau ntawm .form-selects. Lawv ua hauj lwm tib yam, tab sis tsis zoo li <input>s, lawv yuav ib txwm qhia qhov <label>nyob rau hauv nws floated lub xeev. Xaiv nrog sizethiab multipletsis txaus siab.

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

Layout

Thaum ua haujlwm nrog Bootstrap grid system, nco ntsoov muab cov ntsiab lus tso rau hauv kab ntawv.

<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

Hloov pauv

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