ቦታታት ዝሓዙ
ገለ ነገር ጌና ክጽዕን ከም ዝኽእል ንምምልካት ንኣካላትካ ወይ ገጻትካ ዝኸውን ናይ ምጽዓን ቦታታት ተጠቐም።
ብዝዕባ
ንተመኩሮ መመልከቲኻ ንምዕባይ ቦታታት ቦታታት ክጥቀሙ ይኽእሉ። ብኤችቲኤምኤልን ሲኤስኤስን ጥራይ ዝተሃንጹ ኮይኖም፡ ንምፍጣሮም ዝኾነ ጃቫስክሪፕት ኣየድልየካን እዩ። ርኡይነቶም ንምቕያር ግን ገለ ብሕታዊ ጃቫስክሪፕት ከድልየካ እዩ። መልክዖምን ሕብሮምን ዓቐኖምን ብቐሊሉ ብናይ ዩቲሊቲ ክፍልታትና ክትመዓራረ ትኽእል ኢኻ።
ኣብነት
ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ሓደ ልሙድ ናይ ካርድ ኣካል ወሲድና፡ “ናይ ምጽዓን ካርድ” ንምፍጣር፡ ቦታታት ተግባራዊ ብምግባር ዳግማይ ንፈጥሮ። ዓቐንን መጠናትን ኣብ መንጎ ክልቲኦም ሓደ ዓይነት እዩ።
<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
ኣብ ውሽጢ ሓደ ባእታ ንዘሎ ጽሑፍ ክትክእዎ ወይ ድማ ከም መቐየሪ ክፍሊ ኣብ ሓደ ዝጸንሐ ኣካል ክውሰኹ ይኽእሉ።
ንሕና ተወሳኺ ቅዲ ናብ .btn
s via ንተግብር ::before
ንምርግጋጽ እቲ height
ይኽበር። ነዚ ቅዲ ከም ኣድላይነቱ ንኻልእ ኩነታት ከተናውሖ ትኽእል ኢኻ፣ ወይ ድማ
ኣብ ቦታኡ ጭቡጥ ጽሑፍ ክቐርብ ከሎ ነቲ ቁመት ንምንጽብራቕ ኣብ ውሽጢ እቲ ባእታ ሓደ ክትውስኽ ትኽእል ኢኻ።
<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
ናይ ብመንገዲ ሽቦ ዓምዲ ክፍልታት፣ ስፍሓት መገልገሊታት፣ ወይ ናይ ውሽጢ መስመር ቅዲታት ክትቅይሮም ትኽእል ኢኻ ።
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
ሕብሪ
ብነባሪ መልክዑ placeholder
፡ እቶም currentColor
. እዚ ብብሕታዊ ሕብሪ ወይ ዩቲሊቲ ክላስ ክግለጽ ይኽእል።
<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>
ሳይዚንግ ምግባር
ዓቐን .placeholder
s ኣብ ቅዲ ሕትመት ናይቲ ወላዲ ባእታ ዝተመርኮሰ እዩ። ብናይ ዓቐን መቐየሪታት ኣመዓራርዮም: .placeholder-lg
, .placeholder-sm
, ወይ .placeholder-xs
.
<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
<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;