منوهای ناوربری عموما شامل منو ، قسمت جستجو ، لوگو و …. می باشند که در سربرگ یا هدر سایت قرار میگیرند.
همراه ما باشید تا آموزش ساخت منوی ناوربری را به پایان برسانیم.
پیشنهاد میشود قسمت های پیشین دوره ی بوت استرپ را مطالعه فرمایید ، درصورتی که وقت این کار را نداشته باشید ، تا حد امکان به قسمت های پیشین در این قسمت نیز اشاره خواهیم داشت.
منوی ناوبری ساده
با استفاده از بوت استرپ ، بسته به اندازه صفحه ، یک منوی ناوبری می تواند باز یا بسته شود.
یک نوار ناوبری استاندارد با کلاس .navbar ایجاد می شود ، و به دنبال آن یک کلاس فشرده پاسخگو قرار می گیرد: .navbar-expand-xl | lg | md | sm (نوار ناوبری را به صورت عمودی در صفحه های بزرگ ، بزرگ ، متوسط یا کوچک اضافی جمع می کند).
برای افزودن لینک در داخل منو ، میتوانید از المان <ul> به همراه کلاس .navbar-nav استفاده کنید و سپس از عنصر <li> برای زیر منوها با کلاس .nav-item و در انتها از کلاس .nav-link استفاده کنید. برای درک بهتر موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<- یک نوار افقی خاکستری که در صفحه های کوچک عمودی می شود -> <nav class="navbar navbar-expand-sm bg-light"> <!-- لینک--> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> |
منوی عمودی
برای ساخت منوی عموی کافی است که کلاس .navbar-expand-xl|lg|md|sm ( علامت | به معنای یا استفاده شده است.) را حذف کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- منوی عمودی --> <nav class="navbar bg-light"> <!-- لینک --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> |
منو وسط چین
با استفاده از کلاس .justify-content-center شما منوی خود را وسط چین خواهید کرد.
مثال زیر نوار پیمایش را روی صفحه های متوسط ، بزرگ و فوق العاده متمرکز می کند. در صفحه نمایش های کوچک به صورت عمودی و سمت چپ نمایش داده می شود (به دلیل کلاس .navbar-expand-sm):
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav> |
منوی رنگی
برای تغییر رنگ پس زمینه همانطور که در قسمت چهارم توضیح دادیم از کلاس .bg-color و رنگ مورد نظر خود استفاده کنید ، برای دیدن رنگها میتوانید به قسمت چهارم اموزش بوت استرپ مراجعه فرمایید.
به یادداشته باشید: با استفاده از کلاس .navbar-dark ، به کلیه پیوندها در نوار ، یک رنگ متن سفید اضافه کنید ، یا از کلاس .navbar-light برای افزودن رنگ متن سیاه استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<! - خاکستری با متن سیاه -> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" 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> </nav> <! - سیاه با متن سفید -> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <! - آبی با متن سفید -> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav> |
نام برند یا لوگو
کلاس نام تجاری .navbar برای برجسته کردن نام تجاری / آرم / نام پروژه صفحه شما استفاده می شود:
|
1 2 3 4 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav> |
هنگام استفاده از کلاس نام برند .navbar روی تصاویر ، Bootstrap 4 به طور خودکار تصویر را به گونه ای تنظیم می کند که نوار را به صورت عمودی جا دهد. برای درک بهتر به مثال زیر توجه کنید.
|
1 2 3 4 5 6 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav> |
نوار بازشونده در منو
خیلی اوقات ، به خصوص در صفحه های کوچک ، می خواهید لینکهای منوی ناوبری را مخفی کنید و دکمه ای را جایگزین کنید که باید هنگام کلیک آنها را فاش کند.
برای ایجاد نوار ناوبری قابل جمع شدن ، از دکمه ای با class=”navbar-toggler”, data-toggle=”collapse” و data-target = “# thetarget” استفاده کنید. سپس محتویات نوار (پیوندها و غیره) را درون یک عنصر div با class=”collapse navbar-collapse” بپیچانید ، و به دنبال آن یک شناسه که با هدف داده از دکمه مطابقت دارد: “thetarget”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-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> </ul> </div> </nav> |
منوی ناوربری با لینک بازشونده
نوارها همچنین می توانند منوهای کشویی را نگه دارند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </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> </ul> </nav> |
فرم ها و دکمه های نوار
یک عنصر <form> را با class=”form-inline” به گروه ها و دکمه های کنار هم اضافه کنید:
|
1 2 3 4 5 6 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav> |
همچنین می توانید از کلاسهای ورودی دیگری مانند .input-group-prepend یا .input-group-append برای وصل کردن یک نماد یا متن کمک در کنار قسمت ورودی استفاده کنید. در بخش ورودی های بوت استرپ اطلاعات بیشتری در مورد این کلاس ها کسب خواهید کرد.
|
1 2 3 4 5 6 7 8 9 10 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav> |
متن در منوی ناوربری
از کلاس .navbar-text استفاده کنید تا عناصر موجود در داخل نوار که پیوند ندارند را به صورت عمودی تراز کنید (تضمین مناسب بودن رنگ و متن).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav> |
نوار پیمایش ثابت
نوار پیمایش همچنین می تواند در بالا یا پایین صفحه ثابت شود.
یک نوار ناوبری ثابت مستقل از پیمایش صفحه در یک موقعیت ثابت (بالا یا پایین) قابل مشاهده است.
کلاس .fixed-top باعث می شود نوار پیمایش در بالا ثابت شود:
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> |
از کلاس .fixed-bottom استفاده کنید تا ناوبری در انتهای صفحه بماند:
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav> |
از کلاس .sticky-top استفاده کنید تا وقتی در گذشته حرکت می کنید ، ناوبری ثابت / در بالای صفحه بماند. توجه: این کلاس در IE11 و قبل از آن کار نمی کند (با عنوان موقعیت: نسبی رفتار خواهد کرد).
|
1 2 3 |
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav> |
ویدیوی قسمت بیستم
امیدوارم این اموزش براتون مفید واقع شده باشه.
پیشنهاد میشود برای دریافت اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.
همچنین میتوانید از قسمت های پیشین دوره ی بوت استرپ نیز استفاده کنید.
پایدار باشید.
