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

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت نوزدهم bootstrap : نحوه ی ساخت منو در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

192

Calendar-amico (2)

تاریخ انتشار:

10 , اسفند , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

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

ساخت منو

برای ساخت یک منوی ساده در بوت استرپ ۴ کافیه تا از کلاس .nav استفاده کنیم. کلاس .nav رو داخل تگ ul قرار بدیم و یه لیست درست کنیم و با تگ li دونه دونه زیر مجموعه های منومون رو بسازیم ، تگ li باید دارای کلاس .nav-item و تگ a که برای لینک باید دارای کلاس .nav-link باشه ، برای درک کامل این نمونه مثال زیر را بررسی کنید :

چینش منو

پیشنهاد میشود برای اینکه منوهاتون در حالت وسط چین قرار بگیرن از کلاس .justify-content-center و برای چینش منوهاتون در سمت راست .justify-content-end استفاده کنید.

به مثال زیر توجه کنید:

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

منوی عمودی

برای ساخت منوی عمودی کافیه تا کلاس .flex-column را در تگ ul قرار دهیم ، به مثال زیر توجه کنید :

استفاده از تب در منو

برای استفاده از تب در منو کافیه تا کلاس .nav-tabs رو به تگ ul استفاده کنیم ، برای حالتی هم که منو درحالت انتخاب کافیه کلاس .active رو اضافه کنیم ، به مثال زیر توجه کنید :

طراحی منو به روش قرص توپی

برای ساخت این نوع منو کافیه تا کلاس .nav-pills رو استفاده کنیم :

با استفاده از کلاس .nav-justified در طراحی منوهای تب و منوهای قرصی معجزه کنید!

منوی بازشونده در منوی قرصی

قبلا راجب اینکه لیست های بازشونده و منوهای بازشونده چطوری طراحی میشن صحبت کردیم ، اما استفاده کردن از منوها در حالت منوی قرصی به شکل زیر :

تب ها با لیست بازشونده

منوهای پویا

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

برای ساخت این منوها کافی است ویژگی data-toggle=”tab” را به هر لینک اضافه کنیم ، کافیه کلاس .tab-pane رو با یک id شاخص در یک المان تگ قرار بدیم و کلاس .tab-content رو هم بذاریم.

این نکته رو هم به یاد داشته باشید برای نمایش حالت فعال کلاس .active و حالت غیرفعال .fade را قرار دهیم.

برای حالت منوی قرص از ویژگی data-toggle=”pill” کافیه تا استفاده کنیم ، به مثال زیر توجه کنید :

ویدیوی قسمت نوزدهم

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

موفق باشید.

مرتضی افضلی

مرتضی افضلی

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

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

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

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد.