אָרטהאָלדערס

וועגן

אָרטהאָלדערס קענען זיין געוויינט צו פאַרבעסערן די דערפאַרונג פון דיין אַפּלאַקיישאַן. זיי זענען געבויט בלויז מיט HTML און CSS, טייַטש איר טאָן ניט דאַרפֿן קיין דזשאַוואַסקריפּט צו שאַפֿן זיי. איר וועט, אָבער, דאַרפֿן עטלעכע מנהג דזשאַוואַסקריפּט צו באַשטימען זייער וויזאַביליטי. זייער אויסזען, קאָליר און סייזינג קענען זיין לייכט קאַסטאַמייזד מיט אונדזער נוצן קלאסן.

בייַשפּיל

אין דעם בייַשפּיל אונטן, מיר נעמען אַ טיפּיש קאָרט קאָמפּאָנענט און ריקריייט עס מיט אָרטהאָלדערס געווענדט צו שאַפֿן אַ "לאָודינג קאָרט". גרייס און פּראַפּאָרשאַנז זענען די זעלבע צווישן די צוויי.

<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ס דורך ::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>

ברייט

איר קענען טוישן די 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;