Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Etîketên floating

Etîketên formên xweşik ên hêsan ên ku li ser qadên têketina we diherikin biafirînin.

Li ser vê rûpelê

Mînak

Cotek <input class="form-control">û <label>hêmanan tê de bipêçin .form-floatingda ku etîketên herikîn bi qadên forma tekstî ya Bootstrap-ê çalak bikin. A placeholderli ser her yekê hewce ye ji <input>ber ku rêbaza me ya etîketên herikîn tenê CSS-ê :placeholder-shownpseudo-hêman bikar tîne. Di heman demê de bala xwe bidin ku <input>divê pêşî were da ku em bikarin hilbijêrek xwişk û birayên xwe bikar bînin (mînak, ~).

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

Gava ku valuejixwe diyarkirî hebe, <label>s dê bixweber li pozîsyona xweya rijand eyar bike.

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

Şêweyên pejirandina formê jî wekî ku tê hêvî kirin dixebitin.

<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

Ji hêla xwerû ve, <textarea>s bi .form-controldê heman bilindahiya <input>s be.

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

Ji bo danîna bilindahiya xwerû li ser xwe <textarea>, taybetmendiyê bikar rowsneynin. Di şûna wê de, diyariyek eşkere saz bikin height(an bi navgîniyê an bi CSS-ya xwerû).

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

Hilbijêre

Ji bilî .form-control, etîketên herikîn tenê li ser .form-selects hene. Ew bi heman rengî dixebitin, lê berevajî <input>s, ew ê her <label>gav di rewşa wê ya gemar de nîşan bidin. Hilbijêre bi sizeû multiplenayê piştgirî kirin.

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

Rêz

Dema ku bi pergala tora Bootstrap re dixebitin, pê ewle bin ku hêmanên formê di nav çînên stûnê de bi cîh bikin.

<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

Variables

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