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

ساخت منو ریسپانسیو در بوت استرپ 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>    

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

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