أشرطة التنقل
شريط التنقل هو رأس الملاحة التي يتم وضعها في أعلى الصفحة:
مع Bootstrap ، يمكن لشريط التنقل تمديد أو ينهار، وهذا يتوقف على حجم الشاشة.
يتم إنشاء شريط التنقل القياسية مع <nav class="navbar navbar-default"> .
يوضح المثال التالي كيفية إضافة شريط تنقل إلى أعلى الصفحة:
مثال
<body>
<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>
انها محاولة لنفسك » ثابت بار الإنتقال
ويمكن أيضا أن تكون ثابتة شريط التنقل في أعلى أو أسفل الصفحة.
شريط الملاحة الثابتة يبقى مرئيا في وضع ثابت (أعلى أو أسفل) مستقلة عن التمرير الصفحة.
و .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> انها محاولة لنفسك » شريط الملاحة مع منسدلة
يمكن أشرطة التنقل كما يعقد القوائم المنسدلة.
يضيف المثال التالي القائمة المنسدلة لزر "صفحة 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 يستخدم الطبقة إلى اليمين محاذاة أزرار شريط التنقل.
في المثال التالي نقدم إدراج زر "تسجيل" وزر "تسجيل الدخول" إلى اليمين في شريط التنقل. نحن أيضا إضافة glyphicon على كل من اثنين من أزرار جديدة:
مثال
<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>
<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> انها محاولة لنفسك » انهيار شريط التنقل
شريط التنقل يأخذ مساحة كبيرة على الشاشة الصغيرة.
يجب علينا إخفاء شريط التنقل. وتبين انه فقط عند الحاجة إليها.
في المثال التالي يتم استبدال شريط التنقل بواسطة زر في الزاوية اليمنى العليا. فقط عند النقر فوق الزر، وسوف يتم عرض شريط التنقل:
مثال
<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> انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»