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

Διάταξη

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

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

Έντυπα

Κάθε ομάδα πεδίων φόρμας πρέπει να βρίσκεται σε ένα <form>στοιχείο. Το Bootstrap δεν παρέχει προεπιλεγμένο στυλ για το <form>στοιχείο, αλλά υπάρχουν ορισμένες ισχυρές δυνατότητες του προγράμματος περιήγησης που παρέχονται από προεπιλογή.

  • Νέος στις φόρμες του προγράμματος περιήγησης; Εξετάστε το ενδεχόμενο να ανατρέξετε στα έγγραφα της φόρμας MDN για μια επισκόπηση και πλήρη λίστα με τα διαθέσιμα χαρακτηριστικά.
  • <button>είναι μέσα σε μια <form>προεπιλογή σε type="submit", οπότε προσπαθήστε να είστε συγκεκριμένοι και να συμπεριλαμβάνετε πάντα ένα type.

Εφόσον το Bootstrap ισχύει display: blockκαι width: 100%σχεδόν σε όλα τα στοιχεία ελέγχου φορμών, οι φόρμες θα στοιβάζονται από προεπιλογή κάθετα. Μπορούν να χρησιμοποιηθούν πρόσθετες τάξεις για να διαφοροποιηθεί αυτή η διάταξη ανάλογα με τη φόρμα.

Βοηθητικά προγράμματα

Τα βοηθητικά προγράμματα περιθωρίου είναι ο ευκολότερος τρόπος για να προσθέσετε κάποια δομή σε φόρμες. Παρέχουν βασική ομαδοποίηση ετικετών, στοιχεία ελέγχου, προαιρετικό κείμενο φόρμας και μηνύματα επικύρωσης φόρμας. Συνιστούμε να τηρείτε τα margin-bottomβοηθητικά προγράμματα και να χρησιμοποιείτε μια ενιαία κατεύθυνση σε όλη τη φόρμα για συνέπεια.

Μη διστάσετε να δημιουργήσετε τις φόρμες σας όπως θέλετε, με <fieldset>s, <div>s ή σχεδόν οποιοδήποτε άλλο στοιχείο.

html 
<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

Πλέγμα φόρμας

Πιο πολύπλοκες φόρμες μπορούν να δημιουργηθούν χρησιμοποιώντας τις τάξεις πλέγματος μας. Χρησιμοποιήστε τα για διατάξεις φόρμας που απαιτούν πολλές στήλες, ποικίλα πλάτη και πρόσθετες επιλογές στοίχισης. Απαιτεί η $enable-grid-classesμεταβλητή Sass να είναι ενεργοποιημένη (ενεργοποιημένη από προεπιλογή).

html 
<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Υδρορροές

Προσθέτοντας κατηγορίες τροποποιητών υδρορροής , μπορείτε να έχετε τον έλεγχο του πλάτους της υδρορροής τόσο στην εν σειρά όσο και στην κατεύθυνση του μπλοκ. Απαιτεί επίσης $enable-grid-classesνα είναι ενεργοποιημένη η μεταβλητή Sass (ενεργοποιημένη από προεπιλογή).

html 
<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Μπορούν επίσης να δημιουργηθούν πιο σύνθετες διατάξεις με το σύστημα πλέγματος.

html 
<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Οριζόντια μορφή

Δημιουργήστε οριζόντιες φόρμες με το πλέγμα προσθέτοντας την .rowκλάση για να σχηματίσετε ομάδες και χρησιμοποιώντας τις .col-*-*κλάσεις για να καθορίσετε το πλάτος των ετικετών και των στοιχείων ελέγχου σας. Φροντίστε να προσθέσετε .col-form-labelκαι στα <label>s σας, ώστε να είναι κατακόρυφα στο κέντρο με τα συσχετισμένα στοιχεία ελέγχου φόρμας.

Μερικές φορές, ίσως χρειαστεί να χρησιμοποιήσετε βοηθητικά προγράμματα περιθωρίου ή padding για να δημιουργήσετε την τέλεια ευθυγράμμιση που χρειάζεστε. Για παράδειγμα, αφαιρέσαμε την padding-topετικέτα των στοιβαγμένων εισόδων ραδιοφώνου για να ευθυγραμμίσουμε καλύτερα τη γραμμή βάσης του κειμένου.

Ραδιόφωνα
html 
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Οριζόντια διαστασιολόγηση ετικετών

Βεβαιωθείτε ότι χρησιμοποιείτε .col-form-label-smή .col-form-label-lgστα <label>s ή <legend>s σας για να ακολουθείτε σωστά το μέγεθος του .form-control-lgκαι .form-control-sm.

html 
<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Μέγεθος στήλης

Όπως φαίνεται στα προηγούμενα παραδείγματα, το σύστημα πλέγματος μας σας επιτρέπει να τοποθετήσετε οποιονδήποτε αριθμό .cols μέσα σε ένα .row. Θα μοιράσουν το διαθέσιμο πλάτος εξίσου μεταξύ τους. Μπορείτε επίσης να επιλέξετε ένα υποσύνολο των στηλών σας για να καταλαμβάνει περισσότερο ή λιγότερο χώρο, ενώ οι υπόλοιπες .colμοιράζονται εξίσου τις υπόλοιπες, με συγκεκριμένες κατηγορίες στηλών όπως .col-sm-7.

html 
<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

Αυτόματη ρύθμιση μεγέθους

Το παρακάτω παράδειγμα χρησιμοποιεί ένα βοηθητικό πρόγραμμα flexbox για να κεντράρει κατακόρυφα τα περιεχόμενα και αλλάζει .colέτσι .col-autoώστε οι στήλες σας να καταλαμβάνουν μόνο όσο χώρο χρειάζεται. Με άλλα λόγια, η στήλη μεγεθύνεται με βάση τα περιεχόμενα.

@
html 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Στη συνέχεια, μπορείτε να το αναμίξετε ξανά με κατηγορίες στηλών για συγκεκριμένο μέγεθος.

@
html 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Ενσωματωμένες φόρμες

Χρησιμοποιήστε τις .row-cols-*κλάσεις για να δημιουργήσετε οριζόντιες διατάξεις με απόκριση. Προσθέτοντας κατηγορίες τροποποιητών υδρορροής , θα έχουμε υδρορροές σε οριζόντιες και κάθετες κατευθύνσεις. Σε στενές θύρες προβολής για κινητά, το .col-12βοηθά στη στοίβαξη των στοιχείων ελέγχου φόρμας και πολλά άλλα. Το .align-items-centerευθυγραμμίζει τα στοιχεία της φόρμας στη μέση, κάνοντας τη .form-checkσωστή ευθυγράμμιση.

@
html 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>