آموزش کار با کامپوننت Navbar منو بار در بوت استرپ 4


آموزش کار با کامپوننت Navbar  منو بار در بوت استرپ 4
برای خرید این درس نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

آموزش navbar (منو‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌بار) در بوت استرپ 4:

در این بخش از آموزش، با یکی از جذاب ترین و پرکاربرد ترین کامپوننت های بوت استرپ 4  یعنی navbar آشنا می شوید. کامپوننت navbar در بوت استرپ 4   به ما کمک می کند تا براحتی بتوانیم منوهای افقی یا عمودی در صفحه خود ایجاد کنیم.

 

Navbar شامل کلاس های زیر می باشد:

  • Nav: برای ایجاد یک منو افقی استفاده می شود.
  • Nav-link: برای لینک های منو استفاده می شود.
  • Nav-tabs: برای ایجاد تب استفاده می شود.
  • Tab-content: محتویات تب منو را مشخص می کند.
  • Disabled: برای غیرفعال کردن آیتم های منو استفاده می شود.
  • Active: برای فعال کردن آیتم های منو استفاده می شود.
  • Navbar: برای ایجاد یک منو ناوبری استفاده می شود.
  • Navbar-nav: برای ایجاد منو کشویی در حالت ریسپانسیو می باشد.
  • Navbar-expand-(sm-md-lg-xl): برای نشان دادن منو دراندازه و دستگاه های مختلف می باشد.
  • Navbar-brand: برای ایجاد لوگو یا نام برند استفاده می شود.
  • Navbar-toggler: با استفاده از این کلاس می توانیم دکمه ای ایجاد کنیم و با کلیک بر روی آن آیتم های منو را که در دستگاه های کوچک مخفی شده اند را به صورت عمودی نمایش دهیم.
  • Navbar-collapse: برای گروه بندی و مخفی کردن آیتم های منو در دستگاه های کوچک می باشد.
  • Nav-item: برای ایجاد آیتم های منو استفاده می شود.
  • Dropdown: با استفاده از این کلاس می توانیم منو کشویی ایجاد کنیم.
  • Dropdown-toggle: برای باز کردن منوی کشویی از این کلاس استفاده می کنیم.
  • Dropdown-menu: برای ساخت منوی کشویی استفاده می شود.
  • Dropdown-item: برای ایجاد آیتم های منو کشویی استفاده می شود.
  • Dropdown-divider: برای جدا کردن آیتم های منو کشویی با یک خط افقی می باشد.
  • Navbar-color: رنگ متن منو را مشخص می کند.
  • Fixed-bottom: برای ثابت کردن منو در پایین صفحه می باشد.
  • Sticky-top: هنگام اسکرول، منو به بالای صفحه چسبیده می شود.
  • Form-inline: برای ایجاد فرم در منو که شامل یک ورودی و دکمه می باشد استفاده می شود.

برای درک بهتر این مبحث به مثال های زیر توجه کنید:

ساخت یک منو افقی ساده با کلاس nav:

  <nav class="nav">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </nav>

ساخت یک منو افقی ساده با کلاس nav

 

ساخت تب برای منو با استفاده از کلاس nav-tabs:

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <a class="nav-item nav-link " id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
      <a class="nav-item nav-link active" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
    </div>
  </nav>
  <div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade  " id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
      Tab 11111111111111111
     </div>
    <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
      Tab 22222222222222222
    </div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
      tab 33333333333333333
    </div>
  </div>

ساخت تب برای منو با استفاده از کلاس nav-tabs

 

ساخت منو ریسپانسیو در بوت استرپ 4:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
            <img src="../images/logo/darsmanIcon.png" width="30" height="30" alt="">
        </a>

        <a class="navbar-brand text-success" href="#">Darsman</a>

       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
       </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link3</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                List
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>    

 

nav ها در بوت استرپ 4

 

 

انواع dropdown ها در بوت استرپ 4

 

 

navbar-toggler  در بوت استرپ 4navbar-collapse  در بوت استرپ4

 

امیدواریم که این آموزش، برای شما دوستان درسمنی عزیز مفید باشد، برای یادگیری این مبحث می توانید این درس را دانلود کنید و از فایل ها و ویدئو این بخش استفاده کنید.
درصورت سوال و یا مشکل می توانید به انجمن پرسش و پاسخ درسمن مراجعه کنید. پیشنهادات و انتقادات خود را در بخش نظرات برای ما ارسال کنید. پیروز و موفق باشید.
smiley

انجمن برنامه نویسان وب


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات 24 جلسه
مدت زمان 601 دقیقه
حجم دوره 2/76 گیگابایت
سطح مهارت مقدماتی تا پیشرفته
وضعیت دوره پایان یافته
: میانگین امتیاز

175,000تومان
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی
مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در ... ر انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.بیشتر بدانید