Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
in English

Plutajuće etikete

Kreirajte prelijepo jednostavne oznake obrazaca koje lebde iznad vaših polja za unos.

Na ovoj stranici

Primjer

Umotajte par elemenata i <input class="form-control">da biste omogućili plutajuće naljepnice 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 bratski 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 postoji valueveć definiran, <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 obrazaca također rade kako se očekuje.

<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

Podrazumevano, <textarea>s sa .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>

Da biste postavili prilagođenu visinu na vašem <textarea>, nemojte koristiti rowsatribut. Umjesto toga, postavite eksplicitni height(bilo umetnuti 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>

Odabire

Osim .form-control, plutajuće naljepnice dostupne su samo na .form-selects. Oni rade na isti način, ali za razliku od <input>s, uvijek će prikazati <label>u plutajućem stanju. Odabire sa 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>

Layout

Kada radite sa Bootstrap grid sistemom, obavezno 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;