Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Naglutaw nga mga label

Paghimo matahum nga yano nga mga label sa porma nga naglutaw sa imong mga input field.

Pananglitan

I-wrap ang usa ka parisan sa <input class="form-control">ug <label>mga elemento .form-floatingaron mahimo ang naglutaw nga mga label nga adunay mga field sa textual nga porma sa Bootstrap. A placeholdergikinahanglan sa matag usa <input>kay ang among pamaagi sa CSS-only floating labels naggamit sa :placeholder-shownpseudo-element. Timan-i usab nga ang <input>kinahanglan nga mag-una aron makagamit kami usa ka tigpili sa igsoon (pananglitan, ~).

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

Kung aduna valuenay gihubit, <label>s awtomatik nga mag-adjust sa ilang gilutaw nga posisyon.

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

Ang mga istilo sa pag-validate sa porma nagtrabaho usab sama sa gipaabut.

<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

Sa kasagaran, <textarea>ang s nga adunay .form-controlparehas nga gitas-on sa <input>s.

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

Para magbutang ug custom height sa imong <textarea>, ayaw gamita ang rowsattribute. Hinunoa, pagtakda og klaro height(bisan inline o pinaagi sa custom 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>

Nagpili

Gawas sa .form-control, ang naglutaw nga mga label anaa ra sa .form-selects. Nagtrabaho sila sa parehas nga paagi, apan dili sama <input>sa s, kanunay nilang ipakita ang <label>sa naglutaw nga kahimtang niini. Gipili nga adunay sizeug multiplewala gisuportahan.

<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

Kung nagtrabaho kauban ang Bootstrap grid system, siguruha nga ibutang ang mga elemento sa porma sulod sa mga klase sa kolum.

<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

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;