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

0 دیدگاه

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

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Colored link</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 p-2">
            <h4>Colored links</h4><br>
            <p><a href="#" class="link-primary">Primary Color Link</a></p>
            <p><a href="#" class="link-secondary">Secondary Color Link</a></p>
            <p><a href="#" class="link-info">Info Color Link</a></p>
            <p><a href="#" class="link-success">Success Color Link</a></p>
            <p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p>
            <p><a href="#" class="link-dark">Dark Color Link</a></p>
            <p><a href="#" class="link-warning">Warning Color Link</a></p>
            <p><a href="#" class="link-danger">Danger Color Link</a></p>
            <p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Helper - Colored link</title>

</head>

<body>

<h4>Colored links</h4><br>

<p><a href="#" class="link-primary">Primary Color Link</a></p>

<p><a href="#" class="link-secondary">Secondary Color Link</a></p>

<p><a href="#" class="link-info">Info Color Link</a></p>

<p><a href="#" class="link-success">Success Color Link</a></p>

<p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p>

<p><a href="#" class="link-dark">Dark Color Link</a></p>

<p><a href="#" class="link-warning">Warning Color Link</a></p>

<p><a href="#" class="link-danger">Danger Color Link</a></p>

<p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p>

</div>

</body>

</html>

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

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

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

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

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

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

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

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

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

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

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

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

نظرات

دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ

انتشار: ۱۰ تیر ۱۴۰۴

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

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

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط