Nav Menus در بوت استرپ 4

با سلام و عرض ادب به شما دوستان صمیمی

در این مقاله با آموزش قسمت های مختلف “Nav Menus در بوت استرپ 4” در خدمتتون هستیم.

Nav Menus

بوت استرپ این امکان را به ما میدهد که منوهای افقی و عمودی در شکل های متفاوت را طراحی کنیم. برای داشتن یک منوی ساده افقی کافی است که کلاس .nav را به المان ul  و کلاس .nav-item را به تگ های li  و هم چنین کلاس .nav-link را به تگ لینک ها  اضافه کنیم.

<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>

Aligned Nav

برای قرار دادن منو در وسط و یا انتهای سطر از کلاس های .justify-content-center و .justify-content-end استفاده می کنیم.

<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

Vertical Nav

برای داشتن منوهای عمودی کلاس .flex-column  را در  تگ ul اضافه می کنیم.

<ul class="nav flex-column"

Tabs

یکی دیگر از امکانات خوبی که بوت استرپ در اختیار ما قرار می دهد، امکان داشتن منوها به صورت تب است. برای داشتن منوهایی با این کارکرد کافی است که از کلاس .nav-tabs استفاده کنیم.

برای فعال کردن یک منو  در تب منو ها باید کلاس .active  را در تگ a  داشته باشیم.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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>

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

Pills

بوت استرپ 4 این اختیار را به طراح می دهد که منوها را به صورت دکمه هایی کنار هم، به تصویر درآورد.

برای این حالت باید کلاس .nav-pills را به تگ ul اضافه کنیم.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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>

Pills with Dropdown

برای داشتن منوهایی به صورت دکمه با قابلیت دراپ دان بودن، به صورت زیر اقدام نمایید.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </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>

Toggleable Tab

برای داشتن تب هایی که قابلیت کلیک شدن و نمایش محتوای مجزا را دارند، ابتدا باید ویژگی data-toggle=”tab”  و هم چنین یک نام منحصر به فرد را به هر لینک اضافه کنیم .

برای محتوای هر تب ما نیاز به یک تگ div  داریم که دارای کلاس .tab-content باشد،  سپس کلاس .tab-pane و هم چنین اسامی انتخاب شده برای  هر لینک  را به تگ هایdiv درونی اضافه می کنیم.

نکته: اگر می خواهید که تب های شما هنگام کلیک کردن و یا خروج،  حالت fade  داشته باشد باید fade را به کلاس  .tab-pane اضافه کنیم.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

امیدواریم که این مقاله مورد توجه تون واقع شده باشه.

برای مشاهده مقالات قبلی می توانید از لینک زیر اقدام نمایید.

collapse  در بوت استرپ4

[/member]