ቦታታት ዝሓዙ

ገለ ነገር ጌና ክጽዕን ከም ዝኽእል ንምምልካት ንኣካላትካ ወይ ገጻትካ ዝኸውን ናይ ምጽዓን ቦታታት ተጠቐም።

ኣብዚ ገጽ

ብዝዕባ

ንተመኩሮ መመልከቲኻ ንምዕባይ ቦታታት ቦታታት ክጥቀሙ ይኽእሉ። ብኤችቲኤምኤልን ሲኤስኤስን ጥራይ ዝተሃንጹ ኮይኖም፡ ንምፍጣሮም ዝኾነ ጃቫስክሪፕት ኣየድልየካን እዩ። ርኡይነቶም ንምቕያር ግን ገለ ብሕታዊ ጃቫስክሪፕት ከድልየካ እዩ። መልክዖምን ሕብሮምን ዓቐኖምን ብቐሊሉ ብናይ ዩቲሊቲ ክፍልታትና ክትመዓራረ ትኽእል ኢኻ።

ኣብነት

ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ሓደ ልሙድ ናይ ካርድ ኣካል ወሲድና፡ “ናይ ምጽዓን ካርድ” ንምፍጣር፡ ቦታታት ተግባራዊ ብምግባር ዳግማይ ንፈጥሮ። ዓቐንን መጠናትን ኣብ መንጎ ክልቲኦም ሓደ ዓይነት እዩ።

ኣርእስቲ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ናብ ሓደ ቦታ ኪድ

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

ከመይ ይሰርሕ

ነቲ . .placeholder_ .col-6_ widthኣብ ውሽጢ ሓደ ባእታ ንዘሎ ጽሑፍ ክትክእዎ ወይ ድማ ከም መቐየሪ ክፍሊ ኣብ ሓደ ዝጸንሐ ኣካል ክውሰኹ ይኽእሉ።

ንሕና ተወሳኺ ቅዲ ናብ .btns via ንተግብር ::beforeንምርግጋጽ እቲ heightይኽበር። ነዚ ቅዲ ከም ኣድላይነቱ ንኻልእ ኩነታት ከተናውሖ ትኽእል ኢኻ፣ ወይ ድማ  ኣብ ቦታኡ ጭቡጥ ጽሑፍ ክቐርብ ከሎ ነቲ ቁመት ንምንጽብራቕ ኣብ ውሽጢ እቲ ባእታ ሓደ ክትውስኽ ትኽእል ኢኻ።

html ዝብል ጽሑፍ ኣሎ።

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

ናይ ምጥቃም aria-hidden="true"እቲ ባእታ ንኣንበብቲ ስክሪን ክሕባእ ከም ዘለዎ ጥራይ እዩ ዘመልክት። ናይ ምጽዓን ባህሪ ናይቲ ቦታ መትሓዚ ኣብቲ ጸሓፍቲ ብጭቡጥ ቅዲታት ቦታ ብኸመይ ከም ዝጥቀሙሉ፡ ነገራት ብኸመይ ከዘምኑ ከም ዝሓስቡ ወዘተ ይምርኮስ።ገለ ናይ ጃቫስክሪፕት ኮድ ንኹነታት ናይቲ ቦታ ንምቕያርን ንተጠቀምቲ ኤቲ ብዛዕባ እቲ ምዕባለ ንምሕባርን ከድልዩ ይኽእሉ ።

ስፍሓት

widthናይ ብመንገዲ ሽቦ ዓምዲ ክፍልታት፣ ስፍሓት መገልገሊታት፣ ወይ ናይ ውሽጢ መስመር ቅዲታት ክትቅይሮም ትኽእል ኢኻ ።

html ዝብል ጽሑፍ ኣሎ።

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

ሕብሪ

ብነባሪ መልክዑ placeholder፡ እቶም currentColor. እዚ ብብሕታዊ ሕብሪ ወይ ዩቲሊቲ ክላስ ክግለጽ ይኽእል።

html ዝብል ጽሑፍ ኣሎ።

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

ሳይዚንግ ምግባር

ዓቐን .placeholders ኣብ ቅዲ ሕትመት ናይቲ ወላዲ ባእታ ዝተመርኮሰ እዩ። ብናይ ዓቐን መቐየሪታት ኣመዓራርዮም: .placeholder-lg, .placeholder-sm, ወይ .placeholder-xs.

html ዝብል ጽሑፍ ኣሎ።

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

ኣኒሜሽን

ንሓደ ነገር ብንጥፈት ይጽዓን ከምዘሎ ዘለዎ ኣረኣእያ ብዝበለጸ ንምትሕልላፍ .placeholder-glowወይ ንቦታታት ኣኒም ምግባር።.placeholder-wave

html ዝብል ጽሑፍ ኣሎ።

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

ሳስ

ተለዋዋጢ ረቛሒታት

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;