آموزش Navigation Bar در بوت استرپ

بهاره حسنیبهاره حسنی
357 بازدید
نوار منویی
[cdb_box_content css=”.vc_custom_1571683641298{background-color: #1e73be !important;}”]

navigation bar یک سرفصل یا یک منوی عنوان است که در بالای صفحات سایت قرار دارد.

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

در این مبحث کلاس های آماده ی بوت استرپ برای navigation bar را به شما آموزش خواهیم داد.

[/cdb_box_content]

با عرض سلام و ادب خدمت کاربران عزیز وب سایت پرنیان طرح

در این مبحث به آموزش 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]

خروجی مثال بالا تصویر زیر است:

نوار ناوبری

basic navbar

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]

تصویر نوار منوی عمودی :

نوار منویی عمودی

vertical navbar

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]

مانند تصویر زیر :

نوار منویی وسط چین

centered navbar

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]

تصویر مثال بالا :

لوگو

brand.logo

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]

خروجی مثال بالا :

تصاویر

images

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]

تصویر مثال بالا :

منوی دکمه ای

collapsible navbar

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

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]

تصویر مثال بالا را مشاهده کنید :

فرم نوار منویی

navbar forms

نکته :

شما همچنین میتوانید از دیگر کلاس های 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 form

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]

تصویر مثال بالا :

متن در نوار منویی

navbar text

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 navbar

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]

تصویر نوار منویی ثابت در انتهای صفحه :

نوار منویی ثابت انتهای صفحه

bottom fixed navbar

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
400+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت