מצייני מקום

על אודות

ניתן להשתמש במצייני מיקום כדי לשפר את חוויית היישום שלך. הם בנויים רק עם HTML ו-CSS, כלומר אתה לא צריך שום JavaScript כדי ליצור אותם. עם זאת, תצטרך קצת JavaScript מותאם אישית כדי לשנות את הנראות שלהם. ניתן להתאים בקלות את המראה, הצבע והגודל שלהם בעזרת שיעורי השירות שלנו.

דוגמא

בדוגמה להלן, אנו לוקחים רכיב כרטיס טיפוסי ויוצרים אותו מחדש עם מצייני מיקום שיושמו כדי ליצור "כרטיס טעינה". הגודל והפרופורציות זהות בין השניים.

<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הוא מכבד. אתה יכול להרחיב את התבנית הזו למצבים אחרים לפי הצורך, או להוסיף  בתוך האלמנט כדי לשקף את הגובה כאשר הטקסט בפועל מוצג במקומו.

<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;