Bootstrap 4 Navs
ستتعلم في هذا الدرس عمل القوائم العرضية التي تكون في كل موقع للتنقل بين صفحاته باستخدام ال Bootstrap
التاريخ
05 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
846
المواضيع
6
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>