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

[somaye-s]

سلام دوستان
من دو سوال دارم :
1 - یک سایت طراحی کردم , ازم خواسته شده توی موبایل و تبلت درست نشون داده بشه ... ازش پرسیدم بوت استرپ باید باشه ؟ میگه نه فقط ریسپانسیو باشه کافیه.
تفاوت این دو چیه؟؟
سایت مورد نظر parvazyab.com هست که توی pc درست نشون میده ولی توی موبایل و تبلت قسمت بالایی سایت بهم میریزه. اگه راهی باشه که سریعتر بتونم فقط جاهاییکه بهم ریخته رو درست کنم ممنون میشم راهنماییم کنید.


2 - ازم خواسته شده در این سایت با انتخاب گزینه " پرواز یک مسیره " تاریخ برگشت غیر فعال بشه ؟ برای کار چه باید بکنم؟ آیا مربوط به جی کویری و جاواست ؟ یا به بخش کدنویسی وردپرس است؟؟ چون من فقط تبدیل به html رو انجام دادم .

تشکر

[e_a_23]

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

[sepehrazimi]

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

[somaye-s]

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



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

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

[sepehrazimi]

بفرماید

http://aparnet.ir/117-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%82%D8%AF%D9%85-%D8%A8%D9%87-%D9%82%D8%AF%D9%85-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D 9%88-%DB%8C%DA%A9-%D8%B3%D8%A7%DB%8C

http://rbootstrap.ir/

[حمید . ه]

سلام
طراحی رسپانسیو با media query ها انجام میشه میتونید با یه جست و جو منابع زیادی رو پیدا کنید
اما در مورد بوت استرپ باید بگم که این فریم وروک ها برای راحتی کار هستن و شامل یک کیت کامل تمپلیت هم هستند که برای کار شما مفید نیست چون شما تمپلیت خودتون رو طراحی کردید و نیازی به اون امکانات زیاد ندارید
برای رسپانسیو کردن میتونید از گرید سیستم ها استفاده کنید که تعدادشون زیاده ولی من یکیشو که خیلی راحته استفاده ازش رو لینکشو میدم خواستید استفاده کنید
http://webdesign.tutsplus.com/articles/build-a-freshly-squeezed-responsive-grid-system--webdesign-14888

[e_a_23]

سلام
طراحی رسپانسیو با media query ها انجام میشه میتونید با یه جست و جو منابع زیادی رو پیدا کنید
اما در مورد بوت استرپ باید بگم که این فریم وروک ها برای راحتی کار هستن و شامل یک کیت کامل تمپلیت هم هستند که برای کار شما مفید نیست چون شما تمپلیت خودتون رو طراحی کردید و نیازی به اون امکانات زیاد ندارید
برای رسپانسیو کردن میتونید از گرید سیستم ها استفاده کنید که تعدادشون زیاده ولی من یکیشو که خیلی راحته استفاده ازش رو لینکشو میدم خواستید استفاده کنید
http://webdesign.tutsplus.com/articles/build-a-freshly-squeezed-responsive-grid-system--webdesign-14888
کار با اون مدیا کوئری ها زیاد راحت نیست و خیلی طول می کشه. برای تسریع کار بهتره از بوت استرپ استفاده کنن.

[somaye-s]

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

[حمید . ه]

کار با اون مدیا کوئری ها زیاد راحت نیست و خیلی طول می کشه. برای تسریع کار بهتره از بوت استرپ استفاده کنن.
منم خدمت دوستمون عرض کردم که از گرید سیستم ها استفاده کنند که آماده است
بوت استرپ کار بیهوده ای برای ایشونه چون نیازی به این همه امکانات ندارن
همچنین خود بوت استرپ رو باید زمان بذارن و یاد بگیرن ولی گرید سیستم ها تنها با اضافه کردن کلاس های css مشکلشون رو حل میکنند

[e_a_23]

آشنایی با گرید:
http://nardebaan.ir/15207-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%DA%AF%D8%B1%DB%8C%D8%AF-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8

http://www.webtarget.ir/blog/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-align-grid/


http://www.aparat.com/v/tLTRG



http://getbootstrap.com/css/#grid-options

[somaye-s]

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

[e_a_23]

شما باید با گرید کار کنی. دیگه عرض رو مثل قبل نمی دی.مثلا col-lg-12 خودش یه عرض مشخصی داره. باید کار با گرید رو یاد بگیرید که در بالا لینک دادم خدمتتون.

[somaye-s]

شما باید با گرید کار کنی. دیگه عرض رو مثل قبل نمی دی.مثلا col-lg-12 خودش یه عرض مشخصی داره. باید کار با گرید رو یاد بگیرید که در بالا لینک دادم خدمتتون.

ممنون از کمکتون ... پس باید css رو دوباره نویسی کنم و با گرید کار کنم این دفه؟

[e_a_23]

منم خدمت دوستمون عرض کردم که از گرید سیستم ها استفاده کنند که آماده است
بوت استرپ کار بیهوده ای برای ایشونه چون نیازی به این همه امکانات ندارن
همچنین خود بوت استرپ رو باید زمان بذارن و یاد بگیرن ولی گرید سیستم ها تنها با اضافه کردن کلاس های css مشکلشون رو حل میکنند
خب منظور شما اینه که خودشون مدیا کوئری بنویسن دیگه؟ سخت میشه خب. با بوت استرپ راحت تره.

[e_a_23]

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

[refugee]

همانطور که دوستان دیگه گفتن بوت استرپ یک فریم ورک است که قابلیت گرید بندی داره و صفحه شما رو خودش به 12 16 24 گریدی تقسیم میکنه . در حالت اولیه بوت استرپ خودش یه سری امکانات برای ریسپانسیو فراهم کرده که البتدایی است . و فقط خود بوت استرپ رو ریسپانسیو میکنه اگر بخواهید از این فریم ورک استفاده کنید نیاز است تا بقیه اجزا رو هم ریسپانسیو کنید .

اما در مورد ریسپانسیو هم که دوستمون گفتن یک تکنولوژی یا روش طراحی میشه گفت . توسط کوئری ها و .. شما قالب رو برای موبایل و تبدلت و .. اماده میکنید .

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

اما دقت کنید فقط استفاده از درصد و کوئری ریسپانسیو نیست . کامل مطالعه کنید .

[e_a_23]

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

[حمید . ه]

خب منظور شما اینه که خودشون مدیا کوئری بنویسن دیگه؟ سخت میشه خب. با بوت استرپ راحت تره.
نه دوست عزیز اینجوری که من فهمیدم ایشون اطلاعات زیادی در مورد رسپانسیو کردن نداشتند
بعد گفتم که با media query هاست که اگه دوست داشتن استفاده کنند
و در مرحله بعدی یک فریم ورک ساده برای گرید بندی معرفی کردم که لازم نباشه با مدیا ها کار کنند و آماده باشه همه چیز براشون
لطفا با دقت مطالعه کنید

[e_a_23]

مگه اینا رو شما نفرمودین؟

بوت استرپ کار بیهوده ای برای ایشونه چون نیازی به این همه امکانات ندارن
همچنین خود بوت استرپ رو باید زمان بذارن و یاد بگیرن ولی گرید سیستم ها تنها با اضافه کردن کلاس های css مشکلشون رو حل میکنند

[حمید . ه]

خب کجای فرمایش بنده اومده که برن مدیا یاد بگیرن خیلی خوبه ؟

[refugee]

لطفا بحث رو به بیراهه نکشید . خانم مهندس قبلا برای شما توضیح دادم بابت پروژتون .

[somaye-s]

بله , من هم برای این سایت تنها به ریسپانسیو احتیاج دارم و بوت استرپ لازم نیست.

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

[e_a_23]

بیراهه نیست جناب refugee. باید مشخص شه. آقایون الان مشخص کنید که واسه انجام ریسپانسیو چه راه هایی هست؟ مگه یکیش این نیست که خودمون مدیا کوئری بنویسیم؟ راه دیگه چیه؟ مگه استفاده از یه فریم ورک مثل bootstrap نیست؟ شاید من اشتباه متوجه شدم. یکی بیاد لطف کنه روشن کنه قضیه رو. وقتی میگید از بوت استرپ استفاده نشه مگه راه دیگه ای جز نوشتن مدیا کوئری داریم؟ ابهام زدایی لطفا.
در ضمن دوست عزیز،برادر refugee با عرض معذرت توضیحاتتون راجع به پروژم و اینکه از مدیاکوئری استفاده کنم از نظر برخی دوستان اشتباه بود:لبخندساده:.

[refugee]

در ضمن دوست عزیز،برادر refugee با عرض معذرت توضیحاتتون راجع به پروژم و اینکه از مدیاکوئری استفاده کنم از نظر برخی دوستان اشتباه بود:لبخندساده:.

چرا ؟ علت ؟ بگید چه روشی رو گفتن که منم یاد بگیرم .

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

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

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

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

[e_a_23]

خب منم همینو گفتم دیگه. وقتی از بوت استرپ استفاده نکنی باید خودت یه تغییراتی توی استایل و کدهات انجام بدی و از مدیا کوئری هم استفاده کنی که این روش به مراتب سخت تر و طولانی تر از استفاده از یه فریم ورک ریسپانسیو شده ی آماده هست.

[دانیال دزفولی]

سلام دوستان
من دو سوال دارم :
1 - یک سایت طراحی کردم , ازم خواسته شده توی موبایل و تبلت درست نشون داده بشه ... ازش پرسیدم بوت استرپ باید باشه ؟ میگه نه فقط ریسپانسیو باشه کافیه.
تفاوت این دو چیه؟؟
سایت مورد نظر parvazyab.com هست که توی pc درست نشون میده ولی توی موبایل و تبلت قسمت بالایی سایت بهم میریزه. اگه راهی باشه که سریعتر بتونم فقط جاهاییکه بهم ریخته رو درست کنم ممنون میشم راهنماییم کنید.


2 - ازم خواسته شده در این سایت با انتخاب گزینه " پرواز یک مسیره " تاریخ برگشت غیر فعال بشه ؟ برای کار چه باید بکنم؟ آیا مربوط به جی کویری و جاواست ؟ یا به بخش کدنویسی وردپرس است؟؟ چون من فقط تبدیل به html رو انجام دادم .

تشکر

مثل اینه که بگی فرق ماشین با هندونه چیه !!!! :)

[refugee]

مثل اینه که بگی فرق ماشین با هندونه چیه !!!! :)

تطبیق اشتباهی است دوست من .:چشمک:

[somaye-s]

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


@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 480px) {



@media only screen and (max-width: 320px) {

}

/** iPhone only **/
@media screen and (max-device-width: 480px) {

}

یا بهتر بگم برای چه مدیا کویری هایی بعضی از قسمت های css رو دوباره نویسی کنم؟

[e_a_23]

اینهمه من خودمو خفه کردم شما باز میخوای بری مدیا کوئری بنویسی؟

سایزها:http://barnamenevis.org/showthread.php?446974-در-طراحی-ریسپانسیو-چه-سایزهایی-رو-باید-درنظر-گرفت؟&p=1999686#post1999686

توجه داشته باشید که توی بوت استرپ از این مدیا کوئری ها استفاده شده. تست شده همه ی این سایزها و کارو خیلی راحت تر کرده.

[somaye-s]

اینهمه من خودمو خفه کردم شما باز میخوای بری مدیا کوئری بنویسی؟


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

[e_a_23]

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

http://barnamenevis.org/showthread.php?448600-تنها-راه-ریسپانسیو

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

[refugee]

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


@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 480px) {



@media only screen and (max-width: 320px) {

}

/** iPhone only **/
@media screen and (max-device-width: 480px) {

}

یا بهتر بگم برای چه مدیا کویری هایی بعضی از قسمت های css رو دوباره نویسی کنم؟

بله همینطوره .

مهندس احمدی اون فایلی که قبلا براتون ارسال کرده بودم رو اگر دارین برا ایشون بدین .

سپاس .

[e_a_23]

دو تا width دیگه هم هست: 980 و 1280
دارم ولی نمی دونم کجاست. اسمش هم یادم رفته.

[somaye-s]

گیج شدم:( ... هم از مدیا کویری رفتم و برای سایز مثلا 480 نوشتم ولی توی گوشی خودم که 480 کار نکرد و برای کمتر از 480 کار کرد
هم از گراید رفتم که کل طراحیمو ریخته بهم

چیکار کنم بنظرتون؟؟؟

[حمید . ه]

گیج شدم:( ... هم از مدیا کویری رفتم و برای سایز مثلا 480 نوشتم ولی توی گوشی خودم که 480 کار نکرد و برای کمتر از 480 کار کرد
هم از گراید رفتم که کل طراحیمو ریخته بهم

چیکار کنم بنظرتون؟؟؟

والا بنده خدمتتون عرض کردم که کافیه یک فایل css به پروژتون اضافه کنید و از کلاسهاش استفاده کنید
باز خودتون رو درگیر مدیاها کردید
چه کاریه آخه

[somaye-s]

والا بنده خدمتتون عرض کردم که کافیه یک فایل css به پروژتون اضافه کنید و از کلاسهاش استفاده کنید
باز خودتون رو درگیر مدیاها کردید
چه کاریه آخه

منظور شما این کدهای css بود؟؟
این قطعه کد بتنهایی میتونه کمکم کنه؟؟
یا باید فایل دیگه ای رو هم اضافه کنم؟؟
چون توی صفحه ای که معرفی کردین فقط همین کدها بود.


.bit-1 {width: 100%;}.bit-2 {width: 50%;}.bit-3 {width: 33.33%;}.bit-4 {width: 25%;}.bit-5 {width: 20%;}.bit-6 {width: 16.6666666667%;}.bit-7 {width: 14.2857142857%;}.bit-8 {width: 12.5%;}.bit-9 {width: 11.1111111111%;}.bit-10 {width: 10%;}.bit-11 {width: 9.09090909091%;}.bit-12 {width: 8.33%;}

[حمید . ه]

منظور شما این کدهای css بود؟؟
این قطعه کد بتنهایی میتونه کمکم کنه؟؟
یا باید فایل دیگه ای رو هم اضافه کنم؟؟
چون توی صفحه ای که معرفی کردین فقط همین کدها بود.


.bit-1 {width: 100%;}.bit-2 {width: 50%;}.bit-3 {width: 33.33%;}.bit-4 {width: 25%;}.bit-5 {width: 20%;}.bit-6 {width: 16.6666666667%;}.bit-7 {width: 14.2857142857%;}.bit-8 {width: 12.5%;}.bit-9 {width: 11.1111111111%;}.bit-10 {width: 10%;}.bit-11 {width: 9.09090909091%;}.bit-12 {width: 8.33%;}


ببینید اون لینک تنها معرفیه اون فریم ورک بود
از طریق لینک زیر هم فایل هاشو دریافت کنید هم از قسمت getting started آموزش شو مطالعه کنید.
https://github.com/dope/lemonade

[حمید . ه]

اینم لینک رسمی خود فریم ورک http://lemonade.im/

[somaye-s]

اینم لینک رسمی خود فریم ورک http://lemonade.im/

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

[somaye-s]

سلام دوستان ...من سایتمو ریسپانسیو کردم ...و بیشتر از مدیا کویری استفاده کردم و یکمی هم از فریم ورک این سایت http://lemonade.im/

بنظرتون درست انجام دادم کارمو ؟؟برای کار اول ریسپانسیو چجوری انجام دادمش؟؟اینم لینک صفحاتم:
http://parvaz.dayanweb.ir
http://parvaz.dayanweb.ir/search-page.html

[e_a_23]

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

[refugee]

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

بنده هم پیشنهاد میکنم . مراحل زیر رو طی کنند .

1. نوشتن مدیا کوئری های جدا برای هر دیوایس

2. استفاده از متا تگ viewport :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

3.تنظیمات مدیا :
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" />
4. استفاده از اسکریپت modernize :
http://modernizr.com/ (
در صورت عدم پشتیبانی مرورگر کاربر از یک دستور، Modernizr به ما کمک می کند دستور یا تنظیمات جایگزین را قرار دهیم.
)

5. استفاده از TouchSwipe :

TouchSwipe (http://labs.rampinteractive.co.uk/touchSwipe/)
در حقیقت یک پلاگین برای کتابخوانه محبوب جی کوئری است. به کمک TouchSwipe می توانیم جسچرها و ایونت های مربوط به صفحات لمسی را در سایت خود قرار دهیم. Swipe، Pinch، Zoom و Scroll از جمله این جسچرها هستند.
http://labs.rampinteractive.co.uk/touchSwipe/demos/

شماره 4 و 5 ضروری نیست . هر چند استفاده ازش خوبه .

اگر متوجه نشدین . برام قالبتون رو ارسال کنید . بنده تنظیمات اولیه رو انجام میدم براتون ارسال میکنم الباقی رو خودتون درست کنید .
ایمیل : asila [dot] ir [at] hotmail [dot] com

موفق باشید .

[حمید . ه]

سلام
من با تبلت چک کردم مشکل خاصی نبود فقط محتویات صفحه وسط نبود و کمی فضای خالی از سمت چپ داشت
پیشنهاد میکنم سایتتون رو در این سایت چک کنید
http://www.responsinator.com/