آموزش طراحی سایت-آموزش کار با Navigation Bar در Bootstrap 4

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

• کار با منو بار Navs در Bootstrap 4
• آموزش کار با لبه ها Tabs در Bootstrap 4
• آموزش کار با Pills در بوت استرپ 4
• آموزش کاربرد Dropdown با منوی pills
• آموزش کاربرد Dropdown با منوی Tabs

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

آموزش کار با Navigation Bar در Bootstrap 4

منوی Navigation Bar یک منوی مسیر دهی و دسترسی به قسمت های مختلف وب سایت است که در قسمت بالایی صفحه (Header) قرار می گیرد. عکس زیر یک Navigation Bar ساده را نشان می دهد :

در بوت استرپ 4، منوی Navigation Bar به طور اتوماتیک بر حسب سایز صفحه نمایش دهنده سایت، به طور تمام عرض یا کوچک شده (collapse) نشان داده می شود و کاملا Responsive است.

منوی Navigation Bar استاندارد در بوت استرپ 4 به وسیله یک تگ nav با کلاس navbar که یک کلاس ریسپانسیو قابل جمع شدن یا Collapse به دنبال آن است (کلاس .navbar-expand-xl | lg | md | sm) ایجاد می شود.

برای اضافه کردن لینک ها و آیتم ها در Navigation Bar از یک المنت <ul> با کلاس Class=”navbar-nav” استفاده می شود. سپس به ازای هر آیتم در تگ <ul> یک تگ <li> با کلاس nav-item. که معمولا یک لینک با تگ <a> و کلاس nav-link. درون آن است، تعریف می شود.

مثال عملی : در کد مثال عملی زیر، یک Navigation Bar ساده که دارای 3 لینک است را ایجاد کرده ایم :

مثال 1

<!-- A grey horizontal navbar that becomes vertical on small screens -->

<nav class=&quotnavbar navbar-expand-sm bg-light&quot>

  <!-- Links -->

  <ul class=&quotnavbar-nav&quot>

    <li class=&quotnav-item&quot>

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

    </li>

    <li class=&quotnav-item&quot>

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

    </li>

    <li class=&quotnav-item&quot>

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

    </li>

  </ul>

</nav>

آموزش ساخت یک Navigation Bar به صورت عمودی :

اگر کلاس .navbar-expand-x||lg|md|sm را از کد navbar حذف کنید، بوت استرپ 4 منوی navbar را به صورت عمودی نشان می دهد، همانند مثال عملی زیر:

مثال 2

<!-- A vertical navbar -->

<nav class=&quotnavbar bg-light&quot>

  <!-- Links -->

  <ul class=&quotnavbar-nav&quot>

    <li class=&quotnav-item&quot>

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

    </li>

    <li class=&quotnav-item&quot>

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

    </li>

    <li class=&quotnav-item&quot>

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

    </li>

  </ul>

</nav>

آموزش وسط چین کردن navbar در آموزش طراحی سایت:

در صورت استفاده از کلاس justify-content-center.، بوت استرپ 4 منوی Navigation Bar را به صورت وسط چین نشان می دهد.

مثال عملی : در کد مثال عملی زیر، یک navbar وسط چین ایجاد کرده ایم.

این منو در صفحه نمایش های بسیار بزرگ (extra large)، بزرگ (large) و متوسط (medium) به صورت وسط چین نشان داده می شود.

اما به دلیل کاربرد کلاس navbar-expand-sm در آن، در صفحه نمایش های کوچک (small) به صورت عمودی و چپ چین نشان داده خواهد شد :

مثال 3

<nav class=&quotnavbar navbar-expand-sm bg-light justify-content-center&quot>

  ...

</nav>

آموزش ایجاد منو رنگی Colored navbar در Bootstrap 4:

می توانید از هر یک از کلاس های متنی رنگی ویژه بوت استرپ 4، برای تغییر رنگ پس زمینه navbar استفاده نمایید، این کلاس ها عبارتند از bg-primary، bg-success، bg-info، bg-warning، bg-danger، bg-secondary، bg-dark و bg-light.

نکته :

اگر از کلاس navbar-dark در منوی navbar استفاده کنید، رنگ متن لینک های منو به رنگ سفید تبدیل می شود و برعکس با کاربرد کلاس navbar-light، رنگ نوشته ها به رنگ تیره درخواهد آمد.

مثال عملی : در کد مثال عملی زیر، 3 مدل مختلف منوی navbar با رنگ و تم مختلف را ایجاد کرده ایم :

مثال 4

<!-- Grey with black text -->

<nav class=&quotnavbar navbar-expand-sm bg-light navbar-light&quot>

  <ul class=&quotnavbar-nav&quot>

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

      <a class=&quotnav-link&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>

</nav>

<!-- Black with white text -->

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>...</nav>

<!-- Blue with white text -->

<nav class=&quotnavbar navbar-expand-sm bg-primary navbar-dark&quot>...</nav>

راهنمایی : نحوه ایجاد لینک فعال/غیر فعال در navbar.

اگر کلاس active را به المنت <a> یک لینک در منوی navbar بدهید، برنامه آن لینک را به صورت فعال و متمایز نشان می دهد. همچنین با کاربرد کلاس disabled، لینک به صورت غیر فعال و غیر قابل کلیک درخواهد آمد.

آموزش قرار دادن لوگو/عکس در navbar:

به وسیله کلاس navbar-brand و کاربرد آن در یک تگ لینک مثل <a> می توانید عکس برند یا نوشته لوگوی سایت را در منوی Navigation Bar قرار دهید.

مثال 1: در مثال زیر، عبارت Logo را به صورت برجسته به عنوان آرم سایت در منو navbar قرار داده ایم :

مثال 5

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>

  <a class=&quotnavbar-brand&quot href=&quot#&quot>Logo</a>

  ...

</nav>

می توایند از عکس نیز در بخش لوگو منوی navbar استفاده کنید. در صورت استفاده از عکس و کلاس navbar-brand، بوت استرپ 4 به صورت خودکار اندازه عکس را برای نمایش در صفحه های مختلف تنظیم می کند. در کد مثال عملی زیر، از یک عکس به عنوان لوگو در منوی navbar استفاده کرده ایم :

مثال 6

<p><a class=&quotnavbar-brand&quot href=&quot#&quot><img alt=&quotLogo&quot src=&quotbird.jpg&quot style=&quotwidth:40px&quot> </a> ...</p>

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

اکثر مواقع، به خصوص در صفحه نمایش های کوچک، ممکن است بخواهید که منوی Navigation Bar و لینک های آن را کوچک یا مخفی کرده و به جای آن دکمه ای قرار دهید تا کاربر بر روی آن، منو را باز کرده و محتویات ش را مشاهده کند.

بای ایجاد یک منوی navbar Collapse که قابل باز و بسته شدن و مخفی شدن است، از یک دکمه button با کلاس class=”navbar-toggler” و خواص data-toggle=”collapse” و "id منوی data-target=”nav استفاده می شود.

سپس تمامی محتویات منوی navbar شامل لینک ها، متن ها و ... را در یک المنت div با کلاس class=”collapse navbar-collapse” که خاصیت id آن معادل خاصیت data-target دکمه button ساخته شده است، قرار دهید.

حال در صورت کلیک کاربر بر روی دکمه Button، منوی navbar باز و بسته شده و محتویات آن مخفی و نمایان می شود، همانند کد مثال عملی زیر:

مثال 7

<nav class=&quotnavbar navbar-expand-md bg-dark navbar-dark&quot>

  <!-- Brand -->

  <a class=&quotnavbar-brand&quot href=&quot#&quot>Navbar</a>

  <!-- Toggler/collapsibe Button -->

  <button class=&quotnavbar-toggler&quot type=&quotbutton&quot data-toggle=&quotcollapse&quot data-target=&quot#collapsibleNavbar&quot>

    <span class=&quotnavbar-toggler-icon&quot></span>

  </button>

  <!-- Navbar links -->

  <div class=&quotcollapse navbar-collapse&quot id=&quotcollapsibleNavbar&quot>

    <ul class=&quotnavbar-nav&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>

    </ul>

  </div>

</nav>

راهنمایی :

راهنمایی : اگر در مثال فوق، کلاس navbar-expand-md. را از تگ اصلی nav حذف کنید، منو در تمامی اندازه های صفحه نمایش و همیشه به صورت بسته یا collapse نشان داده خواهد شد.

آموزش استفاده از Dropdown در منوی navbar:

از منوهای کرکره ای dropdown نیز می توانید به عنوان آیتم های منوی navbar استفاده کنید. برای نمونه، در کد مثال عملی زیر، در آیتم سوم منو از یک dropdown برای نمایش آیتم ها، استفاده کرده ایم :

مثال 8

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>

  <!-- Brand -->

  <a class=&quotnavbar-brand&quot href=&quot#&quot>Logo</a>

  <!-- Links -->

  <ul class=&quotnavbar-nav&quot>

    <li class=&quotnav-item&quot>

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

    </li>

    <li class=&quotnav-item&quot>

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

    </li>

    <!-- Dropdown -->

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

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

        Dropdown link

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

  </ul>

</nav>

آموزش استفاده از فرم و دکمه در منوی Bootstrap navbar:

می توایند یک فرم Html که حاوی یک یا چندین دکمه و کادر ورودی input باشد را نیز در منوی navbar به کار ببرید. برای این منظور از یک المنت <form> با کلاس class=”form-inline” برای گروه بندی و نمایش دکمه ها و کادرهای متنی input آن به صورت خطی و کنار هم در منو استفاده می شود.

مثال عملی : در کد مثال عملی زیر، یک فرم را با دو المنت کادر ورودی search و دکمه ارسال یا submit در منوی navbar قرار داده ایم :

مثال 9

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>

    <input class=&quotform-control mr-sm-2&quot type=&quottext&quot placeholder=&quotSearch&quot>

    <button class=&quotbtn btn-success&quot type=&quotsubmit&quot>Search</button>

</nav>

همچنین می توانید از کلاس های .input-group-prepend یا input-group-append برای اتصال یک آیکون یا متن کمکی به کادرهای متن ورودی استفاده شده در فرم ها، بهره بگیرید. در مثال زیر، برای کادر متن اول علامت @ را اضافه کرده ایم :

مثال 10

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>

  <form class=&quotform-inline&quot action=&quot/action_page.php&quot>

    <div class=&quotinput-group&quot>

      <div class=&quotinput-group-prepend&quot>

        <span class=&quotinput-group-text&quot>@</span>

      </div>

      <input type=&quottext&quot class=&quotform-control&quot placeholder=&quotUsername&quot>

    </div>

  </form>

</nav>

آموزش قرار دادن متن ساده در منوی Bootstrap navbar:

می توانید متن ساده (Text) را نیز به عنوان آیتم درون منوی navbar قرار دهید. این آیتم همانند متن نشان داده و خاصیت کلیک شدن یا منوی کرکره ای را ندارند.

برای اضافه کردن متن به آیتم های navbar، از کلاس navbar-text. استفاده می شود و نوشته به صورت یک آیتم با چیدمان مناسب و رعایت Padding در کنار سایر آیتم ها، قرار خواهد گرفت.

مثال عملی : در کد مثال عملی زیر، آیتم سوم به صورت نوشته ساده و با کلاس navbar-text. اضافه شده است :

مثال 11

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>

<!-- Links -->

  <ul class=&quotnavbar-nav&quot>

    <li class=&quotnav-item&quot>

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

    </li>

    <li class=&quotnav-item&quot>

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

    </li>

  </ul>

  <!-- Navbar text-->

  <span class=&quotnavbar-text&quot>

    Navbar text

  </span>

</nav>

آموزش ثابت کردن موقعیت navbar در آموزش طراحی سایت:

می توان کاری کرد که منوی Navigation Bar به صورت ثابت در پایین یا بالای صفحه، همواره نمایش داده شود.

در این حالت، حالت نمایش منوی navbar به صورت موقعیت ثابت (fixed position) درآمده و در هنگام اسکرول صفحه به پایین یا بالا، همواره در جای خود به صورت ثابت نمایش داده می شود.

در صورت استفاده از کلاس fixed-top.، منوی navbar همیشه در بالای صفحه ثابت، نمایش داده خواهد شد، همانند کد مثال عملی زیر:

مثال 12

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark fixed-top&quot>

  ...

</nav>

همچنین در صورت استفاده از کلاس fixed-bottom.، منوی navbar همواره در پایین صفحه به صورت ثابت، نمایش داده می شود، همانند کد مثال عملی زیر:

مثال 13

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark fixed-bottom&quot>

  ...

</nav>

آموزش استفاده از کلاس sticky-top برای ثابت کردن منو navbar:

گاهی اوقات، منوی navbar، کمی پایین تر از لبه بالا صفحه قرار دارد. در صورت استفاده از کلاس sticky-top. برای navbar، در صورت اسکرول صفحه به پایین، هنگامی که از روی محل navbar عبور می کنید، منو پرش کرده و به بالای صفحه می چسبد و با اسکرول بیشتر به پایین، همواره به صورت ثابت در بالای صفحه نمایش داده می شود. به مثال زیر دقت نمایید.

مثال 14

<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark sticky-top&quot>

  ...

</nav>

نکته :

کلاس sticky-top. در مرورگر IE II و پایین تر کار نمی کند و اشتباها آن را با حالت position:relative در نظر می گیرد.

آموزش طراحی سایت ادامه دارد