الفرق بين المراجعتين لصفحة: «Bootstrap/navbar»
لا ملخص تعديل |
لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:شرائط التنقّل في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:شرائط التنقّل في إطار العمل Bootstrap}}</noinclude> | ||
تعرَّف على مكوِّن شرائط التنقّل القويّ والمرن الذي يقدّمه إطار العمل Bootstrap. يدعم شريط التنقّل في Bootstrap الهويّة التجاريّة | تعرَّف على مكوِّن شرائط التنقّل القويّ والمرن الذي يقدّمه إطار العمل Bootstrap. يدعم شريط التنقّل في Bootstrap الهويّة التجاريّة (branding)، وعناصر التنقّل وأمورًا أخرى تتعرّض لها صفحة التوثيق هذه. | ||
== آليّة العمل == | == آليّة العمل == | ||
في ما يلي أمور ينبغي الانتباه إليها قبل البدء في استخدام شريط التنقّل في Bootstrap: | في ما يلي أمور ينبغي الانتباه إليها قبل البدء في استخدام شريط التنقّل في Bootstrap: | ||
* تجب إضافة الأصناف <code>.navbar-expand{-sm|-md|-lg|-xl}</code> إلى صنف شريط التنقّل (<code>.navbar</code>) للحصول على تقليص متجاوب لشرائط التنقّل ولاستخدام أصناف تخطيط الألوان (انظر أدناه). | * تجب إضافة الأصناف <code>.navbar-expand{-sm|-md|-lg|-xl}</code> إلى صنف شريط التنقّل (<code>.navbar</code>) للحصول على تقليص متجاوب لشرائط التنقّل ولاستخدام أصناف تخطيط الألوان (انظر أدناه). | ||
* شرائط التنقّل ومحتواها مائعة Fluid مبدئيّا. استخدم حاويّات اختيّاريّة إن أردت | * شرائط التنقّل ومحتواها مائعة Fluid مبدئيّا. استخدم حاويّات اختيّاريّة إن أردت وضع حد على تمدّدها الأفقي (انظر أدناه). | ||
* استخدم [[Bootstrap/spacing|أدوات التباعد]] و[[Bootstrap/flex|أدوات Flex]] للتحكّم في المساحة الفارغة والمحاذاة داخل شرائط التنقّل. | * استخدم [[Bootstrap/spacing|أدوات التباعد]] و[[Bootstrap/flex|أدوات Flex]] للتحكّم في المساحة الفارغة والمحاذاة داخل شرائط التنقّل. | ||
* شرائط التنقّل متجاوبة مبدئيًّا، إلّا أنّه يمكن تعديل هذه الميزة بسهولة. يعتمد السلوك المتجاوب لشرائط التنقّل على مُلحَق JavaScript | * شرائط التنقّل متجاوبة مبدئيًّا، إلّا أنّه يمكن تعديل هذه الميزة بسهولة. يعتمد السلوك المتجاوب لشرائط التنقّل على مُلحَق JavaScript الخاص بمكوِّن الطيّ (Collapse). | ||
* تُخفَى شرائط التنقّل مبدئيًّا عند الطباعة. يمكن تعديل هذا الإعداد بإضافة الصنف <code>.d-print</code> إلى <code>.navbar</code>. راجع [[Bootstrap/display|أداة العرض] لمعلومات أكثر. | * تُخفَى شرائط التنقّل مبدئيًّا عند الطباعة. يمكن تعديل هذا الإعداد بإضافة الصنف <code>.d-print</code> إلى <code>.navbar</code>. راجع [[Bootstrap/display|أداة العرض display]] لمعلومات أكثر. | ||
* اضمن سهولة الوصول باستخدام عناصر <code><nav></code> أو إضافة الخاصيّة <code>role="navigation"</code> عند استخدام عنصُر عامّ (مثل <code><div></code>) إلى كلّ شريط تنقّل، لمساعدة الزوّار مستخدمي التقنيّات المساعدة. | * اضمن سهولة الوصول باستخدام عناصر <code>[[HTML/nav|<nav>]]</code> أو إضافة الخاصيّة <code>role="navigation"</code> عند استخدام عنصُر عامّ (مثل <code>[[HTML/div|<div>]]</code>) إلى كلّ شريط تنقّل، لمساعدة الزوّار مستخدمي التقنيّات المساعدة. | ||
واصل القراءة للحصول على أمثلة وقائمة بالمكوِّنات الفرعيّة المدعومة. | واصل القراءة للحصول على أمثلة وقائمة بالمكوِّنات الفرعيّة المدعومة. | ||
== المحتوى المدعوم == | == المحتوى المدعوم == | ||
| سطر 23: | سطر 23: | ||
<a class="navbar-brand" href="#">شريط تنقّل</a> | <a class="navbar-brand" href="#">شريط تنقّل</a> | ||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
<span class="navbar-toggler-icon"></span> | |||
</button> | |||
<span class="navbar-toggler-icon"></span> | <span class="navbar-toggler-icon"></span> | ||
</button> | </button> | ||
| سطر 57: | سطر 59: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
يستخدم هذا المثال أصناف [[Bootstrap/colors|الألوان]] (<code>bg-light</code>) و[[Bootstrap/spacing | التباعد]] (<code>my-2</code>، و<code>my-lg-0</code>، و<code>mr-sm-0</code> و<code>my-sm-0</code>) الخدميّة. | يستخدم هذا المثال أصناف [[Bootstrap/colors|الألوان]] (<code>bg-light</code>) و[[Bootstrap/spacing | التباعد]] (<code>my-2</code>، و<code>my-lg-0</code>، و<code>mr-sm-0</code> و<code>my-sm-0</code>) الخدميّة. | ||
=== الهويّة | === الهويّة التجارية === | ||
يعمل الصنف <code>.navbar-brand</code> على أغلب العناصر؛ إلّا أنّ الروابط (<code><a></code>) هي المُرشّح الأفضل لتطبيقه عليها، إذ تحتاج بعضُ العناصر لأصناف خدميّة أو أنماط مُخصَّصة. | يعمل الصنف <code>.navbar-brand</code> على أغلب العناصر؛ إلّا أنّ الروابط (<code>[[HTML/a|<a>]]</code>) هي المُرشّح الأفضل لتطبيقه عليها، إذ تحتاج بعضُ العناصر لأصناف خدميّة أو أنماط مُخصَّصة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<!-- استخدام رابط --> | <!-- استخدام رابط --> | ||
| سطر 70: | سطر 72: | ||
</nav> | </nav> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
تحتاج الصوّر غالبًا عند إضافتها ضمن الصنف <code>.navbar-brand</code> إلى تنسيقات مُخصَّصة وأدوات لتحديد أبعادها الصحيحة. في ما يلي أمثلةٌ للتوضيح. | تحتاج الصوّر غالبًا عند إضافتها ضمن الصنف <code>.navbar-brand</code> إلى تنسيقات مُخصَّصة وأدوات لتحديد أبعادها الصحيحة. في ما يلي أمثلةٌ للتوضيح. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<!-- صورة فقط --> | <!-- صورة فقط --> | ||
| سطر 88: | سطر 90: | ||
</nav> | </nav> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== عناصر | === عناصر التنقل === | ||
تُبنَى روابط التنقّل في شرائط التنقّل بالاعتماد على الخيّارات التي يقدّمها مكوِّن عناصر التنقّل واستخدام أصناف مُعدِّلة مخصوصة. تتطلّب روابط التنقّل استخدام أصناف التبديل (انظُر أدناه) لتنسيق متجاوب. '''تتمدّد عناصر التنقّل في شريط التنقّل لاحتلال أكبر مساحة أفقيّة ممكنة '''للإبقاء على محتويات شريط التنقّل محاذاة على نحو آمن. | تُبنَى روابط التنقّل في شرائط التنقّل بالاعتماد على الخيّارات التي يقدّمها مكوِّن عناصر التنقّل واستخدام أصناف مُعدِّلة مخصوصة. تتطلّب روابط التنقّل استخدام أصناف التبديل (انظُر أدناه) لتنسيق متجاوب. '''تتمدّد عناصر التنقّل في شريط التنقّل لاحتلال أكبر مساحة أفقيّة ممكنة '''للإبقاء على محتويات شريط التنقّل محاذاة على نحو آمن. | ||
يمكن تطبيق الصنف <code>.active</code> مباشرة على روابط التنقّل (<code>.nav-link</code>) أو آبائها المباشرين (<code>.nav-item</code>) للإشارة إلى الصفحة الحاليّة. | يمكن تطبيق الصنف <code>.active</code> مباشرة على روابط التنقّل (<code>.nav-link</code>) أو آبائها المباشرين (<code>.nav-item</code>) للإشارة إلى الصفحة الحاليّة. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 175: | سطر 178: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
استخدم | يستخدم الأبناء المباشرون في <code>.navbar</code> الخطاطة المنسابة flex، أما قيمتها الافتراضية فهي <code>justify-content: space-between</code>. استخدم [[Bootstrap/utilities for layout|أدوات flex الإضافية]] لتعديل السلوك. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<nav class="navbar navbar-light bg-light | <nav class="navbar navbar-light bg-light"> | ||
<a class="navbar-brand"> | <a class="navbar-brand">Navbar</a> | ||
<form class="form-inline"> | <form class="form-inline"> | ||
<input class="form-control mr-sm-2" type="search" placeholder=" | <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> | ||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> | <button class="btn btn-outline-success my-2 my-sm-0" type="submit">بحث</button> | ||
</form> | </form> | ||
</nav> | </nav> | ||
| سطر 194: | سطر 197: | ||
<span class="input-group-text" id="basic-addon1">@</span> | <span class="input-group-text" id="basic-addon1">@</span> | ||
</div> | </div> | ||
<input type="text" class="form-control" placeholder="اسم المستخدم" aria-label=" | <input type="text" class="form-control" placeholder="اسم المستخدم" aria-label="Username" aria-describedby="basic-addon1"> | ||
</div> | </div> | ||
</form> | </form> | ||
| سطر 208: | سطر 211: | ||
</nav> | </nav> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== | === النص === | ||
يمكن أن تتضمّن شرائط التنقّل نصوصًا بفضل الصنف<code>.navbar-text</code> الذي يصحّح المحاذاة العموديّة والتباعد الأفقيّ بالنسبة لسلاسل المحارف. | يمكن أن تتضمّن شرائط التنقّل نصوصًا بفضل الصنف<code>.navbar-text</code> الذي يصحّح المحاذاة العموديّة والتباعد الأفقيّ بالنسبة لسلاسل المحارف. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 243: | سطر 246: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مُخطَّطات الألوان == | == مُخطَّطات الألوان == | ||
من السهل جدًّا تخصيص مظهر شائط التنقّل، بفضل المزج بين أصناف المظهر وأدوات ألوان الخلفيّة (<code>background-color</code>). اختر بين <code>.navbar-light</code> لألوان خلفيّة مضيئة و<code>.navbar-dark</code> لألوان خلفيّة غامقة؛ ثم خصّص المظهر بالأصناف <code>.bg-*</code>. | من السهل جدًّا تخصيص مظهر شائط التنقّل، بفضل المزج بين أصناف المظهر وأدوات ألوان الخلفيّة (<code>[[CSS/background-color|background-color]]</code>). اختر بين <code>.navbar-light</code> لألوان خلفيّة مضيئة و<code>.navbar-dark</code> لألوان خلفيّة غامقة؛ ثم خصّص المظهر بالأصناف <code>.bg-*</code>. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<nav class="navbar navbar-dark bg-dark"> | <nav class="navbar navbar-dark bg-dark"> | ||
| سطر 258: | سطر 261: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == الحاويات == | ||
على الرغم من أنّ الحاويّات غير ضروريّة لشرائط التنقّل إلّا أنّه يمكن تغليف شريط تنقّل ضمن الصنف <code>.container</code> لتوسيطه ضمن صفحة، كما يمكن إضافة حاويّة داخل الشريط لتوسيط محتوى شريط تنقّل علويّ ثابت أو لاصق. | على الرغم من أنّ الحاويّات غير ضروريّة لشرائط التنقّل إلّا أنّه يمكن تغليف شريط تنقّل ضمن الصنف <code>.container</code> لتوسيطه ضمن صفحة، كما يمكن إضافة حاويّة داخل الشريط لتوسيط محتوى شريط تنقّل علويّ ثابت أو لاصق. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 267: | سطر 270: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
إذا كانت الحاويّة داخل داخل شريط التنقّل فإنّ الحاشيّات الأفقيّة تُحذَف في النقاط الحديّة الأصغر من تلك المُحدَّدة بالصنف <code>.navbar-expand{-sm|-md|-lg|-xl}</code> المُطبَّق على شريط التنقّل. تضمن هذه الطريقة عدم تكرار الحاشيّات لغير ضرورة في إطارات العرض الضيّقة عند طيّ شريط التنقّل. | إذا كانت الحاويّة داخل داخل شريط التنقّل فإنّ الحاشيّات الأفقيّة تُحذَف في النقاط الحديّة الأصغر من تلك المُحدَّدة بالصنف <code>.navbar-expand{-sm|-md|-lg|-xl}</code> المُطبَّق على شريط التنقّل. تضمن هذه الطريقة عدم تكرار الحاشيّات لغير ضرورة في إطارات العرض الضيّقة عند طيّ شريط التنقّل. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<nav class="navbar navbar-expand-lg navbar-light bg-light"> | <nav class="navbar navbar-expand-lg navbar-light bg-light"> | ||
| سطر 276: | سطر 279: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== التموضع == | == التموضع == | ||
استخدم [[Bootstrap/position|أدوات التموضع]] لوضع شرائط التنقّل في وضعيّات غير ساكنة. اختر بين التثبيت في الأعلى، أو التثبيت في الأسفل أو الالتصاق بالأعلى (يمرّ مع الصفحة إلى أن تبلغ أعلى الشاشة ثم يبقى ملتصقًا هناك). تستخدم الشرائط المُثبّتة الخاصيّة <code>position:fixed</code>؛ ممّا يعني أنّها تُسحَب من السير العادي لكائن المستند DOM وقد تحتاج لتنسيقات CSS مُخصَّصة (مثلًا، <code>padding-top</code> على العنصُر <code><body></code>) لتفادي التداخل مع العناصر الأخرى. | استخدم [[Bootstrap/position|أدوات التموضع]] لوضع شرائط التنقّل في وضعيّات غير ساكنة. اختر بين التثبيت في الأعلى، أو التثبيت في الأسفل أو الالتصاق بالأعلى (يمرّ مع الصفحة إلى أن تبلغ أعلى الشاشة ثم يبقى ملتصقًا هناك). تستخدم الشرائط المُثبّتة الخاصيّة <code>position:fixed</code>؛ ممّا يعني أنّها تُسحَب من السير العادي لكائن المستند DOM وقد تحتاج لتنسيقات CSS مُخصَّصة (مثلًا، <code>[[CSS/padding-top|padding-top]]</code> على العنصُر <code>[[HTML/body|<body>]]</code>) لتفادي التداخل مع العناصر الأخرى. | ||
يُرجَى كذلك '''ملاحظة أن الصنف <code>.sticky-top</code> يستخدم الخاصيّة <code>position: sticky</code>، التي [https://caniuse.com/#feat=css-sticky لا تدعمها جميع المتصفّحات]'''. | يُرجَى كذلك '''ملاحظة أن الصنف <code>.sticky-top</code> يستخدم الخاصيّة <code>position: sticky</code>، التي [https://caniuse.com/#feat=css-sticky لا تدعمها جميع المتصفّحات]'''. | ||
| سطر 305: | سطر 308: | ||
== التجاوب == | == التجاوب == | ||
يمكن أن تستخدم شرائط التنقّل الأصناف <code>.navbar-toggler</code>، و<code>.navbar-collapse</code>، و <code>.navbar-expand{-sm|-md|-lg|-xl}</code> لتعديل متى يُطوى محتواها خلف زرّ. يمكن بسهولة اختيّار متى يُعرَض أو يُخفَى عنصُر باستخدام الأصناف المذكورة إلى جانب أدوات أخرى. | يمكن أن تستخدم شرائط التنقّل الأصناف <code>.navbar-toggler</code>، و<code>.navbar-collapse</code>، و <code>.navbar-expand{-sm|-md|-lg|-xl}</code> لتعديل متى يُطوى محتواها خلف زرّ. يمكن بسهولة اختيّار متى يُعرَض أو يُخفَى عنصُر باستخدام الأصناف المذكورة إلى جانب أدوات أخرى. | ||
أضف الصنف <code>.navbar-expand</code> إلى شرائط التنقّل التي لا تريد لها الطيّ أبدًا. بالعكس، لا تضف أي <code>.navbar-expand</code> إلى شرائط التنقّل التي تُطوَى دائما. | أضف الصنف <code>.navbar-expand</code> إلى شرائط التنقّل التي لا تريد لها الطيّ أبدًا. بالعكس، لا تضف أي <code>.navbar-expand</code> إلى شرائط التنقّل التي تُطوَى دائما. | ||
=== مبدِّل حالة شريط | === مبدِّل حالة شريط التنقل === | ||
يُحاذى مبدِّل حالة شريط التنقّل (الزرّ الذي يؤدّي النقر عليه لإظهار أو إخفاء عناصر التنقّل) مبدئيًّا على اليسار، ولكن إنْ سبقه عنصُر أخ مثل <code>.navbar-brand</code> فسيُحاذى تلقائيًّا أقصى اليمين. يؤدّي عكسُ ترتيب العناصر إلى عكس موضع المبدِّل. في ما يلي أمثلة على مختلف تنسيقات المبدِّل. | يُحاذى مبدِّل حالة شريط التنقّل (الزرّ الذي يؤدّي النقر عليه لإظهار أو إخفاء عناصر التنقّل) مبدئيًّا على اليسار، ولكن إنْ سبقه عنصُر أخ مثل <code>.navbar-brand</code> فسيُحاذى تلقائيًّا أقصى اليمين. يؤدّي عكسُ ترتيب العناصر إلى عكس موضع المبدِّل. في ما يلي أمثلة على مختلف تنسيقات المبدِّل. | ||
* بدون ظهور هويّة تجاريّة (<code>.navbar-brand</code>) في النقاط الحدّيّة الصغرى: | * بدون ظهور هويّة تجاريّة (<code>.navbar-brand</code>) في النقاط الحدّيّة الصغرى: | ||
| سطر 340: | سطر 343: | ||
</nav> | </nav> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* الهويّة يسارًا والمبدِّل | * الهويّة يسارًا والمبدِّل يمينًا: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 368: | سطر 371: | ||
</nav> | </nav> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* الهويّة يمينًا والمبدِّل | * الهويّة يمينًا والمبدِّل يسارًا: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 397: | سطر 400: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== المحتوى | === المحتوى الخارجي === | ||
قد ترغب أحيانًا في استخدام مُلحَق الطيّ للتعامل مع محتوى في مكان آخر من الصفحة. هذا الأمر سهل، نظرًا لكون مُلحَق الطيّ يعمل على معرِّف العناصر (<code>id</code>) وخاصيّة <code>data-target</code>. | قد ترغب أحيانًا في استخدام مُلحَق الطيّ (collapse plugin) للتعامل مع محتوى في مكان آخر من الصفحة. هذا الأمر سهل، نظرًا لكون مُلحَق الطيّ يعمل على معرِّف العناصر (<code>id</code>) وخاصيّة <code>data-target</code>. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 417: | سطر 420: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/components/navbar/ صفحة Navbar في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]][[تصنيف:Bootstrap components]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap components|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 12:08، 12 يوليو 2020
تعرَّف على مكوِّن شرائط التنقّل القويّ والمرن الذي يقدّمه إطار العمل Bootstrap. يدعم شريط التنقّل في Bootstrap الهويّة التجاريّة (branding)، وعناصر التنقّل وأمورًا أخرى تتعرّض لها صفحة التوثيق هذه.
آليّة العمل
في ما يلي أمور ينبغي الانتباه إليها قبل البدء في استخدام شريط التنقّل في Bootstrap:
- تجب إضافة الأصناف
.navbar-expand{-sm|-md|-lg|-xl}إلى صنف شريط التنقّل (.navbar) للحصول على تقليص متجاوب لشرائط التنقّل ولاستخدام أصناف تخطيط الألوان (انظر أدناه). - شرائط التنقّل ومحتواها مائعة Fluid مبدئيّا. استخدم حاويّات اختيّاريّة إن أردت وضع حد على تمدّدها الأفقي (انظر أدناه).
- استخدم أدوات التباعد وأدوات Flex للتحكّم في المساحة الفارغة والمحاذاة داخل شرائط التنقّل.
- شرائط التنقّل متجاوبة مبدئيًّا، إلّا أنّه يمكن تعديل هذه الميزة بسهولة. يعتمد السلوك المتجاوب لشرائط التنقّل على مُلحَق JavaScript الخاص بمكوِّن الطيّ (Collapse).
- تُخفَى شرائط التنقّل مبدئيًّا عند الطباعة. يمكن تعديل هذا الإعداد بإضافة الصنف
.d-printإلى.navbar. راجع أداة العرض display لمعلومات أكثر. - اضمن سهولة الوصول باستخدام عناصر
<nav>أو إضافة الخاصيّةrole="navigation"عند استخدام عنصُر عامّ (مثل<div>) إلى كلّ شريط تنقّل، لمساعدة الزوّار مستخدمي التقنيّات المساعدة.
واصل القراءة للحصول على أمثلة وقائمة بالمكوِّنات الفرعيّة المدعومة.
المحتوى المدعوم
تأتي شرائط التنقّل مبدئيًّا مع دعم مجموعة من المكوِّنات الفرعيّة. استخدم حسب الحاجة أيًّا من المكوِّنات التاليّة:
.navbar-brand: الهويّة التجاريّة أو المؤسسيّة لمشروعك.navbar-nav: عناصر تنقّل خفيفة مكتملة الارتفاع (يتضمّن دعم القوائم المنسدلة)..navbar-toggler: يُستخدَم مع مُلحَق الطيّ وعناصر تبديل حالة التنقّل الأخرى..form-inline: لأيّ عنصُر تحكّم أو إجراء يتعلّق بالاستمارات ضمن شرائط التنقّل..navbar-text: لإضافة سلاسل محارف مُحاذاة عموديًّا إلى شريط التنقّل..collapse.navbar-collapse: لتجميع محتويات شريط التنقّل وإخفائها حسب النقاط الحديّة.
في ما يلي مثال يضمّ جميع المكوِّنات الفرعيّة ضمن شريط تنقّل خفيف الزخرفة ومتجاوب يُطوَى تلقائيًّا عند النقطة الحديّة العريضة (lg).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط تنقّل</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحالي)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
قائمة منسدلة
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">إجراء</a>
<a class="dropdown-item" href="#">إجراء آخر</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">أمر آخر هنا</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطَّل</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
</form>
</div>
</nav>
يستخدم هذا المثال أصناف الألوان (bg-light) و التباعد (my-2، وmy-lg-0، وmr-sm-0 وmy-sm-0) الخدميّة.
الهويّة التجارية
يعمل الصنف .navbar-brand على أغلب العناصر؛ إلّا أنّ الروابط (<a>) هي المُرشّح الأفضل لتطبيقه عليها، إذ تحتاج بعضُ العناصر لأصناف خدميّة أو أنماط مُخصَّصة.
<!-- استخدام رابط -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">شريط تنقّل</a>
</nav>
<!-- استخدام ترويسة -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">شريط تنقّل</span>
</nav>
تحتاج الصوّر غالبًا عند إضافتها ضمن الصنف .navbar-brand إلى تنسيقات مُخصَّصة وأدوات لتحديد أبعادها الصحيحة. في ما يلي أمثلةٌ للتوضيح.
<!-- صورة فقط -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- صورة ونصّ -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
عناصر التنقل
تُبنَى روابط التنقّل في شرائط التنقّل بالاعتماد على الخيّارات التي يقدّمها مكوِّن عناصر التنقّل واستخدام أصناف مُعدِّلة مخصوصة. تتطلّب روابط التنقّل استخدام أصناف التبديل (انظُر أدناه) لتنسيق متجاوب. تتمدّد عناصر التنقّل في شريط التنقّل لاحتلال أكبر مساحة أفقيّة ممكنة للإبقاء على محتويات شريط التنقّل محاذاة على نحو آمن.
يمكن تطبيق الصنف .active مباشرة على روابط التنقّل (.nav-link) أو آبائها المباشرين (.nav-item) للإشارة إلى الصفحة الحاليّة.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط التنقّل</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">الميزات</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">التسعير</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطَّل</a>
</li>
</ul>
</div>
</nav>
يمكن الاستغناء تمامًا عن التنقّل المعتمد على القوائم، نظرًا لاستخدام أصناف Bootstrap لإنشاء عناصر التنقّل.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط التنقّل</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
<a class="nav-item nav-link" href="#">الميزات</a>
<a class="nav-item nav-link" href="#">التسعير</a>
<a class="nav-item nav-link disabled" href="#">مُعطَّل</a>
</div>
</div>
</nav>
يمكن كذلك استخدام قوائم التنقّل في عناصر شريط التنقّل. تحتاج القوائم المنسدلة عنصُر مُغلِّفًا للتموضع؛ لذا تأكّد من استخدام عناصر مختلفة ومتداخلة للصنفيْن .nav-item و.nav-link كما في المثال التالي.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط التنقّل</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">الميزات</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">التسعير</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
رابط قائمة منسدلة
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">إجراء</a>
<a class="dropdown-item" href="#">إجراء آخر</a>
<a class="dropdown-item" href="#">أمر آخر هنا</a>
</div>
</li>
</ul>
</div>
</nav>
الاستمارات
يُستخدَم الصنف .form-inline لوضع عناصر التحكّم والمكوِّنات المختلفة في الاستمارات ضمن شريط التنقّل.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
</form>
</nav>
يستخدم الأبناء المباشرون في .navbar الخطاطة المنسابة flex، أما قيمتها الافتراضية فهي justify-content: space-between. استخدم أدوات flex الإضافية لتعديل السلوك.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">بحث</button>
</form>
</nav>
يمكن أيضًا تضمين مجموعات إدخال.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="اسم المستخدم" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
تُدعَم كذلك الأزرار بأنواعها ضمن استمارات شريط التنقّل. يمكن استخدام أدوات المحاذاة العموديّة لمحاذاة العناصر ذات الأبعاد المختلفة.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">الزرّ الرئيسيّ</button>
<button class="btn btn-sm btn-outline-secondary" type="button">زرّ أصغر</button>
</form>
</nav>
النص
يمكن أن تتضمّن شرائط التنقّل نصوصًا بفضل الصنف.navbar-text الذي يصحّح المحاذاة العموديّة والتباعد الأفقيّ بالنسبة لسلاسل المحارف.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
نصّ في شريط تنقل باستخدام عنصُر سطريّ
</span>
</nav>
يمكن المزج بين هذا الصنف والمكوِّنات الأخرى حسب الحاجة.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط تنقّل يوجد به نصّ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">الميزات</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">التسعير</a>
</li>
</ul>
<span class="navbar-text">
نصّ في شريط تنقل باستخدام عنصُر سطريّ
</span>
</div>
</nav>
مُخطَّطات الألوان
من السهل جدًّا تخصيص مظهر شائط التنقّل، بفضل المزج بين أصناف المظهر وأدوات ألوان الخلفيّة (background-color). اختر بين .navbar-light لألوان خلفيّة مضيئة و.navbar-dark لألوان خلفيّة غامقة؛ ثم خصّص المظهر بالأصناف .bg-*.
<nav class="navbar navbar-dark bg-dark">
<!-- محتوى شريط التنقّل -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- محتوى شريط التنقّل -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- محتوى شريط التنقّل -->
</nav>
الحاويات
على الرغم من أنّ الحاويّات غير ضروريّة لشرائط التنقّل إلّا أنّه يمكن تغليف شريط تنقّل ضمن الصنف .container لتوسيطه ضمن صفحة، كما يمكن إضافة حاويّة داخل الشريط لتوسيط محتوى شريط تنقّل علويّ ثابت أو لاصق.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط التنقّل</a>
</nav>
</div>
إذا كانت الحاويّة داخل داخل شريط التنقّل فإنّ الحاشيّات الأفقيّة تُحذَف في النقاط الحديّة الأصغر من تلك المُحدَّدة بالصنف .navbar-expand{-sm|-md|-lg|-xl} المُطبَّق على شريط التنقّل. تضمن هذه الطريقة عدم تكرار الحاشيّات لغير ضرورة في إطارات العرض الضيّقة عند طيّ شريط التنقّل.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">شريط التنقّل</a>
</div>
</nav>
التموضع
استخدم أدوات التموضع لوضع شرائط التنقّل في وضعيّات غير ساكنة. اختر بين التثبيت في الأعلى، أو التثبيت في الأسفل أو الالتصاق بالأعلى (يمرّ مع الصفحة إلى أن تبلغ أعلى الشاشة ثم يبقى ملتصقًا هناك). تستخدم الشرائط المُثبّتة الخاصيّة position:fixed؛ ممّا يعني أنّها تُسحَب من السير العادي لكائن المستند DOM وقد تحتاج لتنسيقات CSS مُخصَّصة (مثلًا، padding-top على العنصُر <body>) لتفادي التداخل مع العناصر الأخرى.
يُرجَى كذلك ملاحظة أن الصنف .sticky-top يستخدم الخاصيّة position: sticky، التي لا تدعمها جميع المتصفّحات.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">مبدئيّ</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">مُثبّت في الأعلى</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">مُثبّت في الأسفل</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">ملتصق بالأعلى</a>
</nav>
التجاوب
يمكن أن تستخدم شرائط التنقّل الأصناف .navbar-toggler، و.navbar-collapse، و .navbar-expand{-sm|-md|-lg|-xl} لتعديل متى يُطوى محتواها خلف زرّ. يمكن بسهولة اختيّار متى يُعرَض أو يُخفَى عنصُر باستخدام الأصناف المذكورة إلى جانب أدوات أخرى.
أضف الصنف .navbar-expand إلى شرائط التنقّل التي لا تريد لها الطيّ أبدًا. بالعكس، لا تضف أي .navbar-expand إلى شرائط التنقّل التي تُطوَى دائما.
مبدِّل حالة شريط التنقل
يُحاذى مبدِّل حالة شريط التنقّل (الزرّ الذي يؤدّي النقر عليه لإظهار أو إخفاء عناصر التنقّل) مبدئيًّا على اليسار، ولكن إنْ سبقه عنصُر أخ مثل .navbar-brand فسيُحاذى تلقائيًّا أقصى اليمين. يؤدّي عكسُ ترتيب العناصر إلى عكس موضع المبدِّل. في ما يلي أمثلة على مختلف تنسيقات المبدِّل.
- بدون ظهور هويّة تجاريّة (
.navbar-brand) في النقاط الحدّيّة الصغرى:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="يظهر أو يخفي عناصر التنقّل">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">هويّة مخفيّة</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطَّل</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
</form>
</div>
</nav>
- الهويّة يسارًا والمبدِّل يمينًا:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">شريط التنقّل</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="يظهر أو يخفي عناصر التنقّل">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطَّل</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="البحث">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
</form>
</div>
</nav>
- الهويّة يمينًا والمبدِّل يسارًا:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="يظهر أو يخفي عناصر التنقّل">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">شريط التنقّل</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">الرئيسيّة <span class="sr-only">(الحاليّة)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">مُعطَّل</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="البحث" aria-label="البحث">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">ابحث</button>
</form>
</div>
</nav>
المحتوى الخارجي
قد ترغب أحيانًا في استخدام مُلحَق الطيّ (collapse plugin) للتعامل مع محتوى في مكان آخر من الصفحة. هذا الأمر سهل، نظرًا لكون مُلحَق الطيّ يعمل على معرِّف العناصر (id) وخاصيّة data-target.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">محتوى مطويّ</h4>
<span class="text-muted">يمكن إظهاره أو إخفاؤه باستخدام هويّة شريط التنقّل.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="يظهر أو يخفي عناصر التنقّل">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>