Bootstrap 4 Navigation Bar
ستتعلم في هذا الدرس انشاء ال Bootstrap Navbar وهي قوائم التطبيق الرئيسية للتنقل بين صفحات تطبيقات الويب
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
<!-- 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
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
<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
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
<!-- 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
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ....
رسالة التأكيد
بالتأكيد تريد التدقيق الإملائي
رسالة التأكيد
بالتأكيد تريد استرجاع المحتوى
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
نسخة تجريبية
- home الرئيسية
- local_library الشروحات
- ac_unit الدورات
- 360 المعسكرات
- computer المشاريع
- format_list_numbered_rtl الاختبارات
- question_answer اسأل
- local_library Web Technology
- local_library HTML
- local_library CSS
- local_library JavaScript
- local_library Bootstrap
- local_library ReactJS
- local_library Git
- local_library PHP
- local_library MySQL
- local_library Laravel
جاري التحميل انتظر قليلاً ..