آموزش طراحی سایت-منو بار در بوت استرپ 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفهوم زیر آشنا شدیم

• کار با Collapse در بوت استرپ 4
• حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با منو بار Navs در Bootstrap 4

شکل زیر یک منو بار ساده Navs در بوت استرپ 4 را نشان می دهد :

برای ایجاد یک منوی navbar افقی، بایستی کلاس nav. را به المنت <ul> مادر لیست اضافه کرده و برای هر آیتم <li> آن کلاس nav-item. را تعیین نمایید. همچنین می توانید کلاس nav-link. را به هر یک از لینک ها بدهید.

مثال عملی : در کد مثال عملی زیر یک منوی navbar ساده را با یک المنت <ul> با کلاس nav. ایجاد کرده و 4 آیتم درون آن تعریف کرده ایم. آیتم آخر به علت به کار بردن کلاس disabled. غیر فعال بوده و نمی توان آن را کلیک کرد:

مثال 1

<ul class=&quotnav&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link disabled&quot href=&quot#&quot>Disabled</a>

  </li>

</ul>

آموزش طراحی سایت تعیین چیدمان منوی navbar در بوت استرپ 4:

می توانید منوی navbar را به صورت وسط چین یا راست چین نیز به کار ببرید. حالت پیش فرض آن، چپ چین است.

در صورت استفاده از کلاس justify-content-center.، منوی navbar در وسط تراز شده و با کلاس justify-contentent-end. در سمت راست، قرار می گیرد، همانند مثال عملی زیر :

مثال 2

<!-- Centered nav -->

<ul class=&quotnav justify-content-center&quot>

<!-- Right-aligned nav -->

<ul class=&quotnav justify-content-end&quot></ul></ul>

آموزش ساخت منوی navbar به صورت عمودی در بوت استرپ :

می توانید با به کار بردن کلاس flex-column در عنصر مادر منو (تگ ul)، منوی navbar را به صورت عمودی نشان دهید، همانند کد مثال عملی زیر :

مثال 3

<ul class=&quotnav flex-column&quot>

</ul>

آموزش کار با لبه ها Tabs در Bootstrap 4:

می توایند با اضافه کردن کلاس nav-tabs. به المنت اصلی منو بار navbar، آیتم های منوی آن را به صورت لبه با Tab تبدیل کنید.

به هر عضوی از منو که می خواهید در ابتدا فعال بوده و لبه آن بالا باشد، کلاس active. را اختصاص دهید.

اگر می خواهید منوهای Tab به صورت قابل مخفی/نمایان شدن یا بسته و باز شدن (Togglable) باشند، به آخرین مثال این درس رجوع کنید.

مثال عملی: کد مثال اول درس را بازنویسی کرده و کلاس nav-tabs را به تگ <ul> اضافه کرده ایم :

مثال 4

<ul class=&quotnav nav-tabs&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link active&quot href=&quot#&quot>Active</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link disabled&quot href=&quot#&quot>Disabled</a>

  </li>

</ul>

آموزش کار با Pills در بوت استرپ 4:

می توانید با استفاده از کلاس nav-pills.، آیتم های منوی navbar را به لینک صفحه بندی (Navigation) تبدیل کنید.

اگر می خواهید آیتم های Pills قابل باز و بسته شدن (tagglable) باشند، به مثال آخر درس رجوع نمایید.

مثال عملی : در کد مثال عملی زیر، مثال قبلی را بازنویسی کرده و با اضافه کردن کلاس nav-pills.، آیتم ها را به دکمه های Pill تبدیل کرده ایم :

مثال 5

<ul class=&quotnav nav-pills&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link active&quot href=&quot#&quot>Active</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link disabled&quot href=&quot#&quot>Disabled</a>

  </li>

</ul>

آموزش طراحی سایت تمام عرض (Justify) کردن آیتم های Pills/Tabs:

با به کار بردن کلاس nav-justified. در تگ اصلی منوی navbar، آیتم های Tab یا Pill آن به صورت تمام عرض صفحه یا عنصر دربرگیرنده نمایش داده شده و عرض های برابری خواهند داشت. همانند کد مثال عملی زیر:

مثال 6

<ul class=&quotnav nav-pills nav-justified&quot>..</ul>

<ul class=&quotnav nav-tabs nav-justified&quot>..</ul>

آموزش کاربرد Dropdown با منوی pills:

می توانید از یک یا چند Dropdown در آیتم های منوی navbar با Pills استفاده کنید، همانند شکل زیر :

مثال: در کد مثال عملی زیر یک منوی navbar Pills ایجاد کرده ایم که آیتم دوم آن یک Dropdown است :

مثال 7

<ul class=&quotnav nav-pills&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link active&quot href=&quot#&quot>Active</a>

  </li>

  <li class=&quotnav-item dropdown&quot>

    <a class=&quotnav-link dropdown-toggle&quot data-toggle=&quotdropdown&quot href=&quot#&quot>Dropdown</a>

    <div class=&quotdropdown-menu&quot>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Link 1</a>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Link 2</a>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Link 3</a>

    </div>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link disabled&quot href=&quot#&quot>Disabled</a>

  </li>

</ul>

آموزش کاربرد Dropdown با منوی Tabs:

می توانید همانند منوی Pills، از یک یا چند Dropdown در آیتم های منوی navbar Tabs نیز استفاده کنید، همانند شکل زیر:

مثال: در کد مثال عملی زیر، مثال قبلی را بازنویسی کرده و برای ایجاد منوی Tabs، از کلاس nav-tabs به جای nav-pills استفاده کرده ایم :

مثال 8

<ul class=&quotnav nav-tabs&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link active&quot href=&quot#&quot>Active</a>

  </li>

  <li class=&quotnav-item dropdown&quot>

    <a class=&quotnav-link dropdown-toggle&quot data-toggle=&quotdropdown&quot href=&quot#&quot>Dropdown</a>

    <div class=&quotdropdown-menu&quot>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Link 1</a>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Link 2</a>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Link 3</a>

    </div>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot href=&quot#&quot>Link</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link disabled&quot href=&quot#&quot>Disabled</a>

  </li>

</ul>

آموزش ساخت منوی متحرک و دینامیک با Tabs در بوت استرپ :

برای متحرک کردن و دینامیک کردن نمایش محتویات آیتم های منوی Tabs، بایستی خاصیت data-toggle=”tab” را به هر یک از لینک های منوی Tab بدهید. سپس درون تگ div با کلاس tab-content که دربرگیرنده محتویات زیر هر Tab است، (به ازای هر آیتم tab) یک تگ div با کلاس tab-pane. که دارای یک شناسه یا ID منحصر به فرد است، ایجاد نمایید.

در این حالت، با کلیک بر روی هر یک از آیتم های Tab، محتویات زیر آن نمایش داده می شود. چنانچه می خواهید در هنگام ظاهر/مخفی شدن محتویات زیر Tabها، محتویات با حالت fade (محو شدن) نمایش داده شوند، کلاس fade. را به هر آیتم اضافه کنید. در کد مثال عملی زیر، تمامی موارد بالا نمایش داده شده است

مثال 9

<!-- Nav tabs -->

<ul class=&quotnav nav-tabs&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link active&quot data-toggle=&quottab&quot href=&quot#home&quot>Home</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot data-toggle=&quottab&quot href=&quot#menu1&quot>Menu 1</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot data-toggle=&quottab&quot href=&quot#menu2&quot>Menu 2</a>

  </li>

</ul>

<!-- Tab panes -->

<div class=&quottab-content&quot>

  <div class=&quottab-pane container active&quot id=&quothome&quot>...</div>

  <div class=&quottab-pane container fade&quot id=&quotmenu1&quot>...</div>

  <div class=&quottab-pane container fade&quot id=&quotmenu2&quot>...</div>

</div>

آموزش ساخت منوی متحرک و دینامیک با Pills در Bootstrap 4:

دقیقا همانند کد و روند بخش قبل در مورد Tabs عمل خواهد شد، با این تفاوت که بایستی کلاس عنصر اصلی را به nav-pills. و مقدار خاصیت data-toggle را به pill تغییر دهید، همانند کد زیر :

مثال 10

<!-- Nav pills -->

<ul class=&quotnav nav-pills&quot>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link active&quot data-toggle=&quotpill&quot href=&quot#home&quot>Home</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot data-toggle=&quotpill&quot href=&quot#menu1&quot>Menu 1</a>

  </li>

  <li class=&quotnav-item&quot>

    <a class=&quotnav-link&quot data-toggle=&quotpill&quot href=&quot#menu2&quot>Menu 2</a>

  </li>

</ul>

<!-- Tab panes -->

<div class=&quottab-content&quot>

  <div class=&quottab-pane container active&quot id=&quothome&quot>...</div>

  <div class=&quottab-pane container fade&quot id=&quotmenu1&quot>...</div>

  <div class=&quottab-pane container fade&quot id=&quotmenu2&quot>...</div>

</div>