Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

Плутајуће етикете

Креирајте прелепо једноставне ознаке образаца које лебде преко поља за унос.

На овој страници

Пример

Умотајте пар елемената и <input class="form-control">да бисте омогућили плутајуће ознаке са Боотстрап-овим текстуалним пољима обрасца. А је потребно на сваком јер наш метод плутајућих ознака само за ЦСС користи псеудоелемент. Такође имајте на уму да мора бити први да бисмо могли да користимо братски селектор (нпр. ).<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>

Када је valueвећ дефинисан, <label>с ће се аутоматски прилагодити свом плутајућем положају.

хтмл 
<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>

Стилови валидације обрасца такође функционишу како се очекује.

хтмл 
<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>

Тектареас

Подразумевано, <textarea>с витх .form-controlће бити исте висине као <input>с.

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

Да бисте подесили прилагођену висину на свом <textarea>, немојте користити rowsатрибут. Уместо тога, поставите експлицитни height(било уметнути или преко прилагођеног ЦСС-а).

хтмл 
<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>

Бира

Осим .form-control, плутајуће етикете су доступне само на .form-selectс. Они раде на исти начин, али за разлику од <input>с, увек ће приказивати <label>у плутајућем стању. Бира са sizeи multipleнису подржани.

хтмл 
<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>

Обичан текст само за читање

Плутајуће ознаке такође подржавају .form-control-plaintext, што може бити од помоћи за пребацивање са вредности која се може уређивати <input>на вредност отвореног текста без утицаја на изглед странице.

хтмл 
<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>

Групе уноса

Плутајуће налепнице такође подржавају .input-group.

@
хтмл 
<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>

Када користите .input-groupи .form-floatingзаједно са валидацијом обрасца, -feedbackтреба поставити изван .form-floating, али унутар .input-group. То значи да ће повратне информације морати да се приказују помоћу јавасцрипт-а.

@
Молимо одаберите корисничко име.
хтмл 
<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>

Лаиоут

Када радите са Боотстрап грид системом, обавезно поставите елементе обрасца унутар класа колона.

хтмл 
<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>

Сасс

Променљиве

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