در جلسه شانزدهم و بخش اول می پرداریم به استفاده عملی از فریم ورک بوت استرپ در قالب طراحی یک قالب مدرن فلت به سبک Hero Header .در جلسات مربوط به پروژه های نهایی علاوه بر آشنایی کامل با ایجاد قالب های واکنشگرا تحت فریم ورک بوت با اقدام انواع پلاگین ها ,کدهای جاوااسکریپت و css برای هر چه بهتر شدن ظاهر قالب ها آشنا خواهیم شد و در طول این جلسات به مبحث سفارشی سازی بوت استرپ توسط css و جاوااسکریپت نیز خواهیم پرداخت و در کل موارد بسیار کاربردی رو بررسی خواهیم کرد...
مطالب مطرح شده در این جلسه عبارتند از :
- طراحی منوی کاملا سفارشی
- کنترل و ایجاد استایل های متفاوت برای منو ها در وضعیت های مختلف توسط جاوااسکریپت
- کنترل نحوه نمایش المان ها در مدیا کوئری های خاص برای تغییر حالت نمایش آنها در اندازه های مختلف
- طراحی اسلایدر قالب بصورت تمام صفحه (Hearo Header)
- بررسی انیمیشن ها در css و ایجاد دکمه ای با انیمیشن خاص (محبوب)
:: توجه
این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.
سلام استاد خسته نباشید
من چطوری میتونم عناوین منوبار مثل تماس با ما یا درباره ما رو به وسط انتقال بدم؟
خصوصیات text-align و margin جواب نمیده چرا؟
سلام ممنونم
margin:0 auto; قرار بدید
سلام استاد خسته نباشید. متاسفانه من هر سوالی میپرسم شما جواب نمیدید. امیدوارم این سوالم رو جواب بدید
استاد من با توجه به درس های شما یک سایت طراحی کردم و هاست و دامنه هم خریدم و سایت رو بالا آوردم میخواستم اگه امکان داره راهنمایی کنید چطور میتونم مثلا بخش نظرات سایت رو به ایمیلم متصل کنم. که نظرات به ایمیلم بیاد سایتی که طراحی کردم مربوط به رزومم هست . خواهشمندم راهنمایی کنید. ممنون
سلام دوست عزیز اکثر سوالات شما ارتباطی با موضوع دوره نداره مثل همین سوال بخاطر همین مورد ممکنه پاسخ داده نشه… برای این کار باید از یک زبان سمت سرور مثل php استفاده کنید و توسط تابع mail و کدنویسی مورد نظر نظرات پس از ثبت توسط کاربر به ایمیلتون ارسال بشه
با سلام خدمت حضرت استاد!!!
آقای مهندس یه سوال برام پیش اومد!!!
بخش منو توتگ بلاکی با کلاس container-fluid گذاشتیم
بخش اسلایدر هم تو تگ بلاکی دیگه با کلاس container-fluid .
پس چرا تصاویر اسلایدر زیر منو قرار گرفتن؟
چرا نمیرن خط بعد؟!!
ممنون
سلام شما از کلای container استفاده کردید که خودش یک سطر رو بصورت کامل پر می کنه و موارد بعدی در زیرش قرار میگیره مباحث شبکه بندی رو با دقت مشاهده و مرور کنید
آقای مهندس منظورم این بود که تگ مربوط به اسلایدر از بالای مرورگر شروع میشه. درصورتی که فضای 70 پیکسل ابتدایی مرورگر باید مختص منو باشه.
یعنی ما باید اول منو رو میداشتیم. بعد در خط بعدی تصویر میومد. نمیدونم میتونم منظورم رو بروسنم یا خیر!!!
احتملا تگ منو رو نبستید یا اسلایدر رو در تگ که منوی رو تعرف کردید قرار دادید
با سلام خدمت استاد.
می خواستم بپرسم که در مدال ها اگه دکمه ای گذاشته بشه رسپانسیو هست؟اگه نیست چه کار باید کرد؟به طور کلی هر فیچری که داخل مدال قرار داده بشه واکنش گرا هست؟
سلام بله رسپانسیو هست
سلام
من برای ساخت اسلایدر با مشکلی مواجه شده ام:
اینکه وقتی از عکس هایی که شما در پروژه از آن ها استفاده میکنید عکس ها تمام صفحه(col-md-12) را پر نمیکند
اما از عکس های دیگه که استفاده میکنم چنین مشکلی را ندارم
لطفا راهنمایی کنید چون میخوام من هم پروژه شما را درست کنم
با تشکر
به تگ img تصویر کلاس img-responsive رو اضافه کنید
با عرض سلام خدمت استاد صالحی
برا اینکه بخواهیمindicators هایمان از سمت چپ به راست حرکت کند .حالتی پیش فرضی که دار د برعکس است.برای این کار باید چیکاری انجام دهم
سلام باید direction اونها رو عوض کنید یا از نسخه ltr بوت استرپ استفاده کنید
ب نظرم اگه بحث انمیشین رو وارد پروژه نمیکردین خیلی بهتر بود
مشکلی نداره شما می تونید ازش فاکتور بگیرید و استفاده نکنید اما در کنارش یک مورد رو که خیلی این روزها در طراحی قالب استفاده میشه و باب شده رو ه همین مبحث انیمیشن ها هست رو هم فرا گرفتید که فکر نمی کنم بد باشه…
سلام
استاد این پری فیکس های که برای فلش های روی اسلایدر در نظر گرفتید برای مرورگر های مختلف به خوبی اجرا نمیشود!! علت توی transition هست اما کد صحیحش چی هست؟
همچنین فلش های next و pre به صورت نقطه چین در موزیلا و به طور صحیح در کروم نمایش داده میشود
مبحث transition به عنوان تمرین به عهده خودتون گذاشتیم چون مربوط به مبحث css میشه و باید روش تسلط لازم رو داشته باشید در گوگل جستجو کنید به راحتی جواب رو پیدا می کنید برای نقطه پین بودن فلش ها هم پون از فونت آیکون ها استفاده کردیم ممکنه فایل و cdn اون درست لود نمی کنید
با عرض سلام و خسته نباشید خدمت استاد صالحی عزیز
سوالم درباره ی اجرا نشدن افکت اسلایدر در کروم هستش چون در فایر فاکس درست عمل میکنه ولی در کروم افکت کار نمیکند و اسلایدر به صورت fade in تغییر نمیکنه
خودم یه جستجو هایی کردم ولی به جایی نرسیدم شایدم درست سرچ نکردم !!؟؟
به هر حال ممنون میشم اگر پاسخ بدید.
با تشکر
دوست عزیز این مورد بر میگرده به سازگار کردن یکسری از خصیصه های css3 در مرورگرهای مختلف در جلسه هم اشاره کردیم نیازی به درگیر کردن خودتون با این مورد نیست در پروژه دوم اسلایدر دیگری رو معرفی می کنیم که به مراتب بهتر از اسلایدر پیش فرض بوت استرپ هست و امکانات بیشتری هم داره,سبک تره و کاملا واکنشگرا و با تمام مرورگر های از جمله ie 6 سازگاره که بهتره از اون استفاده کنید