Bootstrap 4 Navigation Bar

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

التاريخ

06 ديسمبر 2021

الدروس

المستوى

العامة

اللغة

انجليزي

المشاهدات

1727

المواضيع

التالى

74%

الشروحات Bootstrap 4 Navigation Bar Bootstrap

BootStrap Basics keyboard_arrow_down

BootStrap Division keyboard_arrow_down

BootStrap Typography keyboard_arrow_down

BS Base CSS keyboard_arrow_down

BS JavaScript keyboard_arrow_down

Bootstrap 4 Navigation Bar

</> 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

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

<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

<!-- 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>

جربها بنفسك

يمكنك استخدام HTML Elements مع ال Navbar :

Navbar With Dropdown
Navbar Text
Navbar Forms and Buttons

</> Centered Navbar

قم باضافة ال justify-content-center class لوضع ال Navbar في المنتصف Centered Navbar

<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

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

<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
...
</nav>

جربها بنفسك

</> Brand / Logo

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

<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>

جربها بنفسك

</> 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

<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 ثابتة

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ....

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

Bootstrap 4 Navigation Bar

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Bootstrap 4 Navigation Bar Bootstrap

Bootstrap 4 Navigation Bar

</> Bootstrap 4 Navigation Bar

</> Vertical Navbar

</> Centered Navbar

</> Colored Navbar

</> Brand / Logo

</> Collapsing The Navigation Bar

</> Fixed Navigation Bar

معلومات تهمك

مشاركة

هل هذه المعلومات نالت إعجابك ؟

الشروحات

الدورات

قانوني

الدعم

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة

Bootstrap 4 Navigation Bar

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات chevron_left Bootstrap 4 Navigation Bar chevron_left Bootstrap

Bootstrap 4 Navigation Bar

</> Bootstrap 4 Navigation Bar

</> Vertical Navbar

</> Centered Navbar

</> Colored Navbar

</> Brand / Logo

</> Collapsing The Navigation Bar

</> Fixed Navigation Bar

معلومات تهمك

مشاركة

هل هذه المعلومات نالت إعجابك ؟

الشروحات

الدورات

قانوني

الدعم

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة

الشروحات Bootstrap 4 Navigation Bar Bootstrap