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

- visibility ۱۲ mode_comment

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

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

  • تکمیل بخش ظاهری قالب توسط آنچه که آموخته ایم
info توجه

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

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

comment دیدگاه کاربران
حمید رضا مصطفی زاده

سلام استاد
تو این جلسه شما یک کلاسی با نام progress در فایل p1.css (این فایل همون فایلی هست که تنظیمات css رو خودمون شخصی سازی میکنیم) تعریف کردید
اما همون طور که شما اشاره کردید در اینجا این کلاس چون با کلاس های بوت استرپ تداخل داشت و هم نام بود به درستی اعمال نشد.
حالا سوال من این هست که :
ما تو خط کد های HTML فایل p1.css رو بعد از فایل های بوت استرپ لود کردیم و از طرفی شما هم میگید اگر دو تا کلاس مشابه داشتیم اولویت با کلاسی هست که فایل های css که برای آن انجام لود کردیم پایین تر باشد.
و یا به عبارت ساده تر از بالا به پایین فایل ها لود میشوند.
پس چرا این کلاس progress که ما تو p1.css نوشتیم و شخصی سازی کردیم اعمال نشد؟

وحید صالحی

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

mahdi7610

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

.service {
background-color: #1AD54F;
height: 100mh;
padding: 40px;
color: #fff;
}

وحید صالحی

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

مصطفی کریم زاده

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

وحید صالحی

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

سحر بشری

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

وحید صالحی

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

آرش ذاکری

سلام بر آقای وحید صالحی عزیز، خسته نباشید
در قسمت «تماس با ما» اول یه div با کلاس col-md-10 ایجاد کردین، بعدش یه form با کلاس col-md-12، اما بعدش دوتا div با کلاس col-md-5 ایجاد کردین(یکی برای نام و یکی برای ایمیل) و گفتین که هرکدوم 5 تا از اون div اولی با کلاس col-md-10 بهشون اختصاص داده میشه، این در حالیه که اگه بخوایم مطابق رویه Nesting عمل کنیم، می بایست به هرکدوم از این دوتا div، کلاس col-md-6 بدیم.این مورد برای div مربوط به پیام هم انجام شده، یعنی بجای کلاس col-md-12، کلاس col-md-10 اختصاص داده شده، میخواستم ببینم چرا اینجا متفاوته؟
مورد دیگه اینکه در ابتدای کار که اولین div رو با کلاس col-md-10 تعریف کردین، بهش offset-2 دادین و میخواستم ببینم چرا offset-1 ندادین؟
خیلی ممنون

وحید صالحی

چون خواستیم عرضش کمتر بشه دوست عزیز و از 10 استفاده کردیم تا 2 تا ستون کمتر استفاده بشه
اگر offset-1 می دایم فقط به اندازه 1 ستون حرکت می کرد و مجموع ستون ها هم 11 می شد
دوست عزیز با توجه به سوالاتتون احتمالا جلسات رو با دقت مشاهده نکرید بهتر یکبار دیگه با تمرکز بیشتر مشاهده کنید پاسخ این سوالاتتون رو بطور کامل میگیرید
موفق باشید

Masoud Azimi

با سلام و تقدیم احترام
ببخشید یک سوال داشتم.
تو استفاده از پلاگین Easing چرا بررای رویدادش از متد bind استفاده شد؟ امکان نداشت مستقیم از متد Click استفاده بشه؟
ممنون

وحید صالحی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.