nekouy7nk

ساخت منو و زیر منوی ریسوپانسیو با بوت استرپ4 یا غیر بوت استرپ

11 پست در این موضوع

سلام به همه

من چندتا افزونه منو ساز جوملا نصب کردم اما همه آنها در قالب من کلا به هم میریزن و اون استایل هایی که باید داشته باشند ندارند برای همین هم برای منوی ریسوپانسیو دچار مشکل شدم.البته میتونم یه منو ساده با زیرمنو برای نمایش در دکستاپ درست کنم اما برای تبلت و موبایل نمیتونم.چکار باید بکنم لطفا راهنمایی کنید؟ افزونه هایی که نصب کردم روی قالب پورتواستار جوملا بهتر جواب دادن اما هر چه تلاش کردم بفهمم قالب پورتو استار چه عناصری برای منو تعریف کرده که بهتر نشون میده نشد.البته میتونستم به کلاس های افزونه های نصب شده css بدم اما پیچیده بودن و به جاوا اسکریپت هم نیاز داشتند. خود بوت استرپ هم کلاس داره اما من پراکنده یاد گرفتم و چون منو از داخل ماژول لود میشه نمیتونم به  ul و li های منو کلاس دراپ داون یا باتن و غیره بدم  ممنون لطفا راهنمایی

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

سلام

از چه قالبی استفاده می کنی؟

دمو بده ببینم

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

سلام خودم یه قالب طراحی کردم  گذاشتم این جا ببینید

http://myportalnews.ir/

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

Share this post


Link to post
Share on other sites

به نظر میاد قالب رو با بوت استراپ 4 طراحی کردی.

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

چون جوملا و افزونه هاش ذاتا از بوت استراپ 3 پشتیبانی می کنن و بعضی افزونه ها با نسخه 4 بوت استراپ به مشکل می خورن

همچنین  از گرید های بوت استراپ 4 اصلا استاندارد و صحیح استفاده نکردی. یکبار دیگه مستندات layout بوت استراپ 3 رو بخون و مو به مو اجرا کن. اول container یا  contianer-fluid هست. سپس داخلش row هست و در آخر کلاس های col داخل row قرار می گیره.

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

ممنون که جواب دادی

راستش اصلا از بوت استرپ استفاده نکردم خودم اومدم براساس اون سایزهایی که بوت استرپ برای دکستاپ و موبایل و تبلت تعریف کرده بود یه فایل css  مدیا زدم و به قسمت های سایت گفتم در این سایز این طوری بشید. فقط از کلاس row استفاده کردم . به خاطر اینکه col  اون اندازه ای که  می خوایم نمیدن مثلا من در یه جایی col-md-4.5 میخوام اما col اندازه 4.5 نداره یا باید 4 یا 5 استفاده کنم. طرح قالب چطور بود؟ به غیر رنگ آمیزیش. حالا برای منو چکار کنم به نظرت؟

Share this post


Link to post
Share on other sites

وقتی از سیستم های تولید محتوا مثل جوملا یا ووردپرس استفاده می کنی باید طبق استاندارد های اون سیستم کد بزنی.

کلاس container از چپ و راست 15 پیکسل padding داره.

کلاس row از چپ و راست 15 پیکسل margin منفی داره که padding کلاس container رو می پوشونه.

کلاس های col هم هر کدوم 15 پیکسل از چپ و راست padding دارن. ولی خب می تونی مثلا به جای 12 ستون ( که تو بوت استراپ مرسوم هست )، تعداد بیشتر یا کمتری ستون برای خودت درست کنی.

اگرمی خوای layout خودت رو بزنی باید این نکته ها رو رعایت کنی. این نکته ها رو رعایت کنی منو هات باید اصولا درست نمایش داده بشن.

یه کلاس مهم دیگه تو بوت استراپ clearfix هست که جزو واجباته. برو دقیقا ببین چکار می کنه و تو طراحیت لحاظ کن.

اگر ناراحت نمیشی از لحاظ فنی طراحی قالبت خیلی جای کار داره. کلا داری راه رو اشتباه میری. الکی padding و margin زدی. این دوتا خصیصه رو خیلی باید روی حساب بکار ببری. گوشه های کادر های باید مماس هم باشه تا زیبایی قالبت حفظ بشه. پائین صفحه هم یه اسکرول افقی داری که مشخصه خیلی بد کد زدی.

بقول بعضی همکارها اسپاگتی کد زدی. 

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

سلام به همه

الان بی زحمت یه نگاه بنداز ببین قالب بهتر نشد نظرتو بگو هرکسی تونست نگاه کنه نظرشو بگه اون باکس هایی که بردر داره بهشون توجه نکن یک سریشون مخفی میشن یک سری دیگشون ماژول میره توشون.ممنون

http://myportalnews.ir/

 

Share this post


Link to post
Share on other sites

سلام

خیلی بهتر شد. فقط دونکته. 

1- به جای section از div استفاده کن. وقتی از section استفاده می کنی حتما باید یه تگ h1 تا  h6 داشته باشی و این اصلا مورد تائید www نیست. ولی تو div نیازی نیست داشته باشی. پس از div استفاده کن.

2- کلاس های col رو از سایز کوچیک به بزرگ بنویس. یعنی مثلا اول برای سایز sm باشه و در آخر سایز xl که به نظر میاد اینمورد رو رعایت کردی

3- کلاس های col ای که تعداد ستون یکسان دارن رو تکرار نکن. مثلا الان یه جا همچین چیزی نوشتی

<div id="block-center" class="col-12 col-sm-12 col-md-8 col-lg-7 col-xl-6">

با توجه به نکته 2 و 3 باید اینطوری بنویسی

<div id="block-center" class="col-12 col-md-8 col-lg-7 col-xl-6">

چون تعداد ستون ها همیشه از سایز کوچیک به بزرگ ارث می رسه. یعنیوقتی جایی زدی col-12 ، این اندازه به سایز xl هم داده میشه و دیگه نیازی نیست بنویسی col-xl-12

4- یه جایی نوشتی 

<div id="block-right" class="col-lg-2 col-xl-2 hidden hidden-sm hidden-md ">

کلس hidden رو برای دو تا سایز sm و md نوشتی. باتوجه به اینکه از سایز sm محتوا مخفی میشه، دیگه نیازی نیست دوباره برای سایز md هم تکرار بشه. پس کد بالا رو به این شکل ویرایش کن

<div id="block-right" class="col-lg-2 col-xl-2 hidden hidden-sm ">

ولی گر قراره محتوا در سایز sm مخفی باشه و در سایز مثلا lg دیده بشه باید این شکلی بنویسی

<div id="block-right" class="col-lg-2 col-xl-2 hidden hidden-sm d-lg-block ">

5- نکته آخر اینکه یادت رفته کلاس clearfix رو به کدهات اضافه کنی. کلاس مهمیه. بروببین چکار می کنه تا درکش کنی

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

کلاس clearfix نمیدونم برای چیه؟ و کجا باید اضافش کنم؟ یه مطلب خونده بودم میگه توی یه row اگر دو تا باکس مثلا کنار هم باشند و جاشون نشه کلاس clearfix میاد row میشکنه و باکس دوم میبره خط بعدی و با باکس اول طراز میکنه.اما من توی قالبم از این باکسا ندارم و نمیدونم کاربردهای دیگه این کلاس چیه؟ توی قالبم اکثرا باکس هایی که جاشون نمیشه را مخفی میکنم تا ساز صحفه بزرگ بشه دوباره نمایش میدم.میشه لطفا در مورد این کلاس توضیح بیشتری بدهید و یا بگوید کجای قالبم اضافش کنم.ممنون

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری