حلقه فوکوس
کلاس های کاربردی که به شما امکان می دهد سبک های حلقه فوکوس سفارشی را به عناصر و مؤلفه ها اضافه و تغییر دهید.
حلقه فوکوس روی بوت استرپمثال
Helper .focus-ringپیش‌فرض outlineon را حذف می‌کند :focus، و آن را با گزینه‌ای جایگزین می‌کند box-shadowکه می‌تواند به طور گسترده‌تری سفارشی‌سازی شود. سایه جدید از یک سری متغیرهای CSS ساخته شده است که از سطح به ارث رسیده اند :rootکه می توانند برای هر عنصر یا مؤلفه ای اصلاح شوند.
<a class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" href="#!">Custom focus ring</a>انواع
<p class="mb-4"><a class="focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2" href="#!">Primary focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2" href="#!">Secondary focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2" href="#!">Success focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2" href="#!">Danger focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2" href="#!">Warning focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2" href="#!">Info focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2" href="#!">Light focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2" href="#!">Dark focus</a></p>
