Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
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>

Майдонҳо

Бо нобаёнӣ, <textarea>s бо .form-controlбаландии <input>s хоҳад буд.

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

Интихоб мекунад

Ба ғайр аз .form-control, тамғакоғазҳои шинокунанда танҳо дар .form-selects дастрасанд. Онҳо ҳамон тавр кор мекунанд, аммо бар хилофи <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>

Сасс

Тағйирёбандаҳо

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