Collapsing The Navigation Bar

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

1 صفوف تعليمية

Bootstrap

3,048 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في كثير من الأحيان ، خاصةً على الشاشات الصغيرة ، نريد ال 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>

جرّب بنفسك

Collapsing The Navigation Bar

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (Bootstrap 4 Navigation Bar)