Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
in English

Plutajuće naljepnice

Stvorite prekrasno jednostavne oznake obrazaca koje lebde iznad vaših polja za unos.

Na ovoj stranici

Primjer

Zamotajte par elemenata <input class="form-control">i kako biste omogućili plutajuće oznake s Bootstrapovim tekstualnim poljima obrasca. A je potrebno na svakom jer naša metoda plutajućih oznaka samo za CSS koristi pseudoelement. Također imajte na umu da mora biti prvi kako bismo mogli koristiti srodni selektor (npr. ).<label>.form-floatingplaceholder<input>:placeholder-shown<input>~

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

Kada je valueveć definirano, <label>s će se automatski prilagoditi svom plutajućem položaju.

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

Stilovi provjere valjanosti obrasca također rade prema očekivanjima.

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

Područja teksta

Prema zadanim postavkama, <textarea>s .form-controlće biti iste visine kao <input>s.

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

Za postavljanje prilagođene visine na <textarea>, nemojte koristiti rowsatribut. Umjesto toga, postavite eksplicitan height(bilo ugrađen ili putem prilagođenog CSS-a).

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

Odaberite% s

Osim .form-control, plutajuće naljepnice dostupne su samo na .form-selects. Rade na isti način, ali za razliku od <input>s, uvijek će prikazati <label>u plutajućem stanju. Odabir s sizei multiplenisu podržani.

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

Izgled

Kada radite s Bootstrap grid sustavom, svakako postavite elemente obrasca unutar klasa stupaca.

<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

Varijable

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