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

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

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

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

Παράδειγμα

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

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

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;