אָרטהאָלדערס
ניצן לאָודינג אָרטהאָלדערס פֿאַר דיין קאַמפּאָונאַנץ אָדער בלעטער צו אָנווייַזן אַז עפּעס קען נאָך זיין לאָודינג.
וועגן
אָרטהאָלדערס קענען זיין געוויינט צו פאַרבעסערן די דערפאַרונג פון דיין אַפּלאַקיישאַן. זיי זענען געבויט בלויז מיט 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>
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;