انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 26
دورة Bootstrap

Bootstrap 4 Navigation Bar

ستتعلم في هذا الدرس انشاء ال Bootstrap Navbar وهي قوائم التطبيق الرئيسية للتنقل بين صفحات تطبيقات الويب

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,047
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Bootstrap 4 Navigation Bar

ال  Navigation Bar هو شريط تنقل يتم وضعه أعلى الصفحة , يتمدد او يتجاوب ال Navigation Bar علي حسب حجم الشاشة علي الهواتف الذكية مثلا يتم اخفاء جميع ال links بداخل القائمة ويتم ظهور ايقونه واحده فقط عند الضغط عليها تظهر ال links مره اخري ولكن بشكل رأسي

خطوات انشاء ال Navigation Bar :

نستخدم nav Element

نقوم باضافة ال navbar class متبوعاً ب navbar-expand-xl|lg|md|sm class ويتحكم في تمدد القائمة رأسي او عرضي

قم باضافة ال ul بداخل ال nav مع اضافة لها navbar-nav class وبداخلها نضع ال li متبوعه ب nav-item class ال links بداخلها متبوعة ب nav-link class

Result

HTML 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <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>
جرّب بنفسك

Vertical Navbar

قم بازالة ال navbar-expand-xl|lg|md|sm class لعل قائمة رأسية Vertical Navbar
HTML 
<!-- 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>
جرّب بنفسك

Centered Navbar

قم باضافة ال justify-content-center class لوضع ال Navbar في المنتصف Centered Navbar
HTML 
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>
جرّب بنفسك

Colored Navbar

استخدم أي من ال classes الاتية لتغيير خلفية ال Colored Navbar :

  • bg-primary
  • .bg-success
  • .bg-inf
  • , .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light.

يتغير لون النص عن طريق navbar-dark class و navbar-light class

Result

HTML 
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
...
</nav>
جرّب بنفسك

Brand / Logo

ال navbar-brand class يستخدم لاظهار ال brand/logo شعار المشروع 

Collapsing The Navigation Bar

في كثير من الأحيان ، خاصةً على الشاشات الصغيرة ، نريد ال Navigation Bar روابط التنقل واستبدالها بزر عند النقر علية تظهر الراوبط بشكل رأسي هذا هو المقصود بال Collapsing.

لاستخدام ال Collapsing استخدم button مع navbar-toggler class و data-toggle attribute يضاف لها collapse value و data-target attribute يضاف لها  id  لل Element الزي بداخله collapse navbar-collapse class

HTML 
<nav class="navbar bg-dark navbar-dark" style="margin-bottom:16px">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#x" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>
  ....
</nav>
جرّب بنفسك

Fixed Navigation Bar

استخدم ال fixed-top class لعمل navbar fixed ثابتة
HTML 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ....
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…