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

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

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

192

Calendar-amico (2)

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

۱۳۹۹-۰۳-۱۰

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

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

ساخت منو

برای ساخت یک منوی ساده در بوت استرپ 4 کافیه تا از کلاس .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 مراجعه فرمایید.

موفق باشید.

مرتضی افضلی

مرتضی افضلی

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

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

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