الفرق بين المراجعتين لصفحة: «Bootstrap/breadcrumb»
إضافة عنوان |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:عناصر التنقّل Breadcrumb في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:عناصر التنقّل Breadcrumb في إطار العمل Bootstrap}}</noinclude> | ||
وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع. | |||
== أمثلة == | |||
<syntaxhighlight lang="html"> | |||
<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> | |||
</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 == | |||
بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة (label) مفيدة مثل <code>aria-label="breadcrumb"</code> لوصف نوعيّة قائمة التنقّل ضمن العنصُر <code>[[HTML/nav|<nav>]]</code> إضافةً إلى تطبيق التنسيق <code>aria-current="page"</code> على العنصُر الأخير من القائمة للإشارة إلى أنّه يمثّل الصفحة الحاليّة. | |||
انظُر [https://www.w3.org/TR/wai-aria-practices/#breadcrumb الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل] للمزيد من التفاصيل. | |||
== مصادر == | |||
* [https://getbootstrap.com/docs/4.5/components/breadcrumb/ صفحة Breadcrumb في توثيق 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 في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.