Bootstrap شريط التنقل
أشرطة التنقل
شريط التنقل هو رأس تنقل يتم وضعه أعلى الصفحة:
باستخدام Bootstrap ، يمكن أن يمتد شريط التنقل أو ينهار ، حسب حجم الشاشة.
يتم إنشاء شريط تنقل قياسي باستخدام <nav class="navbar navbar-default">.
يوضح المثال التالي كيفية إضافة شريط تنقل إلى أعلى الصفحة:
مثال
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
ملاحظة: ستعرض جميع الأمثلة الموجودة في هذه الصفحة شريط تنقل يشغل مساحة كبيرة جدًا على الشاشات الصغيرة (ومع ذلك ، سيكون شريط التنقل في سطر واحد على الشاشات الكبيرة - لأن Bootstrap مستجيب). سيتم حل هذه المشكلة (مع الشاشات الصغيرة) في المثال الأخير في هذه الصفحة.
شريط التنقل المعكوس
إذا لم يعجبك نمط شريط التنقل الافتراضي ، فإن Bootstrap يوفر شريط تنقل أسود بديلًا:
فقط قم بتغيير .navbar-defaultالفصل إلى .navbar-inverse:
مثال
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
شريط التنقل مع القائمة المنسدلة
يمكن أن تحتوي أشرطة التنقل أيضًا على قوائم منسدلة.
يضيف المثال التالي قائمة منسدلة لزر "الصفحة 1":
مثال
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
شريط تنقل بمحاذاة لليمين
يتم .navbar-rightاستخدام الفئة لليمين محاذاة أزرار شريط التنقل.
في المثال التالي نقوم بإدخال زر "تسجيل" وزر "تسجيل الدخول" إلى اليمين في شريط التنقل. نضيف أيضًا رمزًا رمزيًا على كل من الزرين الجديدين:
مثال
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
أزرار نافبار
لإضافة أزرار داخل شريط التنقل ، أضف .navbar-btnالفصل على زر Bootstrap:
مثال
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
نماذج نافبار
لإضافة عناصر نموذج داخل شريط التنقل ، أضف .navbar-formالفئة إلى عنصر النموذج وأضف المدخل (المدخلات). لاحظ أننا أضفنا .form-groupفئة إلى حاوية div تحتوي على الإدخال. يؤدي هذا إلى إضافة مساحة مناسبة إذا كان لديك أكثر من إدخال واحد (ستتعلم المزيد عن هذا في فصل النماذج).
مثال
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
يمكنك أيضًا استخدام الفئات .input-groupو .input-group-addonلإرفاق رمز أو نص تعليمات بجوار حقل الإدخال. سوف تتعلم المزيد عن هذه الفئات في فصل Bootstrap Inputs.
مثال
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
نص نافبار
استخدم .navbar-textالفئة للمحاذاة الرأسية لأية عناصر داخل شريط التنقل ليست روابط (يضمن المساحة المتروكة ولون النص المناسبين).
مثال
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
شريط التنقل الثابت
يمكن أيضًا إصلاح شريط التنقل أعلى الصفحة أو أسفلها.
يظل شريط التنقل الثابت مرئيًا في موضع ثابت (أعلى أو أسفل) مستقل عن تمرير الصفحة.
الفصل .navbar-fixed-topيجعل شريط التنقل ثابتًا في الأعلى:
مثال
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
الفصل .navbar-fixed-bottomيجعل شريط التنقل يبقى في الأسفل:
مثال
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
طي شريط التنقل
غالبًا ما يشغل شريط التنقل مساحة كبيرة جدًا على شاشة صغيرة.
يجب علينا إخفاء شريط التنقل ؛ وأظهرها فقط عند الحاجة إليها.
في المثال التالي ، يتم استبدال شريط التنقل بزر في الزاوية اليمنى العليا. فقط عند النقر فوق الزر ، سيتم عرض شريط التنقل:
مثال
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>