Bootstrap 4 شريط التنقل
أشرطة التنقل
شريط التنقل هو رأس تنقل يتم وضعه أعلى الصفحة:
شريط التنقل الأساسي
باستخدام Bootstrap ، يمكن أن يمتد شريط التنقل أو ينهار ، حسب حجم الشاشة.
يتم إنشاء شريط تنقل قياسي مع .navbar
الفصل ، متبوعًا بفئة قابلة للطي سريعة الاستجابة: .navbar-expand-xl|lg|md|sm
(تكديس شريط التنقل عموديًا على شاشات كبيرة جدًا أو كبيرة أو متوسطة أو صغيرة).
لإضافة روابط داخل شريط التنقل ، استخدم <ul>عنصرًا مع class="navbar-nav". ثم أضف <li>العناصر .nav-itemبفصل متبوعًا <a>بعنصر به .nav-linkفئة:
مثال
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
شريط التنقل العمودي
قم بإزالة .navbar-expand-xl|lg|md|smالفصل لإنشاء شريط تنقل عمودي:
مثال
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
توسيط Navbar
أضف .justify-content-centerالفصل لتوسيط شريط التنقل.
سيقوم المثال التالي بتوسيط شريط التنقل على الشاشات المتوسطة والكبيرة والكبيرة جدًا. على الشاشات الصغيرة ، سيتم عرضها عموديًا ومحاذاة إلى اليسار (بسبب فئة .navbar-expand-sm):
مثال
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
نافبار الملون
استخدم أيًا من .bg-colorالفئات لتغيير لون خلفية شريط التنقل ( .bg-primary،
.bg-success، .bg-info، .bg-warning، .bg-danger، .bg-secondary، .bg-darkو .bg-light)
نصيحة: أضف لون نص أبيض إلى جميع الروابط في شريط التنقل مع .navbar-darkالفصل ، أو استخدم .navbar-lightالفصل لإضافة
لون نص أسود .
مثال
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
الحالة النشطة / المعطلة : أضف .activeالفئة إلى
<a>عنصر لتمييز الرابط الحالي ، أو .disabledالفئة للإشارة إلى أن الرابط غير قابل للنقر.
العلامة التجارية / الشعار
يتم .navbar-brandاستخدام الفصل لإبراز اسم العلامة التجارية / الشعار / المشروع لصفحتك:
مثال
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
عند استخدام .navbar-brandالفصل على الصور ، سيقوم Bootstrap 4 تلقائيًا بتصميم الصورة لتلائم شريط التنقل عموديًا.
مثال
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
طي شريط التنقل
في كثير من الأحيان ، خاصةً على الشاشات الصغيرة ، تريد إخفاء روابط التنقل واستبدالها بزر يكشف عنها عند النقر فوقها.
لإنشاء شريط تنقل قابل للطي ، استخدم زرًا مع . ثم قم بلف محتوى شريط التنقل (الروابط ، إلخ) داخل عنصر div ، متبوعًا بمعرف يطابق الزر: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
مثال
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
نصيحة: يمكنك أيضًا إزالة فئة .navbar-expand-md لإخفاء ارتباطات شريط التنقل دائمًا وعرض زر التبديل.
Navbar مع القائمة المنسدلة
يمكن أن تحتوي أشرطة Navbars أيضًا على قوائم منسدلة:
مثال
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
أشكال وأزرار Navbar
أضف <form>عنصرًا class="form-inline"إلى مجموعة المدخلات والأزرار جنبًا إلى جنب:
مثال
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
يمكنك أيضًا استخدام فئات الإدخال الأخرى ، مثل .input-group-prependأو .input-group-appendلإرفاق رمز أو نص تعليمات بجوار حقل الإدخال. سوف تتعلم المزيد عن هذه الفئات في فصل Bootstrap Inputs.
مثال
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
نص نافبار
استخدم .navbar-textالفئة للمحاذاة الرأسية لأية عناصر داخل شريط التنقل ليست روابط (يضمن المساحة المتروكة ولون النص المناسبين).
مثال
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
شريط التنقل الثابت
يمكن أيضًا إصلاح شريط التنقل أعلى الصفحة أو أسفلها.
يظل شريط التنقل الثابت مرئيًا في موضع ثابت (أعلى أو أسفل) مستقل عن تمرير الصفحة.
الفصل .fixed-topيجعل شريط التنقل ثابتًا في الأعلى :
مثال
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
استخدم .fixed-bottomالفصل لجعل شريط التنقل في أسفل الصفحة:
مثال
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>