این بخش به مفهوم placeholder در بوت استرپ می پردازد. Placeholder به متنی یا تصویری موقتی گفته می شود که در یک فیلد ورودی یا کانتینر ظاهر می شود و تا زمانی که کاربر داده وارد کند یا محتوای اصلی بارگذاری شود، در جای خود باقی می ماند.
اگر در حال گذراندن دوره طراحی سایت با بوت استرپ هستید یا قصد دارید رابط های کاربری حرفه ای و مدرن طراحی کنید، آشنایی با نحوه استفاده از placeholder ها به شما کمک می کند ظاهر بخش های مختلف سایت را جذاب تر و کاربرپسندتر بسازید.
کاربرد اصلی placeholder ها ارائه راهنما یا نمونه ای از فرمت ورودی مورد انتظار است. این قابلیت تجربه کاربری برنامه را بهبود می دهد و امکان شخصی سازی بیشتری فراهم می کند.
نکات کلیدی:
-
زمانی که فیلد ورودی یا کانتینر خالی باشد، placeholder ظاهر می شود.
-
Placeholder ها سرنخ های بصری ارائه می دهند و باعث بهبود تجربه کاربری می شوند.
نحوه کار placeholder در بوت استرپ
- برای ایجاد placeholder کافی است از کلاس
.placeholderدر ترکیب با یک ستون شبکه (مانند.col-6برای تعیین عرض) استفاده کنید. - به محض این که کاربر محتوایی را در textarea وارد کند، placeholder محو می شود و داده های وارد شده به نمایش در می آید.
- برای حفظ ارتفاع، می توانید با pseudo-element
::beforeبه عنصر.btnsاستایل بدهید. - همچنین می توانید از همین الگو در موارد دیگر نیز استفاده کنید. در صورت نیاز برای مشخص کردن ارتفاع، می توانید
را داخل یک عنصر قرار دهید.
ایجاد placeholder
در ادامه یک مثال برای ایجاد placeholder آمده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Placeholders</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h4>Placeholders example</h4> <div class="card"> <img src="/bootstrap/images/template.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card without placeholders</h5> <p class="card-text">An example showing a card without the placeholders.</p> <a href="#" class="btn btn-primary">Go</a> </div> </div> <div class="card" aria-hidden="true"> <img src="/bootstrap/images/template.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title"> Card with placeholders </h5> <p class="card-text"> <span class="placeholder col-2"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span> <span class="placeholder col-5"></span> <span class="placeholder col-8"></span> </p> <a class="btn btn-primary disabled placeholder col-2"></a> </div> </div> </body> </html> |
برای این که placeholder را از دسترس صفحه خوان ها (screen reader) خارج کنید، باید از ویژگی aria-hidden="true" استفاده کنید. در ادامه یک مثال را مشاهده می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Placeholders</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h4>Placeholder hidden</h4> <p><span class="placeholder col-7"></span></p> <p><span class="placeholder col-4"></span></p> <p aria-hidden="true"> <span class="placeholder col-6"></span> </p> <span class="placeholder col-4"></span> </div> </body> </html> |
عرض Placeholder در بوت استرپ
می توانید عرض placeholder ها را با استفاده از کلاس های ستون شبکه (مانند col-6)، کلاس های کمکی (مانند w-50) یا استایل های درون خطی (مانند style="width: 75%;") تغییر دهید.
در ادامه یک مثال برای تغییر عرض placeholder مشاهده می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Placeholders</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h4>Placeholders example - width</h4> <p><span class="placeholder col-2"></span></p> <p><span class="placeholder col-4 w-25"></span></p> <p><span class="placeholder col-4 w-50"></span></p> <p><span class="placeholder" style="width: 75%;"></span></p> </div> </body> </html> |
رنگ Placeholder
می توانید به placeholder رنگ دلخواه بدهید؛ این کار را می توان با استفاده از رنگ سفارشی یا کلاس کمکی انجام داد. به طور پیش فرض، کلاس .placeholder از مقدار currentColor استفاده می کند.
در ادامه یک مثال برای تنظیم رنگ placeholder می بینیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Placeholders</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h4>Placeholders example - color</h4> <p><span class="placeholder col-7"></span></p> <p><span class="placeholder col-4 bg-primary"></span></p> <span class="placeholder col-4 bg-info"></span> <p><span class="placeholder col-6 bg-danger"></span></p> <p><span class="placeholder col-8 bg-warning"></span></p> </div> </body> </html> |
اندازه Placeholder در بوت استرپ
می توانید اندازه placeholder ها را با استفاده از کلاس های تغییر دهنده، مانند .placeholder-lg، .placeholder-sm یا .placeholder-xs سفارشی کنید. اندازه placeholder ها به استایل عنصر والد بستگی دارد.
در ادامه یک مثال از اندازه دهی placeholder ها را مشاهده می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Placeholders</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h4>Placeholders example - sizing</h4> <p><span class="placeholder col-2 "></span></p> <p><span class="placeholder col-4 placeholder-lg"></span></p> <p><span class="placeholder col-4 placeholder-sm"></span></p> <p><span class="placeholder col-6 placeholder-xs"></span></p> </div> </body> </html> |
افزودن انیمیشن به Placeholder
می توانید به placeholder ها انیمیشن اضافه کنید. برای این کار از کلاس های .placeholder-glow یا .placeholder-wave استفاده کنید.
در ادامه یک مثال برای افزودن انیمیشن به placeholder ها مشاهده می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Placeholders</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h4>Placeholders example - animation</h4> <!--placeholder-glow--> <p class="placeholder-glow"> <span class="placeholder col-10"></span> </p> <!--no animation--> <p><span class="placeholder col-10 "></span></p> <!--placeholder-wave--> <p class="placeholder-wave"> <span class="placeholder col-10"></span> </p> </div> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۸ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
