Негизги мазмунга өтүү Документтердин навигациясына өтүү
in English

Калкыма энбелгилер

Киргизүү талааларыңыздын үстүндө калкып турган сонун жөнөкөй форма энбелгилерин түзүңүз.

Бул бетте

Мисал

Bootstrap'тын тексттик форма талаалары менен калкып жүрүүчү энбелгилерди иштетүү үчүн бир жуп <input class="form-control">жана <label>элементтерди ороп алыңыз. .form-floatingАр биринде A placeholderкерек, <input>анткени биздин CSS гана калкып жүрүүчү энбелгилер псевдоэлементти колдонот :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>s автоматтык түрдө алардын калкыма абалына туура келет.

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

Textareas

Демейки боюнча, <textarea>s менен s менен .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(же ички же ыңгайлаштырылган 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>

Тандайт

дан башка калкып жүрүүчү энбелгилер s .form-controlбоюнча гана жеткиликтүү . .form-selectАлар ошол эле жол менен иштешет, бирок <input>s айырмаланып, алар ар дайым <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>

Макет

Bootstrap тор системасы менен иштөөдө форма элементтерин тилке класстарынын ичинде жайгаштырууну унутпаңыз.

<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

Өзгөрмөлөр

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