لینک های رنگی
پیوند رنگ ها
می توانید استفاده کنید .link-* کلاس هایی برای رنگ آمیزی لینک ها بر خلاف .text-* کلاس ها، این کلاس ها دارای یک :hover و :focus دولت برخی از سبک‌های پیوند از رنگ پیش‌زمینه نسبتاً روشن استفاده می‌کنند و فقط باید در پس‌زمینه تیره استفاده شوند تا کنتراست کافی داشته باشند.
<p><a href="#" class="link-primary">Primary link</a></p><p><a href="#" class="link-secondary">Secondary link</a></p><p><a href="#" class="link-success">Success link</a></p><p><a href="#" class="link-danger">Danger link</a></p><p><a href="#" class="link-warning">Warning link</a></p><p><a href="#" class="link-info">Info link</a></p><p><a href="#" class="link-light">Light link</a></p><p><a href="#" class="text-body">Dark link</a></p><p><a href="#" class="link-body-emphasis mb-0">Emphasis link</a></p>
ابزارهای کمکی را پیوند دهید
پیوندهای رنگی را نیز می توان توسط ابزارهای پیوند ما تغییر داد.
<p><a href="#" class="link-primary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p><p><a href="#" class="link-secondary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p><p><a href="#" class="link-success link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p><p><a href="#" class="link-danger link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p><p><a href="#" class="link-warning link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p><p><a href="#" class="link-info link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p><p><a href="#" class="link-light link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p><p><a href="#" class="text-body link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p><p><a href="#" class="link-body-emphasis link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-75-hover mb-0">Emphasis link</a></p>
کدورت لینک
کدورت آلفای لینک را تغییر دهید rgba() ارزش رنگ با برنامه های کاربردی لطفاً توجه داشته باشید که تغییر در تیرگی رنگ می تواند منجر به پیوندهایی با آن شودناکافیکنتراست.
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p><p><a class="link-opacity-25" href="#">Link opacity 25</a></p><p><a class="link-opacity-50" href="#">Link opacity 50</a></p><p><a class="link-opacity-75" href="#">Link opacity 75</a></p><p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
Opacity Link Hover
حتی می توانید سطح Opacity را در شناور تغییر دهید.
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p><p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p><p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p><p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p><p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
زیر رنگ خط بکشید
رنگ زیر خط را مستقل از رنگ متن پیوند تغییر دهید.
<p><a href="#" class="text-decoration-underline link-underline-primary">Primary underline</a></p><p><a href="#" class="text-decoration-underline link-underline-secondary">Secondary underline</a></p><p><a href="#" class="text-decoration-underline link-underline-success">Success underline</a></p><p><a href="#" class="text-decoration-underline link-underline-danger">Danger underline</a></p><p><a href="#" class="text-decoration-underline link-underline-warning">Warning underline</a></p><p><a href="#" class="text-decoration-underline link-underline-info">Info underline</a></p><p><a href="#" class="text-decoration-underline link-underline-light">Light underline</a></p><p class="mb-0"><a href="#" class="text-decoration-underline link-underline-dark">Dark underline</a></p>
زیر شفافیت خط بکشید
تیرگی زیرخط را تغییر دهید. نیاز به افزودن دارد .link-underline برای اولین بار تنظیم کنید rgba() رنگی که برای تغییر کدورت آلفا استفاده می کنیم.
<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p><p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p><p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p><p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p><p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p><p class="mb-0"><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
زیر خط افست
فاصله زیر خط را از متن خود تغییر دهید. افست تنظیم شده است em واحدها به طور خودکار با جریان عنصر مقیاس شوند font-size .
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p><p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p><p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p><p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p><p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p><p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>