صفحه اصلی / دوره‌های آموزشی / آموزش بوت استرپ 4 از مقدماتی تا پیشرفته / آموزش کار با کامپوننت Navbar منو بار در بوت استرپ 4

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

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

جلسات دوره


                       
مهدی عباسی
مدرس:

مهدی عباسی

18 سال سابقه برنامه‌نویسی و تدریس برنامه‌نویسی
کسب مقام‌های اول و دوم کشوری در مسابقات برنامه‌نویسی

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

آموزش 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

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

نظرات دانشجویان

نظر شما در تصمیم دیگران اثرگذار است.

لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.

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

287