Bootstrap

Bootstrap 4 Navs

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

التاريخ

05 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

877

المواضيع

6
الشروحات chevron_left Bootstrap 4 Navs chevron_left Bootstrap

Bootstrap 4 Navs

</> Bootstrap 4 Navs

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

Result

يظهر الكود بهذا الشكل على المتصفح

<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 لمحاذاتها من اليمين

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

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

</> Vertical Nav

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

Result

يظهر الكود بهذا الشكل على المتصفح

 <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.