نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه نوزدهم (Navbar)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه نوزدهم (Navbar)

آموزش Bootstrap 4 جلسه نوزدهم (Navbar) از سری آموزش های تک قسمتی است.

 

منو ناوبری

منو ناوبری تمامی امکاناتی هست که ما میتوانیم در نوار منو خود جای دهیم این موارد میتواند شامل موارد زیر باشد

  • لینک ها و منو ها
  • نوشته ساده
  • کادر جستجو
  • لوگو نوشتاری و عکسی
  • نحوه قرار گیری نوار منو در صفحه
  • فعال یا غیر فعال بودن گزینه های منو

به کمک این موارد میتوانیم امکانات گوناگونی را به منو های خود اضافه کنیم و دسترسی کاربر به سایت خود را ساده کنیم.

 

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

بوت استرپ برای ساخت ناوبری ها نیز فکری کرده است و کلاس هایی را ایجاد کرده است کافیست شما این کلاس ها را در تگ های مناسب قرار دهید تا به امکانات خوبی برسید برای ساخت ناوبری ساده نیاز به تگ nav و ul و li داریم کل محتوا را داخل تگ nav قرار میدهیم و به آن کلاس navbar را میدهیم اگر میخواهیم منو افقی باشد کلاس navbar-expand-sm را نیز اضافه کنید.

حال نوبت به ul میرسد که باید کلاس navbar-nav را به آن بدهیم و به li های داخل آن کلاس nav-item اگر میخواهید داخل li های خود از تگ a استفاده کنید باید از کلاس nav-link برای آنها استفاده کنید.برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت منو عمودی

ساخت منو ناوبری عمودی بسیار راحت تر از منو ساده است کافیست شما یک کلاس را حذف کنید تا منو شما از حالت افقی به عمودی تغییر پیدا کند کلاس navbar-expand-sm را از تگ nav خود حذف کنید. به همین راحتی میتوانید منو عمودی بسازید.

 

ساخت منو ناوبری وسط چین

اگر قصد دارید منو خود را در وسط صفحه قرار دهید به کمک بوت استرپ میتوانید این کار را انجام دهید. کافیست به کلاس های بوت استرپ مراجعه کنید و کلاس justify-content-center را به تگ nav خود اضافه کنید. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

منو های رنگی

درست است میتوانید منو های ناوبری رنگارنگ داشته باشید برای این کار کافیست از کلاس های رنگی بوت استرپ استفاده کنید.اگر خاطرتان باشد در آموزش های قبلی گفتیم که با استفاده از bg و کلاس های رنگی میتوان زمینه را رنگی کرد به عنوان مثال bg-success که به ما رنگ سبز را میدهد. کافیست این کلاس را به تگ nav خود بدهید تا منوی شما رنگ بگیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اضافه کردن برند و لوگو به منو

به ۲ روش لوگو را در منو میتوان جای داد یا نام آن را نوشت و یا تصویر لوگو در این قسمت میخواهیم درباره نوشتن نام لوگو صحبت کنیم.شما میتوانید در ابتدای منو خود نام تجاری خود را قرار دهید و آن را به هرجایی لینک کنید برای این کار کافیست بعد از تگ nav باز یک تگ a با کلاس navbar-brand بسازید و در آن نام برند خود را بنویسید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

اما اگر بخواهید تصویر لوگو خود را قرار دهید:

برای این کار کافیست در تگ a که در قسمت بالا گفتیم یک تگ img قرار دهید و تصویر برند خود را در آن لود کنید بهتر است یک width با اندازه ۴۰ نیز به تصویر خود بدهید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

ناوبری رسپانسیو

اگر قصد ساخت منو رسپانسیو را دارید این قسمت از آموزش را با دقت مطالعه کنید . بعد از باز کردن تگ nav یک button تعریف میکنیم و به آن کلاس navbar-toggle میدهیم سپس attribute با نام data-toggle و با مقدار collapse و بعد از آن وقت تعیین هدف است که attribute با نام data-target و مقدار آن را یک نام دلخواه همراه با # قرار میدهیم از این نام استفاده خواهیم کرد.

قبل از بستن تگ button یک span با کلاس navbar-toggler-icon میسازیم این span آیکن منو مارا میسازد حال نوبت منو ها است که ul ها هستند اما قبل ul باید یک div با کلاس collapse و کلاس navbar-collapse بسازیم و id با نامی که به صورت اختیاری در بالا ساختیم ایجاد کنیم این div قبل از تگ nav بسته میشود باقی موارد مشابه قبل است برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

navbar با قابلیت زیر منو

به کمک کلاس های بوت استرپ میتوانید برای منو خود زیر منو ایجاد کنید که البته به استفاده از چند تگ نیز نیازمندیم . برای این کار li که قرار است زیر منو داشته باشد را انتخاب میکنیم و در کنار کلاس nav-item کلاس dropdown را نیز قرار میدهیم . سپس به تگ a آن کنار کلاس nav-link کلاس dropdown-toggle را اضافه میکنیم هم چنین باید attribute با نام data-toggle و مقدار dropdown را نیز به آن بدهیم حال تمام زیر منو ها که نیاز داریم را داخل یک div با کلاس dropdown-menu قرار میدهیم این زیر منو ها تگ a هستند که باید کلاس dropdown-item بگیرند برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

قرار دادن سرچ در navbar

اگر میخواهید در منو خود باکس سرچ داشته باشید کافیست بعد از باز شدن تگ nav یک تگ form ایجاد کنید و به آن کلاس form-inline را بدهید حال در داخل این فرم به ۲ مورد نیاز است :

  • باکس جستجو
  • دکمه سرچ

یک input با کلاس form-control میسازیم و سپس یک button  با کلاس btn و کلاس رنگی مد نظر برای واضح شدن موضوع ز کد زیر کمک بگیرید:

 

قرار دادن متن در منو

برای نوشتن متن در منو کافیست هر کجا که خواستید یک تگ span با کلاس navbar-text بسازید.

برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

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

اگر میخواهید منو ثابتی در بالا یا پایین سایت خود داشته باشید کافیست روش زیر را پیگیری کنید:

برای ساخت منو ثابت بالا کلاس fixed-top را به nav خود بدهید و برای منو ثابت پایین کلاس fixed-bottom را به nav بدهید. برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

منو چسپان (sticky)

و اما در نهایت ساخت منو چسبان !!

برای ساخت منو چسبان کافیست کلاس sticky-top را به nav خود بدهید به همین سادگی

 

به پایان آموزش navbar رسیدیم امیدوارم برای شما مفید بوده باشد.

برای راحتی شما کدی شامل کل آموزش را آماده کرده ایم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه هجدهم (Navs)

آموزش Bootstrap 4 جلسه بیستم (form)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه نوزدهم (Navbar): نوع فایل:mp4 حجم فایل:38.96 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

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

*

code

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