Bootstrap

Bootstrap 4 Navs

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

التاريخ

05 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1162

المواضيع

6
chevron_right التالى
68%
السابق chevron_left
الشروحات chevron_left Bootstrap 4 Navs chevron_left Bootstrap
BootStrap Basics keyboard_arrow_down
     check_circle_outline 1 - BootStrap Introduction
BootStrap Division keyboard_arrow_down
     check_circle_outline 2 - Bootstrap Containers
     check_circle_outline 3 - Bootstrap Grids
BootStrap Typography keyboard_arrow_down
     check_circle_outline 4 - BootStrap Typography
BS Base CSS keyboard_arrow_down
     check_circle_outline 5 - Bootstrap Colors
     check_circle_outline 6 - Bootstrap Buttons
     check_circle_outline 7 - Bootstrap Button Groups
     check_circle_outline 8 - Bootstrap Tables
     check_circle_outline 9 - Bootstrap Images
     check_circle_outline 10 - Bootstrap Alerts
     check_circle_outline 11 - Bootstrap Progress Bars
     check_circle_outline 12 - Bootstrap Spinners
     check_circle_outline 13 - Bootstrap Jumbotron
     check_circle_outline 14 - Bootstrap Badges
     check_circle_outline 15 - Bootstrap Pagination
     check_circle_outline 16 - Bootstrap List Groups
     check_circle_outline 17 - Bootstrap Cards
     check_circle_outline 18 - Bootstrap Forms
     check_circle_outline 19 - Bootstrap Inputs
     check_circle_outline 20 - Bootstrap Utilities
     check_circle_outline 22 - Bootstrap Flex
BS JavaScript keyboard_arrow_down
     check_circle_outline 21 - Bootstrap Dropdowns
     check_circle_outline 23 - Bootstrap Collapse
     check_circle 24 - Bootstrap Navs
     check_circle_outline 25 - Bootstrap Tabs
     check_circle_outline 26 - Bootstrap Navbar
     check_circle_outline 27 - Bootstrap Carousel
     check_circle_outline 28 - Bootstrap Modal
     check_circle_outline 29 - Bootstrap Tooltip
     check_circle_outline 30 - Bootstrap Popover
     check_circle_outline 31 - Bootstrap Toast
     check_circle_outline 32 - Bootstrap Scrollspy
     check_circle_outline 33 - Bootstrap Icons
     check_circle_outline 34 - Bootstrap Media Objects

Bootstrap 4 Navs

share

</> 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>
جربها بنفسك chevron_right
share

</> 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">
جربها بنفسك chevron_right
share

</> 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>
جربها بنفسك chevron_right
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات
chevron_right التالى
السابق chevron_left

CLOSETAG CLOSETAG

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

الشروحات

HTML

CSS

JavaScript

Git

الدورات

لا يوجد

قانوني

الأحكام والشروط

اتفاقية الترخيص

سياسة الخصوصية

معلومات حقوق النشر

سياسة ملفات الارتباط

الدعم

ساهم بمحتواك

أسئلة وأجوبة

اتصل بنا

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

CLOSETAG