می خوام طراحی ریسپانسیو یاد بگیرم.

[e_a_23]

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

[qartalonline]

فک کنم قبلا تو انجمن تاپیکی در این مورد ایجاد شده بود.
به لینک زیر هم یه سری بزنید:
http://webhub.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-css3

[e_a_23]

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

[e_a_23]

از من خواسته شده که اگر کاربر سایز پنجره مرورگر رو کوچک یا بزرگ کرد شکل سایت به هم نخوره. و ریسپانسیو فقط برای لپ تاپ و دسکتاپ باشه نه موبایل و تبلت و ... . سایز هایی که باید در نظر بگیرم 1366*768 , 1280*768 , 1024*768 , 800*600 هست؟

[meysam1366]

سلام دوست عزيز

بهترين راه استفاده از بوت استرپ هستش

موفق باشيد

[e_a_23]

اینو می دونم. در مورد سایز سوالمو جواب بدید لطفا.

[e_a_23]

دوستان، من یه قالب رو طراحی کردم کامل و الان اونو می خوام ریسپانسیو کنم. باید از اول قالبو با بوت استرپ درست کنم یا راه دیگه ای هم هست که همین قالبو ریسپانسیو کنم؟

[e_a_23]

توی http://webhub.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-css3
از html5 استفاده کرده. آیا الزاما باید از html 5 استفاده کنیم؟

[e_a_23]

خودم جواب خودمو پیدا کردم. ربطی به html5 نداره. از رو همون لینک بالا یاد می گیرم.

[e_a_23]

فقط لطفا جواب این سوالمو بدین:

از من خواسته شده که اگر کاربر سایز پنجره مرورگر رو کوچک یا بزرگ کرد شکل سایت به هم نخوره. و ریسپانسیو فقط برای لپ تاپ و دسکتاپ باشه نه موبایل و تبلت و ... . سایز هایی که باید در نظر بگیرم 1366*768 , 1280*768 , 1024*768 , 800*600 هست؟

[qartalonline]

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

[e_a_23]

منظورش اینه که وقتی پنجره رو بزرگ یا کوچیک می کنیم درست نمایش داده بشه سایت.
تو این آموزش خوندم که باید همه المان ها رو به بلک تبدیل کنیم. آیا این کار ضروریه؟

[e_a_23]

دیگه غیر از اینکه اسکرول افقی نخوره مگه چه منظور دیگه ای می تونه داشته باشه؟

[qartalonline]

بله بهتره اکثر المانها رو به بلوک تبدیل کنید (نه همه). این کار بیشتر به خاطر عدم به هم ریختگی و نمایش یکسان در مروگرها توضیه میشه.

بهتره به مشتری تون بگید که یه سایت ریسپانسیو و یه سایت غیر ریسپانسیو معرفی کنن اینطوری منظورشون رو بهتر متوجه میشید (کاری که من انجام دادم).

[SlowCode]

سایز هایی که باید در نظر بگیرم 1366*768 , 1280*768 , 1024*768 , 800*600 هست؟
به جز آخری بقیه درستن. دیگه 800*600 نداریم که!

از من خواسته شده که اگر کاربر سایز پنجره مرورگر رو کوچک یا بزرگ کرد شکل سایت به هم نخوره. و ریسپانسیو فقط برای لپ تاپ و دسکتاپ باشه نه موبایل و تبلت و ... .
قسمت های قرمز متناقض هستن!
ولی منظورت رو میشه فهمید.

با بوت استرپ خیلی ساده است! میتونی همون قالب رو به بوت استرپ تبدیل کنی فقط باید با col-xs-xx , col-sm-xx , col-md-xx , col-lg-xx آشنا بشی.
تو یه روز میتونی یاد بگیری فوقش یه روز هم طول میکشه تا تبدیلش کنی.

----------------------------------------------------------------------------------
به نظرم منم این مشتری شما داره برعکس منظورش رو میرسونه!
همون کاری رو بکن که دوستمون گفت.

[e_a_23]

مشتری منظورش همین ریسپانسیو بود. تو رو خدا کمکم کنید. بوت استرپ رو دانلود کردم و گذاشتم. یه ویدیوی آموزشی هم دیدم. فایده نداشت. یه نفر توضیح بده که چیکار باید بکنم خیلی ممنون و سپاسگزار می شم. اصلا نمی دونم قالبمو باید چیکار کنم. با وارد کردن استایل بوت استرپ کل قالب به هم می ریزه که طبیعی هم هست.
آیا باید کل قالب رو به تعدادی row که شامل span هست تبدیل کنم و همه عناصر صفحم از جمله button , form , drop down , ... رو از سایت بوت استرپ کدهاشونو بذارم؟ یعنی در واقع از نو قالبو بسازم؟
در ضمن گفتن که اگه قالبم استاندارد نباشه موقع ریسپانسیو کردن به هم می ریزه. قالب استاندارد یعنی چه جور قالبی؟ باید چه ویژگی هایی داشته باشه؟

[e_a_23]

در ضمن به من گفتن برای تبدیل این قالب: www.hotelkade.com به ریسپانسیو، چون بار اولت هست یه هفته زمان می بره. درسته؟

[SlowCode]

این قالب هیچی نداره! شما اگه خوب کار کنی تو دو روز میتونی تمومش کنی!
واسه افراد مسلط حداکثر 4 الی 5 ساعت طول میکشه تا اینو تبدیل کنن.
فیلم آموزشی لیندا رو دانلود کن (http://p30download.com/fa/entry/48661/)

من خودم با این فیلم شروع کردم.
بعد چیزهای دیگه رو از داکیومنت خود سایت بوت استرپ بخون.
مثلا اگه میخوای dropdown یا navbar اضافه کنی.
به نظرم بعد دیدن این آموزش یه چرخی تو صفحات css,component سایت بزن و بخونشون(حداقل به چشمت بخورن)

-----------------------
در مورد به هم ریختن قالب. باید استایل ها رو override کنی.
اسم کلاس ها:
container,table
به جز اینا کلاس دیگه ای ندیدم که تو بوت استرپ هم باشه.

[f_talebi]

این قالب هیچی نداره! شما اگه خوب کار کنی تو دو روز میتونی تمومش کنی!
واسه افراد مسلط حداکثر 4 الی 5 ساعت طول میکشه تا اینو تبدیل کنن.
فیلم آموزشی لیندا رو دانلود کن (http://p30download.com/fa/entry/48661/)

من خودم با این فیلم شروع کردم.
بعد چیزهای دیگه رو از داکیومنت خود سایت بوت استرپ بخون.
مثلا اگه میخوای dropdown یا navbar اضافه کنی.
به نظرم بعد دیدن این آموزش یه چرخی تو صفحات css,component سایت بزن و بخونشون(حداقل به چشمت بخورن)

-----------------------
در مورد به هم ریختن قالب. باید استایل ها رو override کنی.
اسم کلاس ها:
container,table
به جز اینا کلاس دیگه ای ندیدم که تو بوت استرپ هم باشه.

آنتی ویروس آدرسو بلاک کرد
ببخشید override کردن قالب یعنی چی

[e_a_23]

منم نمی دونم override کردن چه جوریه.

[Mandana Ms]

آنتی ویروس آدرسو بلاک کرد
ببخشید override کردن قالب یعنی چی
سلام من فکر کنم override کردن دوباره بازنویسی کد های html باشه قسمت استایلش!دوستان که بهتر بلدند حتما میان توضیح میدن اگه اشتباه گفتم شرمنده ولی من میگم شما که میخوای از بوت استرپ استفاده کنی زیاد قالبتو بهم نمیریزه مثال میگم شما اینو زدی مثلا :<div class="div1"> و توی css برای div1 هم کد زدی و استایل دادی مثلا عرضشو زدی 70% حالا با بوت استرپ که میخوای کار کنی بجای این تگ میزنی <div class="span8"> یا تو ورژن جدیدتر <div class="col-md8"> (باید ببینی توی این دیو چقدر از فضای صفحه ات میخوای اشغال شه!) بعد اینجا برای اینکه تمام اون استایل هایی که تو قبلی زدی اجرا بشه مثلا ارتفاعش رنگش هرچی که قبلا زدی توی ادامه تگ بزن id="div1" یعنی بجای کلاس از آی دی بیا استفاده کن که هردو تارو داشته باشی توی کلاس هم میشه چند تارو با هم زد(<div class="span8 div1" id="div2">) ولی شاید بهتر باشه اینجا اینکارو نکنی به هر حال دوستان وارد ترند امیدوارم کمکت کرده باشه.

[e_a_23]

ممنون از کمک های بسیار مفیدتون دوستای عزیزم. می رم فیلمی رو که دوستمون توصیه کردن بخونم و کارو انجام بدم. اگه مشکلی داشتم بازم می پرسم. سپاسگزارم از همگی. :)

[SlowCode]

آنتی ویروس آدرسو بلاک کرد
بله. سایت هایی که آپدیت افلاین نود 32 رو میزارن توسط نود32 بلاک میشن.
واسه دیدن سایت هم میتونی فایروال ویروس کش رو غیرفعال کنی(روش کوتاه مدت)
روش دیگه هم اینه که مسیر زیر رو تو تنظیمات نود32 بری:
Web and email -> Web access protection -> Url address managment -> add
بعد *p30download.com* رو وارد کن.


ببخشید override کردن قالب یعنی چی
override قالب نه! کلاس های css
یعنی یه کلاس داریم که چندتا خاصیت داره(مثلا col-xs-xx که به طور پیشفرض float:left هست) میاییم واسه همون کلاس اون خاصیت رو عوض میکنیم(مثلا بهش float:right میدیم)
مزیت این روش اینه که به فایل اصلی(یا همون بوت استرپ) دست نمیزنیم! تو قالب خودمون یه چیزایی رو بهش اضافه میکنیم.

الان برای مثال تو قالب هتل کده کلاس container شما override شده.

.container
{
width: 980px;
margin: 0 auto;
}

چون بهش پهنا داده شده. در صورتی که تو کلاسهای بوت استرپ کلاسی به این نام هست که بهش پهنایی با اندازه دیگه داده شده.

[e_a_23]

یه سوال: آیا لازمه عرض container خودم رو به مقدار 960 پیکسل تغییر بدم؟ چون خوندم که استاندارد 960 پیکسل هست و اینکه ممکنه تقسیم صفحه به 12 ستون، با توجه به اینکه من به جای 960 پیکسل از 980 استفاده کردم مشکلی ایجاد کنه؟

[SlowCode]

نه دیگه! وقتی میخوای سایت ریسپانسیو باشه نباید با به این صورت بهش سایز بدی!
شما فقط با col-md, .... باید سایز بدی.

با توجه به اینکه من به جای 960 پیکسل از 980 استفاده کردم مشکلی ایجاد کنه؟
نه مشکلی نیست. 20 پیکسل چیه که بخواد مشکل ایجاد کنه!