اسناد و نمونههایی برای نشانها، تعداد کوچک و جزء برچسبگذاری ما.
مثال
مدالها برای مطابقت با اندازه عنصر والد فوری با استفاده از اندازه قلم و emواحدهای نسبی مقیاس می شوند.
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
عنوان مثالجدید
نشان ها را می توان به عنوان بخشی از پیوندها یا دکمه ها برای ارائه شمارنده استفاده کرد.
توجه داشته باشید که بسته به نحوه استفاده از آنها، نشان ها ممکن است برای کاربران صفحه خوان و فناوری های کمکی مشابه گیج کننده باشند. در حالی که طراحی نشان ها نشانه ای بصری در مورد هدف آنها ارائه می دهد، این کاربران به سادگی با محتوای نشان ارائه می شوند. بسته به موقعیت خاص، این نشان ها ممکن است مانند کلمات یا اعداد تصادفی اضافی در انتهای یک جمله، پیوند یا دکمه به نظر برسند.
مگر اینکه زمینه واضح باشد (مانند مثال «اعلانها»، جایی که فهمیده میشود که «4» تعداد اعلانها است)، در نظر بگیرید که زمینه اضافی را با یک قطعه متن اضافی پنهان بصری اضافه کنید.
تغییرات متنی
برای تغییر ظاهر یک نشان، هر یک از کلاس های اصلاح کننده زیر را اضافه کنید.
اولیهثانویموفقیتخطرهشداراطلاعاتسبکتاریک
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.
نشان های قرص
از .badge-pillکلاس اصلاح کننده برای گردتر کردن نشان ها (با یک border-radiusافقی بزرگتر و اضافی padding) استفاده کنید. اگر نشان های نسخه 3 را از دست بدهید مفید است.
اولیهثانویموفقیتخطرهشداراطلاعاتسبکتاریک
پیوندها
.badge-*استفاده از کلاسهای متنی روی یک <a>عنصر به سرعت نشانهای قابل اجرا با حالتهای شناور و فوکوس ارائه میکند.