الفرق بين المراجعتين ل"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 في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.