الفرق بين المراجعتين ل"Bootstrap/breadcrumb"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 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|{{SUBPAGENAME}}]] | [[تصنيف: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 في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.