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