Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Labels mitsingevana

Mamorona etikety endrika tsotra tsara tarehy izay mitsingevana eo amin'ny saha fampidiranao.

OHATRA

Afangaro ny singa roa <input class="form-control">sy ny <label>singa .form-floatingmba ahafahan'ny etikety mitsingevana miaraka amin'ny saha endrika soratra ao amin'ny Bootstrap. Ny A placeholderdia takiana amin'ny tsirairay <input>satria ny fomba fiasantsika amin'ny marika mitsingevana CSS ihany no mampiasa ny :placeholder-shownsinga pseudo. Mariho ihany koa fa ny <input>tsy maintsy ho tonga aloha mba ahafahantsika mampiasa mpifidy iray mpiray tam-po (oh, ~).

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

Rehefa misy valueefa voafaritra, <label>s dia hiova ho azy amin'ny toerana mitsingevana azy.

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

Miasa araka ny nantenaina ihany koa ny fomba fanamarinana ny endrika.

<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

Amin'ny alàlan'ny default, <textarea>ny s miaraka .form-controldia hitovy haavo amin'ny <input>s.

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

Raha hametraka haavo mahazatra amin'ny <textarea>, aza mampiasa ny rowstoetra. Fa kosa, mametraha mazava height(na inline na amin'ny alàlan'ny CSS mahazatra).

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

Mifantina

Ankoatra ny .form-control, ny etikety mitsingevana dia tsy misy afa-tsy amin'ny .form-selects. Mitovy ihany ny fiasan'izy ireo, fa tsy toy <input>ny s, dia asehon'izy ireo foana ny <label>ao anatin'ny toetrany mitsinkafona. Mifidy miaraka sizeary multipletsy tohanana.

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

fisehon'ny

Rehefa miasa miaraka amin'ny rafitra grid Bootstrap dia ataovy izay hametrahana singa endrika ao anatin'ny kilasy tsanganana.

<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

hiovaova

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