Placeholder در Bootstrap صرفاً نشانه‌های بصری ساده نیستند؛ بلکه چارچوبی اسکلت‌گونه هستند برای محتوایی که هنوز بارگذاری نشده است. آن‌ها به‌طور مؤثری تجربه کاربری را بهبود می‌بخشند، با این کار که به کاربر نشان می‌دهند محتوا در راه است و از وضعیت‌های خالی و ناگهانی جلوگیری می‌کنند. آن‌ها مانند وعده‌ای بی‌صدا از اطلاعات عمل می‌کنند که با ظرافت فضای محتوا را پیش از رسیدن داده‌های واقعی پر می‌کنند.
این راهنمای جامع، شما را به‌طور کامل با دنیای Placeholderها در Bootstrap آشنا می‌کند و ساختار، گزینه‌های استایل‌دهی، قابلیت سفارشی‌سازی، نکات دسترسی‌پذیری و روش‌های خلاقانه پیاده‌سازی آن‌ها را بررسی می‌کند؛ فراتر از یک نشانگر ساده‌ی «در حال بارگذاری».
ساختار پایه‌ی Placeholder (.placeholder)
ساختار ابتدایی Placeholder در Bootstrap از طریق اعمال کلاس .placeholder روی عناصر بلوک یا درون‌خطی ایجاد می‌شود. این Placeholderها به‌صورت پیش‌فرض، اندازه فونت و رنگ عنصر والد را به ارث می‌برند.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap Placeholders</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h2>Basic Placeholders</h2>
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a href="#" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
نکات:
.placeholder: کلاس اصلی برای ایجاد بلوک خاکستری نیمه‌شفاف که نشانه بارگذاری است.- کلاس‌های
col-*: از سیستم گرید Bootstrap برای کنترل عرض Placeholder استفاده می‌شود. aria-hidden="true": ضروری برای دسترسی‌پذیری؛ چون Placeholderها محتوای واقعی نیستند و نباید توسط صفحه‌خوان‌ها خوانده شوند..disabledبرای دکمه‌ها: برای نشان دادن اینکه دکمه هنوز غیرفعال است.
کنترل عرض Placeholder با .col-*
می‌توانید از کلاس‌های گرید Bootstrap برای تنظیم عرض Placeholder استفاده کنید:
<h2>Placeholder Widths</h2>
<p aria-hidden="true">
<span class="placeholder col-12"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-10"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-8"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-4"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-2"></span>
</p>
رنگ‌بندی Placeholder با .bg-*
Bootstrap کلاس‌های رنگی مختلفی را برای تطبیق رنگ Placeholder با برند یا نوع محتوا ارائه می‌دهد:
<h2>Placeholder Colors</h2>
<p aria-hidden="true">
<span class="placeholder col-6 bg-primary"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6 bg-success"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6 bg-warning"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6 bg-danger"></span>
</p>
کنترل اندازه‌ی عمودی با .placeholder-lg, .placeholder-sm, .placeholder-xs
برای تغییر ارتفاع Placeholder از این کلاس‌ها استفاده می‌شود:
<h2>Placeholder Sizing</h2>
<p aria-hidden="true">
<span class="placeholder col-6 placeholder-lg"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6 placeholder-sm"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6 placeholder-xs"></span>
</p>
انیمیشن Placeholder با .placeholder-glow و .placeholder-wave
برای ایجاد حس «در حال بارگذاری بودن» واقعی، می‌توانید از افکت‌های متحرک استفاده کنید:
<h2>Animated Placeholders</h2>
<p aria-hidden="true">
<span class="placeholder col-6 placeholder-glow"></span>
</p>
<p aria-hidden="true">
<span class="placeholder col-6 placeholder-wave"></span>
</p>
<h3>Button with Animated Placeholder</h3>
<button type="button" class="btn btn-primary placeholder col-6 placeholder-wave" aria-hidden="true" disabled></button>
نکات دسترسی‌پذیری (Accessibility)
- همیشه از
aria-hidden="true"برای مخفی کردن Placeholderها از صفحه‌خوان استفاده کنید. - برای کاربرانی که دچار مشکلات بینایی هستند، از پیام‌های متنی نظیر “در حال بارگذاری…” به‌همراه
aria-live="polite"یاaria-busy="true"استفاده کنید. - در عناصر تعاملی مانند دکمه‌ها، حتی با وجود
.disabled، اطمینان حاصل کنید که وضعیت فوکوس مشخص است.
استراتژی‌های خلاقانه پیاده‌سازی Placeholder
فراتر از بلوک‌های خاکستری ساده:
شبیه‌سازی متن
<p aria-hidden="true">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
</p>
شبیه‌سازی تصویر
<div class="placeholder col-12 bg-secondary" style="height: 200px;"></div>
شبیه‌سازی کارت (Skeleton Card)
<div class="card" aria-hidden="true">
<img class="card-img-top placeholder col-12" alt="...">
<div class="card-body">
<h5 class="card-title placeholder col-6"></h5>
<p class="card-text placeholder col-8"></p>
<a href="#" class="btn btn-primary disabled placeholder col-4"></a>
</div>
</div>
شبیه‌سازی لیست
<ul class="list-group" aria-hidden="true">
<li class="list-group-item placeholder col-8"></li>
<li class="list-group-item placeholder col-6"></li>
</ul>
شبیه‌سازی فرم‌ها
می‌توان Placeholderها را در بالا یا پایین فیلدهای ورودی برای نمایش داده‌های در حال بارگذاری استفاده کرد.
بهترین روش‌ها (Best Practices)
- استفاده‌ی یکنواخت: برای یکپارچگی در ظاهر صفحات.
- شبیه‌سازی ساختار واقعی محتوا: Placeholder باید تا جای ممکن ساختار نهایی را بازتاب دهد.
- زمان بارگذاری کوتاه: Placeholderها نباید برای مدت طولانی باقی بمانند.
- بررسی عملکرد: اطمینان حاصل کنید که استفاده از Placeholderها باعث کاهش سرعت صفحه نشود.
- توجه به دسترسی‌پذیری: همیشه
aria-hidden="true"را رعایت کنید.
جمع‌بندی
Placeholder در Bootstrap ابزاری قدرتمند برای بهبود درک کاربر از عملکرد و تجربه‌ی بارگذاری محتوا هستند. آن‌ها امکان یک گذار نرم و بصری را فراهم می‌کنند و انتظارات کاربر را بهتر مدیریت می‌نمایند. با شناخت ساختار، گزینه‌های طراحی و توجه ویژه به دسترسی‌پذیری، می‌توانید رابط‌های کاربری حرفه‌ای‌تر و جذاب‌تری خلق کنید. از این «اسکلت پیش‌نمایش» استفاده کنید تا لحظات عدم قطعیت را به فرصت‌هایی برای تعامل بصری دلپذیر تبدیل نمایید.