پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
navigation bar یک سرفصل یا یک منوی عنوان است که در بالای صفحات سایت قرار دارد.
از منوی عنوان برای قرار دادن لینک های مهم سایت استفاده میشود.
در این مبحث کلاس های آماده ی بوت استرپ برای navigation bar را به شما آموزش خواهیم داد.
با عرض سلام و ادب خدمت کاربران عزیز وب سایت پرنیان طرح
در این مبحث به آموزش Navigation Bar در بوت استرپ میپردازیم.
Basic Navigation :
در بوت استرپ اندازه ی نوار منویی میتواند با توجه به اندازه ی صفحه کوچک یا بزرگ شود.
یک نوار ناوبری استاندارد با کلاس navbar. ایجاد میشود.
برای افزودن لینک ها داخل نوار منویی از المان ul با کلاس navbar-nav. استفاده کنید.
سپس المان li را همراه با کلاس nav-item. به آن اضافه کنید که داخلش عنصر a با کلاس nav-link. قرار دارد.
یک مثال از basic navigation :
[php]
<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>
[/php]
خروجی مثال بالا تصویر زیر است:
Vertical Navbar :
برای ایجاد نوار منویی کلاس navbar-expand-xl|lg|md|sm. را از کدها حذف نمایید.
برای مثال:
[php]
<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>
[/php]
تصویر نوار منوی عمودی :
Centered Navbar :
برای قراردادن نوار منویی در وسط صفحه کلاس justify-content-center. را به نوار منویی اضافه کنید.
مثال زیر نوار منویی را روی صفحه های بزرگ و متوسط در وسط نمایش میدهد و در صفحه های کوچک به صورت عمودی و در سمت چپ نمایش داده میشود.
مثال :
[php]
<nav class=”navbar navbar-expand-sm bg-light justify-content-center”>
<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>
[/php]
مانند تصویر زیر :
Colored Navbar :
از هر یک از کلاس های bg-color. برای تغییر رنگ پس زمینه ی نوار منویی استفاده نمایید.
(bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.)
Brand / Logo :
کلاس navbar-brand. برای برجسته کردن برند ، لوگو ،نام پروژه ی تجاری در صفحه ی شما استفاده میشود.
مثال :
[php]
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark”>
<!– Brand/logo –>
<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>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 3</a>
</li>
</ul>
</nav>
[/php]
تصویر مثال بالا :
image :
هنگام استفاده از کلاس navbar-brand. بر روی تصاویر ، بوت استرپ به طور خودکار تصویر را به گونه ای تنظیم میکند که نوار را به صورت عودی جای دهد.
مثال :
[php]
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark”>
<!– Brand/logo –>
<a class=”navbar-brand” href=”#”>
<img src=”bird.jpg” alt=”logo” style=”width:40px;”>
</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>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 3</a>
</li>
</ul>
</nav>
[/php]
خروجی مثال بالا :
Collapsing The Navigation Bar :
در صفحه نمایش های کوچک برای مخفی کردن نوار منویی از دکمه استفاده می کنیم که با کلیک روی آن دکمه نوار منویی باز می شود.
برای ایجاد نوار منویی قابل جمع شدن از کدهای مثال زیر استفاده کنید.
مثال :
[php]
<nav class=”navbar navbar-expand-md bg-dark navbar-dark”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#collapsibleNavbar”>
<span class=”navbar-toggler-icon”></span>
</button>
<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>
[/php]
تصویر مثال بالا :
Navbar With Dropdown :
نوار منویی همچنین میتواند منوهای کشویی داشته باشد مانند مثال زیر:
[php]
<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>
[/php]
تصویر نوار منوی کشویی :
Navbar Forms and Buttons :
یک عنصر فرم را با کلاس form-inline. به گروه input ها و دکمه های کنار هم اضافه کنید تا نوار منویی با ظاهر فرم طراحی کنید.
مثال :
[php]
<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>
[/php]
تصویر مثال بالا را مشاهده کنید :
نکته :
شما همچنین میتوانید از دیگر کلاس های input ها مانند input-group-prepend. یا input-group-append. برای اضافه کردن یک آیکون یا یک متن کمکی داخل فیلد input استفاده کنید.
شما میتوانید در بخش ورودی های بوت استرپ اطلاعات بیشتری در مورد این کلاس ها یاد بگیرید.
مثال :
[php]
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark”>
<form class=”form-inline”>
<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>
[/php]
تصویر مثال بالا :
Navbar Text :
از کلاس navbar-text. برای عناصر بدون پیوند داخل نوار منویی استفاده کنید تا آن را به صورت عمودی تراز کنید.(تضمین متن مناسب و رنگ متن)
مثال :
[php]
<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>
[/php]
تصویر مثال بالا :
Fixed Navigation Bar :
نوار منویی همچنین در بالا یا انتهای صفحه قابل نصب است.
یک نوار منویی ثابت مستقل از پیمایش صفحه در یک موقعیت ثابت بالا یا پایین قابل مشاهده است.
کلاس fixed-top. باعث می شود نوار منویی در بالا ثابت شود.
مثال :
[php]
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-top”>
<a class=”navbar-brand” href=”#”>Logo</a>
<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>
</ul>
</nav>
[/php]
تصویر نوار منویی ثابت :
fixed-bottom :
از کلاس استفاده کنید تا نوار منویی در انتهای صفحه ثابت بماند.
مثال :
[php]
<nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom”>
<a class=”navbar-brand” href=”#”>Logo</a>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”javascript:void(0)”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”javascript:void(0)”>Link</a>
</li>
</ul>
</nav>
[/php]
تصویر نوار منویی ثابت در انتهای صفحه :
