الفرق بين المراجعتين لصفحة: «Bootstrap/breadcrumb»
طلا ملخص تعديل |
لا ملخص تعديل |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 2: | سطر 2: | ||
وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع. | وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع. | ||
== | == أمثلة == | ||
<syntaxhighlight lang="html"> | |||
<nav aria-label="breadcrumb"> | <nav aria-label="breadcrumb"> | ||
<ol class="breadcrumb"> | <ol class="breadcrumb"> | ||
| سطر 27: | سطر 27: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== تغيير الفواصل == | |||
تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين <code>[[CSS/::before|::before]]</code> و <code>[[CSS/content|content]]</code>. يمكن تغييرها عبر تغيير قيمة <code>$breadcrumb-divider</code>. الدالة <code>quote</code> ضرورية هنا لتوليد الاقتباسات حول السلاسل النصية، يمكنك استخدام المحرف <code><</code> كفاصل على النحو التالي:<syntaxhighlight lang="html"> | |||
$breadcrumb-divider: quote(">"); | |||
</syntaxhighlight>يمكنك أيضا استعمال '''أيقونات SVG مضمنة من النوع base64.'''<syntaxhighlight lang="html"> | |||
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+); | |||
</syntaxhighlight>يمكنك إزالة الفاصل عبر تعيين قيمة <code>$breadcrumb-divider</code> إلى <code>none</code>. | |||
== سهولة الوصول Accessibility == | == سهولة الوصول Accessibility == | ||
| سطر 34: | سطر 43: | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/components/breadcrumb/ صفحة Breadcrumb في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 16:57، 13 يوليو 2020
وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع.
أمثلة
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">الرئيسيّة</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسيّة</a></li>
<li class="breadcrumb-item active" aria-current="page">المكتبة</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسيّة</a></li>
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
</ol>
</nav>
تغيير الفواصل
تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين ::before و content. يمكن تغييرها عبر تغيير قيمة $breadcrumb-divider. الدالة quote ضرورية هنا لتوليد الاقتباسات حول السلاسل النصية، يمكنك استخدام المحرف < كفاصل على النحو التالي:
$breadcrumb-divider: quote(">");
يمكنك أيضا استعمال أيقونات SVG مضمنة من النوع base64.
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
يمكنك إزالة الفاصل عبر تعيين قيمة $breadcrumb-divider إلى none.
سهولة الوصول Accessibility
بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة (label) مفيدة مثل aria-label="breadcrumb" لوصف نوعيّة قائمة التنقّل ضمن العنصُر <nav> إضافةً إلى تطبيق التنسيق aria-current="page" على العنصُر الأخير من القائمة للإشارة إلى أنّه يمثّل الصفحة الحاليّة.
انظُر الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.