قسمت بیستم bootstrap : نحوه ی ساخت منوی ناوبری در بوت استرپ ۴

خانه » مقالات اموزشی » css » بوت استرپ » قسمت بیستم bootstrap : نحوه ی ساخت منوی ناوبری در بوت استرپ ۴
قسمت بیستم bootstrap : نحوه ی ساخت منوی ناوبری در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

114

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۳-۱۱

Work time-rafiki

زمان مطالعه:

5 دقیقه

منوهای ناوربری عموما شامل منو ، قسمت جستجو ، لوگو و …. می باشند که در سربرگ یا هدر سایت قرار میگیرند.

همراه ما باشید تا آموزش ساخت منوی ناوربری را به پایان برسانیم.

پیشنهاد میشود قسمت های پیشین دوره ی بوت استرپ را مطالعه فرمایید ، درصورتی که وقت این کار را نداشته باشید ، تا حد امکان به قسمت های پیشین در این قسمت نیز اشاره خواهیم داشت.

منوی ناوبری ساده

با استفاده از بوت استرپ ، بسته به اندازه صفحه ، یک منوی ناوبری می تواند باز یا بسته شود.

یک نوار ناوبری استاندارد با کلاس .navbar ایجاد می شود ، و به دنبال آن یک کلاس فشرده پاسخگو قرار می گیرد: .navbar-expand-xl | lg | md | sm (نوار ناوبری را به صورت عمودی در صفحه های بزرگ ، بزرگ ، متوسط یا کوچک اضافی جمع می کند).

برای افزودن لینک در داخل منو ، میتوانید از المان <ul> به همراه کلاس .navbar-nav استفاده کنید و سپس از عنصر <li> برای زیر منوها با کلاس .nav-item و در انتها از کلاس .nav-link استفاده کنید. برای درک بهتر موضوع به مثال زیر توجه کنید:

منوی عمودی

برای ساخت منوی عموی کافی است که کلاس .navbar-expand-xl|lg|md|sm ( علامت | به معنای یا استفاده شده است.) را حذف کنیم.

منو وسط چین

با استفاده از کلاس .justify-content-center شما منوی خود را وسط چین خواهید کرد.

مثال زیر نوار پیمایش را روی صفحه های متوسط ، بزرگ و فوق العاده متمرکز می کند. در صفحه نمایش های کوچک به صورت عمودی و سمت چپ نمایش داده می شود (به دلیل کلاس .navbar-expand-sm):

منوی رنگی

برای تغییر رنگ پس زمینه همانطور که در قسمت چهارم توضیح دادیم از کلاس .bg-color و رنگ مورد نظر خود استفاده کنید ، برای دیدن رنگها میتوانید به قسمت چهارم اموزش بوت استرپ مراجعه فرمایید.

به یادداشته باشید: با استفاده از کلاس .navbar-dark ، به کلیه پیوندها در نوار ، یک رنگ متن سفید اضافه کنید ، یا از کلاس .navbar-light برای افزودن رنگ متن سیاه استفاده کنید.

نام برند یا لوگو

کلاس نام تجاری .navbar برای برجسته کردن نام تجاری / آرم / نام پروژه صفحه شما استفاده می شود:

هنگام استفاده از کلاس نام برند .navbar روی تصاویر ، Bootstrap 4 به طور خودکار تصویر را به گونه ای تنظیم می کند که نوار را به صورت عمودی جا دهد. برای درک بهتر به مثال زیر توجه کنید.

نوار بازشونده در منو

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

برای ایجاد نوار ناوبری قابل جمع شدن ، از دکمه ای با class=”navbar-toggler”, data-toggle=”collapse” و data-target = “# thetarget” استفاده کنید. سپس محتویات نوار (پیوندها و غیره) را درون یک عنصر div با class=”collapse navbar-collapse” بپیچانید ، و به دنبال آن یک شناسه که با هدف داده از دکمه مطابقت دارد: “thetarget”.

منوی ناوربری با لینک بازشونده

نوارها همچنین می توانند منوهای کشویی را نگه دارند:

فرم ها و دکمه های نوار

یک عنصر <form> را با class=”form-inline” به گروه ها و دکمه های کنار هم اضافه کنید:

همچنین می توانید از کلاسهای ورودی دیگری مانند .input-group-prepend یا .input-group-append برای وصل کردن یک نماد یا متن کمک در کنار قسمت ورودی استفاده کنید. در بخش ورودی های بوت استرپ اطلاعات بیشتری در مورد این کلاس ها کسب خواهید کرد.

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

از کلاس .navbar-text استفاده کنید تا عناصر موجود در داخل نوار که پیوند ندارند را به صورت عمودی تراز کنید (تضمین مناسب بودن رنگ و متن).

نوار پیمایش ثابت

نوار پیمایش همچنین می تواند در بالا یا پایین صفحه ثابت شود.

یک نوار ناوبری ثابت مستقل از پیمایش صفحه در یک موقعیت ثابت (بالا یا پایین) قابل مشاهده است.

کلاس .fixed-top باعث می شود نوار پیمایش در بالا ثابت شود:

از کلاس .fixed-bottom استفاده کنید تا ناوبری در انتهای صفحه بماند:

از کلاس .sticky-top استفاده کنید تا وقتی در گذشته حرکت می کنید ، ناوبری ثابت / در بالای صفحه بماند. توجه: این کلاس در IE11 و قبل از آن کار نمی کند (با عنوان موقعیت: نسبی رفتار خواهد کرد).

ویدیوی قسمت بیستم

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

پیشنهاد میشود برای دریافت اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.

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

پایدار باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

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