راهنمایی برای تک صفحه واکنش گرا با بوت استرپ

این تاپیک 9 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  مهران ،‏ 5 ماه و 3 هفته پیش .

این تاپیک تاکنون 260 بازدید داشته است .

نویسنده پست
شنبه ، 18 ژوئن 2016     7:37 ب.ظ #


محمد محمد

Subscriber
4 پست1 تاپیک

سلام دوستان عزیز

من میخواستم با بوت استرپ یک صفحه مثل این سایت http://www.shatel.ir/festivals/spring/  ایجاد کنم

ولی توی قسمت اول موندم چطور باید استایلی به تصویرم بدم که مثل این سایت عرضش با مرورگر تنظیم بشه و ارتفاعش هم همینطور باشه چون اگر این سایتو دقت کنید ارتفاعش اینطور نیست !!

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

خیلی ممنون میشم کمی راهنماییم کنید دارم کم کم html و cssو بوت استرپ رو یاد میگیرم ولی خیلی کار داره هنوز :)

با تشکر از وقتتون

0  تشکر
یکشنبه ، 19 ژوئن 2016     12:16 ق.ظ #


ndr053

Subscriber
11 پست0 تاپیک

سلام

صفحه ای که آدرس دادید در حال حاضر ارور 404 میده

چیزی که متوجه شدم فکر کنم جناب آوند توی جلسه 20 طراحی وب توضیح دادند

http://up.7learn.com/l/7Lui3/demos/20/index.html

http://www.7learn.com/tutorials/ui-p20-project3-a-modern-template

1  تشکر
یکشنبه ، 19 ژوئن 2016     10:51 ق.ظ #


مهران

Subscriber
166 پست2 تاپیک

سلام آقا محمد

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

اگر سوالتون این بوده باشه کار خیلی ساده اس و نیازی به بوت استرپ نیست فقط کافیه در فایل css این استایل رو بدید:

--------------------------------

img {
    max-width: 100%;
    height: auto;
    }

--------------------------------

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

1  تشکر
یکشنبه ، 19 ژوئن 2016     3:16 ب.ظ #


محمد محمد

Subscriber
4 پست1 تاپیک

ممنونم از دو دوست عزیز

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

و در مورد استایل من این کار و انجام دادم ولی نشد

http://yoopi.tk/

اگر توجه بفرمایید عکس ها از دیواره ها فاصله دارند!!

و اینکه اونطور که عرض کردم که عکس هم از عرض و هم از ارتفاع به اندازه صفحه بشه نیست ! حالا نمیدونم منظورم رو متوجه شدید یا خیر ؟

خیلی ممنونم

0  تشکر
یکشنبه ، 19 ژوئن 2016     3:21 ب.ظ #


محمد محمد

Subscriber
4 پست1 تاپیک

یک موردش رو پیدا کردم باید این استایل رو اضافه میکردم

body, html {
margin: 0px;
padding: 0px;
}

حالا مورد دوم رو نمیدونم

0  تشکر
یکشنبه ، 19 ژوئن 2016     4:14 ب.ظ #


محمد محمد

Subscriber
4 پست1 تاپیک

میشه بفرمایید آیکون توی مرورگر شما نمایش داده میشه ؟

برای من فقط توی گوشیم نشون داده میشه و فایرفاکسم نشونش نمیده!

0  تشکر
یکشنبه ، 19 ژوئن 2016     6:30 ب.ظ #


محمد محمد

Subscriber
4 پست1 تاپیک

خوب

مورد دیگه هم پیدا کردم

img{
position:relative;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}

باعث میشه عکس هم از عرض و هم از ارتفاع توی صفحه های مختلف واکنش گرا باشه و کامل توی صفحه باشه

در اصل همون کد Mehran عزیز هست ولی ارتفاعش هم با صفحه ثابت میشه

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

و اینکه چطور میتونم اون اسکرول به پایین هم مثل اسکرول به بالا کاری کنم اسکرول بشه و یکدفعه نیاد پایین؟

خیلی ممنونم

0  تشکر
دوشنبه ، 20 ژوئن 2016     1:40 ق.ظ #


مهران

Subscriber
166 پست2 تاپیک

سلام مجدد

من منظور شما و سوال شما رو الان متوجه شدم و خوش حالم تونستید به پاسخ سوالتون بپرسید

درمورد سوال دومتون هم که بخش بخش باید جواب داد

اول اینکه خواستید عکس اسکرول به پایین ریسپانسیو بشه در فایل تون یه استایل inline بهش دادید به این صورت:

height:auto; width:128px

که با توجه به مشخصات صفحه width رو 12.7% قرار بدید تا در صورت تغیر سایز صفحه متناسب با اون تغییر کنه

در مورد اسکرول به بالا هم کار به این شکه باید وارد فایل style.css در پوشه ی space lover_files شوید و عرض .cd-top رو هم به شکل بالا تغییر بدید ولی باز هم احتمالا مشکلی پیش خواهد آمد اینکه به کلاس .cd-top این ویژگی ها را داده اید:

position: fixed;
bottom: 40px;
right: 10px;

که در مرورگر های با صفحه نمایش کوچک خوب نمایش داده نمیشه(میوفته وسط عکس ها و اگر متن می بود میوفتاد وسط متن ها) و بهتره همین ها رو هم به درصد انتخاب کنید.

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

1  تشکر
دوشنبه ، 20 ژوئن 2016     1:47 ق.ظ #


مهران

Subscriber
166 پست2 تاپیک

در مورد بخش دیگه ی سوالتون که گفتید چطوری همانند اسکرول به بالا اسکرول با پایین یه دفعه ای پایین نیاد باید به عکس هاتون id بدید و مشخص کنید که با هر دفعه کلید روی عکس به ترتیب به آی دی ها بره و برای اینکه سرعت خاصی داشته باشه باید از جاوااسکریپت استفاده کنید.البته فکر کنم با css3 هم بشه ولی من الان یادم نیست چطور.

میتونید به این آموزش سر بزنید:

http://www.7learn.com/tutorials/back-to-top-button-behaves-like-real-elevator

همچنین با سرچ در گوگل در مورد ساخت اسکرول به بالا به نتایج جالبی می تونید برسید.(ساخت اسکرول به پایین مشابه ساخت اسکرول به بالاست همانند و قالب های شرکتی میتونید بسازید)

1  تشکر
دوشنبه ، 20 ژوئن 2016     1:55 ق.ظ #


مهران

Subscriber
166 پست2 تاپیک

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

http://up.7learn.com/l/7Lui3/demos/20/index.html#row3

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

موفق باشید.

1  تشکر
پست 1 تا 10 (از مجموع 10 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .