Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Ba étiquettes oyo ezali ko flotter

Bosala ba étiquettes ya formulaire kitoko ya pete oyo ezo flotter likolo ya ba champs na yo ya entrée.

Na lokasa oyo

Ndakisa

Envelopper un paire ya <input class="form-control">mpe <label>ba éléments na mpo na .form-floatingko activer ba étiquettes flottantes na ba champs ya formulaire textuel ya Bootstrap. A placeholderesengeli na moko na moko <input>lokola méthode na biso ya ba étiquettes flottantes kaka CSS esalela :placeholder-shownpseudo-élément. Yeba mpe ete <input>esengeli koya liboso mpo ete tokoka kosalela moponi ya ndeko (ndakisa, ~).

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>

Tango ezali na valuedéjà défini, <label>s eko ajuster automatiquement na position flotté na bango.

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>

Ba styles ya validation ya formulaire esalaka pe ndenge esengelaki.

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>

Bisika ya makomi

Na ndenge ya libela, <textarea>s na .form-controlekozala na bosanda moko na <input>s.

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

Mpo na kotya hauteur personnalisé na yo <textarea>, kosalela rowsattribut te. Na esika ya kosala bongo, tia explicit height(ezala na kati to na nzela ya CSS personnalisé).

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>

Ezali kopona

Longola se .form-control, ba étiquettes flottantes ezali kaka na .form-selects. Basalaka ndenge moko, kasi na bokeseni na <input>s, bakomonisa ntango nyonso the <label>na état na yango ya flotteur. Eponi na sizempe multipleesungami te.

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>

Kotánga kaka makomi ya pɛtɛɛ

Ba étiquettes flottantes esungaka mpe .form-control-plaintext, oyo ekoki kozala na litomba mpo na kobongola uta na motuya oyo ekoki kobongisama <input>kino na motuya ya makomi ya polele kozanga ete ezala na bopusi likoló na ebongiseli ya lokasa.

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>

Bituluku ya bokɔtisi

Ba étiquettes flottantes mpe esalisaka .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>

Ntango ozali kosalela .input-groupmpe .form-floatingelongo na bondimi ya formulaire, -feedbackesengeli kotya yango na libándá ya .form-floating, kasi na kati ya .input-group. Yango elingi koloba ete ekosɛnga ete bálakisa makanisi oyo bakopesa na nzela ya javascript.

@
Svp pona kombo ya mosaleli.
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>

Kobongisa

Ntango ozali kosala na système ya grille Bootstrap, sala makasi otia ba éléments ya formulaire na kati ya ba classes ya colonne.

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>

Sass oyo azali

Ba variables oyo ezali

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