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

Θέση

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

Τιμές θέσης

Οι τάξεις γρήγορης τοποθέτησης είναι διαθέσιμες, αν και δεν ανταποκρίνονται.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Τακτοποιήστε στοιχεία

Τακτοποιήστε τα στοιχεία εύκολα με τα βοηθητικά προγράμματα τοποθέτησης άκρων. Η μορφή είναι {property}-{position}.

Όπου το ακίνητο είναι ένα από:

  • top- για την κατακόρυφη topθέση
  • start- για την οριζόντια leftθέση (σε LTR)
  • bottom- για την κατακόρυφη bottomθέση
  • end- για την οριζόντια rightθέση (σε LTR)

Όπου η θέση είναι μία από:

  • 0- για 0θέση άκρης
  • 50- για 50%θέση άκρης
  • 100- για 100%θέση άκρης

(Μπορείτε να προσθέσετε περισσότερες τιμές θέσης προσθέτοντας καταχωρίσεις στη $position-valuesμεταβλητή χάρτη Sass.)

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Κεντρικά στοιχεία

Επιπλέον, μπορείτε επίσης να κεντράρετε τα στοιχεία με την κλάση βοηθητικού προγράμματος μετασχηματισμού .translate-middle.

Αυτή η κλάση εφαρμόζει τους μετασχηματισμούς translateX(-50%)και translateY(-50%)στο στοιχείο το οποίο, σε συνδυασμό με τα βοηθητικά προγράμματα τοποθέτησης ακμών, σας επιτρέπει να κεντράρετε απόλυτα ένα στοιχείο.

<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

Με την προσθήκη .translate-middle-xή .translate-middle-yκλάσεων, τα στοιχεία μπορούν να τοποθετηθούν μόνο σε οριζόντια ή κατακόρυφη κατεύθυνση.

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Παραδείγματα

Ακολουθούν μερικά πραγματικά παραδείγματα αυτών των τάξεων:

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

Μπορείτε να χρησιμοποιήσετε αυτές τις κλάσεις με υπάρχοντα στοιχεία για να δημιουργήσετε νέα. Θυμηθείτε ότι μπορείτε να επεκτείνετε τη λειτουργικότητά του προσθέτοντας καταχωρήσεις στη $position-valuesμεταβλητή.

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

Sass

Χάρτες

Οι τιμές του βοηθητικού προγράμματος προεπιλεγμένης θέσης δηλώνονται σε έναν χάρτη Sass και στη συνέχεια χρησιμοποιούνται για τη δημιουργία των βοηθητικών προγραμμάτων μας.

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

Utilities API

Τα βοηθητικά προγράμματα θέσης δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "position": (
      property: position,
      values: static relative absolute fixed sticky
    ),
    "top": (
      property: top,
      values: $position-values
    ),
    "bottom": (
      property: bottom,
      values: $position-values
    ),
    "start": (
      property: left,
      class: start,
      values: $position-values
    ),
    "end": (
      property: right,
      class: end,
      values: $position-values
    ),
    "translate-middle": (
      property: transform,
      class: translate-middle,
      values: (
        null: translate(-50%, -50%),
        x: translateX(-50%),
        y: translateY(-50%),
      )
    ),