باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

شوێنگرەوەکان

شوێنهەڵگری بارکردن بۆ پێکهاتەکانت یان لاپەڕەکانت بەکاربهێنە بۆ ئەوەی ئاماژە بەوە بدەیت کە ڕەنگە شتێک هێشتا باردەکرێت.

لەم پەیجەدا

دەربارەی

دەتوانرێت شوێنهەڵگرەکان بەکاربهێنرێت بۆ بەرزکردنەوەی ئەزموونی بەرنامەکەت. تەنها بە HTML و CSS دروست کراون، واتە پێویستت بە هیچ جاڤاسکڕێپتێک نییە بۆ دروستکردنیان. بەڵام پێویستت بە هەندێک جاڤاسکڕێپتی تایبەت دەبێت بۆ گۆڕینی بینینیان. دەتوانرێت بە ئاسانی دەرکەوتن و ڕەنگ و قەبارەیان لەگەڵ پۆلەکانی خزمەتگوزارییەکانماندا خۆت دروست بکرێت.

نموونە

لە نموونەی خوارەوەدا، ئێمە پێکهاتەیەکی کارتێکی ئاسایی وەردەگرین و دووبارە دروستی دەکەینەوە بە شوێنگرەوەکان کە جێبەجێکراون بۆ دروستکردنی "کارتی بارکردن". قەبارە و ڕێژە لە نێوان ئەو دووانەدا وەک یەکن.

Placeholder
ناونیشانی کارت

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

بڕۆ شوێنێک 
<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ڕێزگرتن لە. دەتوانیت ئەم نەخشە درێژ بکەیتەوە بۆ بارودۆخەکانی تر بەپێی پێویست، یان زیاد بکەیت &nbsp;لەناو توخمەکەدا بۆ ڕەنگدانەوەی بەرزی کاتێک دەقی ڕاستەقینە لە شوێنی خۆیدا ڕەندەر دەکرێت.

<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"تەنها ئاماژەیە بۆ ئەوەی کە توخمەکە دەبێ بۆ خوێنەرانی شاشە بشاردرێتەوە. هەڵسوکەوتی بارکردنی شوێنگرەکە بەندە بەوەوە کە نووسەران چۆن لە ڕاستیدا شێوازەکانی شوێنگرەکان بەکاردەهێنن، چۆن پلانیان هەیە شتەکان نوێ بکەنەوە و هتد. ڕەنگە هەندێک کۆدی جاڤاسکڕێپت پێویست بێت بۆ گۆڕینەوەی دۆخی شوێنگرەکە و ئاگادارکردنەوەی بەکارهێنەرانی AT لە نوێکردنەوەکە.

پانی

دەتوانیت 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>

قەبارەدانان

قەبارەی .placeholders لەسەر بنەمای شێوازی تایپۆگرافی توخمە باوکەکە دامەزراوە. بە دەستکاریکەری قەبارەدانان خۆکارانەیان بکە: .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;