دوره مجازی بوت استرپ (جلسه 16) : پروژه اول - طراحی قالب مدرن فلت به سبک Hero Header - بخش اول



visibility  
mode_comment   ۲۶

در جلسه شانزدهم و بخش اول می پرداریم به استفاده عملی از فریم ورک بوت استرپ در قالب طراحی یک قالب مدرن فلت به سبک Hero Header .در جلسات مربوط به پروژه های نهایی علاوه بر آشنایی کامل با ایجاد قالب های واکنشگرا تحت فریم ورک بوت با اقدام انواع پلاگین ها ,کدهای جاوااسکریپت و css برای هر چه بهتر شدن ظاهر قالب ها آشنا خواهیم شد و در طول این جلسات به مبحث سفارشی سازی بوت استرپ توسط css و جاوااسکریپت نیز خواهیم پرداخت و در کل موارد بسیار کاربردی رو بررسی خواهیم کرد...

 

مطالب مطرح شده در این جلسه عبارتند از :

  • طراحی منوی کاملا سفارشی
  • کنترل و ایجاد استایل های متفاوت برای منو ها در وضعیت های مختلف توسط جاوااسکریپت
  • کنترل نحوه نمایش المان ها در مدیا کوئری های خاص برای تغییر حالت نمایش آنها در اندازه های مختلف
  • طراحی اسلایدر قالب بصورت تمام صفحه (Hearo Header)
  • بررسی انیمیشن ها در css و ایجاد دکمه ای با انیمیشن خاص (محبوب)
info توجه

این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش بوت استرپ 3

comment دیدگاه کاربران
جعفر پیشدادی replyپاسخ

با سلام ..جهت اطلاع ..در لیست اخرین مطالب این درس یا پست وجود ندارد….یا نمایش داده نشده….

وحید صالحی

موجوده دوست عزیز یکبار ctrl+F5 رو اعمال کنید

alihoseiny replyپاسخ

سلام.
افکت اسلایدر و ارتفاع تصویر ها (max-height: 100vh)در مرورگر های وب کیت اجرا نمی شود.

وحید صالحی

این مقدار رو جای گزیkk کنید min-height: 100vh

mohammad005 replyپاسخ

سلام
من قسمت منوی این پروژه را می خوام به یک قالب جوملا اضافه کنم همه چی درسته ولی در قسمت فایل jquary مشکلی هست. توی console بررسی کردم این ارور را میده.
Uncaught TypeError: Failed to execute ‘scroll’ on ‘Window’: 2 arguments required, but only 1 present.

وحید صالحی

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

محمد مصری پور replyپاسخ

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

وحید صالحی

دوست عزیز این مورد بر میگرده به سازگار کردن یکسری از خصیصه های css3 در مرورگرهای مختلف در جلسه هم اشاره کردیم نیازی به درگیر کردن خودتون با این مورد نیست در پروژه دوم اسلایدر دیگری رو معرفی می کنیم که به مراتب بهتر از اسلایدر پیش فرض بوت استرپ هست و امکانات بیشتری هم داره,سبک تره و کاملا واکنشگرا و با تمام مرورگر های از جمله ie 6 سازگاره که بهتره از اون استفاده کنید

حمید رضا مصطفی زاده replyپاسخ

سلام
استاد این پری فیکس های که برای فلش های روی اسلایدر در نظر گرفتید برای مرورگر های مختلف به خوبی اجرا نمیشود!! علت توی transition هست اما کد صحیحش چی هست؟
همچنین فلش های next و pre به صورت نقطه چین در موزیلا و به طور صحیح در کروم نمایش داده میشود

وحید صالحی

مبحث transition به عنوان تمرین به عهده خودتون گذاشتیم چون مربوط به مبحث css میشه و باید روش تسلط لازم رو داشته باشید در گوگل جستجو کنید به راحتی جواب رو پیدا می کنید برای نقطه پین بودن فلش ها هم پون از فونت آیکون ها استفاده کردیم ممکنه فایل و cdn اون درست لود نمی کنید

سید احسان عظیمی replyپاسخ

ب نظرم اگه بحث انمیشین رو وارد پروژه نمیکردین خیلی بهتر بود

وحید صالحی

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

ali rezaee replyپاسخ

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

وحید صالحی

سلام باید direction اونها رو عوض کنید یا از نسخه ltr بوت استرپ استفاده کنید

فاطمه صنیعی replyپاسخ

سلام
من برای ساخت اسلایدر با مشکلی مواجه شده ام:
اینکه وقتی از عکس هایی که شما در پروژه از آن ها استفاده میکنید عکس ها تمام صفحه(col-md-12) را پر نمیکند
اما از عکس های دیگه که استفاده میکنم چنین مشکلی را ندارم
لطفا راهنمایی کنید چون میخوام من هم پروژه شما را درست کنم
با تشکر

وحید صالحی

به تگ img تصویر کلاس img-responsive رو اضافه کنید

مصطفی کریم زاده replyپاسخ

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

وحید صالحی

سلام بله رسپانسیو هست

Masoud Azimi replyپاسخ

با سلام خدمت حضرت استاد!!!
آقای مهندس یه سوال برام پیش اومد!!!
بخش منو توتگ بلاکی با کلاس container-fluid گذاشتیم
بخش اسلایدر هم تو تگ بلاکی دیگه با کلاس container-fluid .

پس چرا تصاویر اسلایدر زیر منو قرار گرفتن؟
چرا نمیرن خط بعد؟!!

ممنون

وحید صالحی

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

Masoud Azimi

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

وحید صالحی

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

Elnaz Eln replyپاسخ

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

وحید صالحی

سلام دوست عزیز اکثر سوالات شما ارتباطی با موضوع دوره نداره مثل همین سوال بخاطر همین مورد ممکنه پاسخ داده نشه… برای این کار باید از یک زبان سمت سرور مثل php استفاده کنید و توسط تابع mail و کدنویسی مورد نظر نظرات پس از ثبت توسط کاربر به ایمیلتون ارسال بشه

حمید درویش replyپاسخ

سلام استاد خسته نباشید
من چطوری میتونم عناوین منوبار مثل تماس با ما یا درباره ما رو به وسط انتقال بدم؟
خصوصیات text-align و margin جواب نمیده چرا؟

وحید صالحی

سلام ممنونم
margin:0 auto; قرار بدید

ارسال نظرات

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