Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

kayan etiketler

Giriş alanlarınız üzerinde yüzen güzel ve basit form etiketleri oluşturun.

Bu sayfada

Örnek

Bootstrap'in metinsel form alanlarıyla kayan etiketleri etkinleştirmek için bir çift <input class="form-control">ve <label>öğesini sarın. Yalnızca CSS kayan etiketler yöntemimiz sözde öğeyi kullandığından her biri için .form-floatingA placeholdergereklidir . Ayrıca kardeş seçiciyi kullanabilmemiz için önce gelmesi gerektiğine dikkat edin (örn . ).<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>

valueZaten tanımlı olduğunda, s <label>otomatik olarak kayan konumlarına ayarlanacaktır.

<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 doğrulama stilleri de beklendiği gibi çalışır.

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

metin alanları

Varsayılan olarak, <textarea>s with s ile .form-controlaynı yükseklikte olacaktır <input>.

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

üzerinde özel bir yükseklik ayarlamak için özniteliği <textarea>kullanmayın . rowsBunun yerine, açık bir height(satır içi veya özel CSS aracılığıyla) ayarlayın.

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

seçer

dışında .form-control, kayan etiketler yalnızca .form-selects'de kullanılabilir. Aynı şekilde çalışırlar, ancak <input>s'den farklı olarak, her zaman <label>kayan durumda gösterirler. ile seçer sizeve multipledesteklenmez.

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

Düzen

Bootstrap ızgara sistemiyle çalışırken, form öğelerini sütun sınıflarına yerleştirdiğinizden emin olun.

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

küstah

Değişkenler

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