דלג לתוכן הראשי דלג לניווט במסמכים
Check
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}.

כאשר הנכס הוא אחד מ:

  • toptop- עבור המיקום האנכי
  • start- עבור המיקום האופקי left(ב-LTR)
  • bottombottom- עבור המיקום האנכי
  • end- עבור המיקום האופקי right(ב-LTR)

כאשר התפקיד הוא אחד מ:

  • 0- 0למיקום קצה
  • 50- 50%למיקום קצה
  • 100- 100%למיקום קצה

(תוכל להוסיף ערכי מיקום נוספים על ידי הוספת ערכים $position-valuesלמשתנה המפה של Sass.)

html
<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%)האלמנט אשר, בשילוב עם כלי עזר למיקום קצה, מאפשר לך לרכז אלמנט מוחלט.

html
<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מחלקות, ניתן למקם אלמנטים רק בכיוון אופקי או אנכי.

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

דוגמאות

הנה כמה דוגמאות מהחיים האמיתיים של שיעורים אלה:

html
<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" 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למשתנה.

html
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" aria-label="Progress" 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, ולאחר מכן משמשים ליצירת כלי השירות שלנו.

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

API של Utilities

כלי עזר למיקום מוצהרים ב-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%),
      )
    ),