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

Bootstrap 4 Navs

ستتعلم في هذا الدرس عمل القوائم العرضية التي تكون في كل موقع للتنقل بين صفحاته باستخدام ال Bootstrap

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

Bootstrap 4 Navs

لعمل nav bar عرضية استخدم nav class مع ال ul واستخدم nav-item class مع li واستخدم nav-link class مع ال links

Result


HTML 
<div class="table-respinsive">
<ul class="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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>
جرّب بنفسك

Aligned Nav

استخدم ال justify-content-center class لتوسيط ال nav واستخدم ال justify-content-end class لمحاذاتها من اليمين

HTML 
<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
جرّب بنفسك

Vertical Nav

استخدم ال flex-column class لعمل nav رأسية

Result


HTML 
 <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
جرّب بنفسك

مشاركة

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

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