آموزش کار با کامپوننت 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

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


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


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات : جلسه
مدت زمان : 661 دقیقه
حجم دوره : 2/78 گیگابایت
سطح مهارت : مقدماتی تا پیشرفته
وضعیت دوره : پایان یافته
تعداد دانشجویان : 1269
: میانگین امتیاز
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و ....