ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
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 ካርታ ውስጥ ይታወቃሉ፣ ከዚያም መገልገያዎቻችንን ለማምረት ያገለግላሉ።

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

መገልገያዎች ኤፒአይ

የአቀማመጥ መገልገያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scssየመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።

    "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%),
      )
    ),