Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
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>~

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

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

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

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

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

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

Salt okunur düz metin

Kayan etiketler , sayfa düzenini etkilemeden .form-control-plaintextdüzenlenebilir bir değerden düz metin değerine geçiş yapmak için yardımcı olabilecek 'i de destekler.<input>

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

Giriş grupları

Kayan etiketler de destekler .input-group.

@
html 
<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-groupForm doğrulaması ile .form-floatingbirlikte kullanılırken , , -feedbacköğesinin dışına .form-floating, ancak .input-group. Bu, geri bildirimin javascript kullanılarak gösterilmesi gerekeceği anlamına gelir.

@
Lütfen bir kullanıcı adı seçin.
html 
<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>

Düzen

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

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

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;