آموزش کلاس های کمکی لینک رنگی در بوت استرپ

در این بخش، ویژگی لینک رنگی در بوت استرپ بررسی می‌شود. در نسخه ۵ بوت استرپ می‌توان از کلاس های خاصی برای رنگی کردن لینک ها استفاده کرد. این ویژگی جلوه‌ای بصری و قابل توجه به عناصر لینک می‌دهد.

برای اعمال رنگ روی لینک ها، از کلاس های .link-* استفاده کنید. این کلاس ها برخلاف کلاس های .text-*، حالت های شناور (hover) و فوکوس (focus) را نیز پوشش می‌دهند. به همین دلیل، تعامل‌پذیری بیشتری ایجاد می‌کنند و تجربه کاربری بهتری فراهم می‌سازند. برای یادگیری بهتر و نحوه استفاده درست از آن‌ها، می‌توانید در یک دوره تخصصی بوت استرپ شرکت کنید.

اگر رنگ نوشته لینک نسبتاً روشن باشد، بهتر است آن را روی پس‌زمینه‌ای تیره قرار دهید. این کار باعث می‌شود که خوانایی لینک افزایش یابد و متن به‌راحتی دیده شود.

کلاس .link-body-emphasis تنها لینک رنگی خاص در بوت استرپ است که کنتراست بالایی دارد. این کلاس نیز دارای حالت های hover و focus اختصاصی است و برای زمانی مناسب است که بخواهید روی یک لینک تأکید بیشتری داشته باشید.

لینک های رنگی در کلاس های کمکی فریم ورک بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نکته‌ای درباره دسترسی پذیری: استفاده صرف از رنگ تنها یک نشانه بصری ایجاد می‌کند و برای کاربرانی که از فناوری های کمکی مانند صفحه‌خوان (screen reader) استفاده می‌کنند مفید نخواهد بود. بنابراین، حتماً مفهوم مورد نظر باید از طریق خود محتوا نیز قابل درک باشد، نه فقط با رنگ.

برای افزایش وضوح محتوا به‌ویژه برای کاربران با نیازهای خاص، می‌توانید از روش‌های جایگزین مانند کلاس .visually-hidden استفاده کنید.

ابزارهای کمکی لینک در بوت استرپ (Link Utilities)

فریم ورک بوت استرپ مجموعه‌ای از ابزارهای کاربردی برای کنترل ظاهر لینک ها ارائه می‌دهد. این ابزارها شامل تنظیم شفافیت لینک (link opacity)، فاصله از زیرخط (link offset)، رنگ زیرخط (underline color)، شفافیت زیرخط (underline opacity) و موارد دیگر هستند.

همچنین می‌توانید لینک های رنگی را با همین ابزارها سفارشی‌سازی کنید تا ظاهر دقیق‌تری مطابق با نیاز طراحی خود ایجاد کنید.

در ادامه یک نمونه را بررسی می‌کنیم:

ابزارهای کمکی لینک در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ
  • انتشار: ۱۰ تیر ۱۴۰۴

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید