Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
in English

Πλωτές ετικέτες

Δημιουργήστε όμορφα απλές ετικέτες φόρμας που επιπλέουν πάνω από τα πεδία εισαγωγής σας.

Σε αυτήν την σελίδα

Παράδειγμα

Τυλίξτε ένα ζεύγος <input class="form-control">και <label>στοιχεία για .form-floatingνα ενεργοποιήσετε τις αιωρούμενες ετικέτες με τα πεδία κειμενικής φόρμας του Bootstrap. Απαιτείται Α placeholderσε καθεμία <input>καθώς η μέθοδος μας για κινητή ετικέτες μόνο για CSS χρησιμοποιεί το :placeholder-shownψευδοστοιχείο. Σημειώστε επίσης ότι το <input>must είναι πρώτο για να μπορούμε να χρησιμοποιήσουμε έναν επιλογέα αδερφού (π.χ., ~).

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>

Όταν υπάρχει ένα valueήδη καθορισμένο, <label>τα s θα προσαρμοστούν αυτόματα στην αιωρούμενη θέση τους.

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>

Τα στυλ επικύρωσης φόρμας λειτουργούν επίσης όπως αναμένεται.

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>

Τεξταρέας

Από προεπιλογή, <textarea>το s με .form-controlθα έχει το ίδιο ύψος με το <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>

Για να ορίσετε ένα προσαρμοσμένο ύψος στο <textarea>, μην χρησιμοποιείτε το rowsχαρακτηριστικό. Αντίθετα, ορίστε ένα ρητό height(είτε ενσωματωμένο είτε μέσω προσαρμοσμένου CSS).

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>

Επιλέγει

Εκτός από το .form-control, οι αιωρούμενες ετικέτες είναι διαθέσιμες μόνο στο .form-selects. Λειτουργούν με τον ίδιο τρόπο, αλλά σε αντίθεση με <input>το s, θα εμφανίζουν πάντα το <label>σε κατάσταση αιώρησης. Επιλέγει με sizeκαι multipleδεν υποστηρίζονται.

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>

Απλό κείμενο μόνο για ανάγνωση

Οι αιωρούμενες ετικέτες υποστηρίζουν επίσης .form-control-plaintextτο , το οποίο μπορεί να είναι χρήσιμο για την εναλλαγή από μια επεξεργάσιμη <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>

Ομάδες εισόδου

Οι πλωτές ετικέτες υποστηρίζουν επίσης .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-groupκαι .form-floatingμαζί με την επικύρωση φόρμας, το -feedbackθα πρέπει να τοποθετείται έξω από το .form-floating, αλλά μέσα στο .input-group. Αυτό σημαίνει ότι τα σχόλια θα πρέπει να εμφανίζονται χρησιμοποιώντας javascript.

@
Επιλέξτε ένα όνομα χρήστη.
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>

Διάταξη

Όταν εργάζεστε με το σύστημα πλέγματος Bootstrap, φροντίστε να τοποθετήσετε στοιχεία φόρμας μέσα σε κατηγορίες στηλών.

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

Μεταβλητές

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