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

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

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

Free-Learn

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

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

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

Free-Learn

نمای گرید یا Grid View چیست؟

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

شاید سواله که اصلا چرا باید صفحه رو گریدبندی کنیم؟! صرفا برای راحتی کار خودمون هست و اینکه بدونیم داریم چکار میکنیم ، مثلا اگه من بخوام ۶۰ درصد از صفحه رو بزارم برای ستون سمت راست ، خب اگه گرید بندی کرده باشم خیلی راحت میتونم اینکارو انجام بدم. ( حتما در ادامه به مثال ها توجه نمایید )

فرض میکنیم صفحه مون رو میخوایم به ۴ ستون و هر ستون رو به ۲۵% تقسیم کنیم ، پس میایم بصورت زیر تعریف میکنیم :

حالا اگه من بخوام ۲ ستون در صفحه داشته باشم که یکیش ۲۵ درصد باشه و یکی دیگه ۷۵ درصد ، خیلی راحت میام و از کلاس های col-25 و col-75 استفاده میکنم. دقیقا میشه تصویر زیر »

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

همین دیگه ، حالا به راحتی هرجوری که دوس داشتید طرح بندی ایجاد کنید، مثلا میخواید ۲ ستون باشه و هر کدوم ۵۰% ، خب خیلی راحت از ۲ تا کلاس col-50 استفاده کنید.

Free-Learn

نحوه طراحی و استفاده از نمای گرید

خب برای ایجاد یک طرح بندی بر اساس گرید، اولین کاری که باید کنیم استفاده از ویژگی box-sizing می باشد، برای اینکه بتونیم اندازه های padding و border رو از اندازه های width و height یک عنصر تفکیک کنیم.

حتما آموزش ویژگی box-sizing را در CSS مشاهده و مطالعه نمایید.

پس اول box-sizing رو در قسمت CSS صفحه اضافه میکنیم :

امتحان کنید

حال میایم و ستون هامون رو تعریف میکنیم، مثلا میخوایم ۱۲ ستون داشته باشیم پس ۱۰۰ رو تقسیم بر ۱۲ که کنیم میشه ۸٫۳۳۳% ، یعنی ستون اولمون اندازش میشه ۸٫۳۳۳% حالا همین ۸٫۳۳۳% رو ضرب در ۲ کنیم میشه ۱۶٫۶۶۶% پس ستون دومم میشه ۱۶٫۶۶۶%

امتحان کنید

حالا میایم و یه ظرف ( یا ردیف یا Row ) برای نگهداری ستون ها ایجاد میکنیم، چون قراره ستون ها شنارو ( فلوت یا Float ) بشن پس حتما باید از دستورات زیر استفاده نماییم تا از سَرریزشدن عناصر جلوگیری بشه »

امتحان کنید

در نهایت میایم و به ستون هایی که تعریف کردیم برای اینکه بتونن کنار همدیگه قرار بگیرند فلوت ( Float ) میدیم و با استفاده از انتخابگر صفت گفتیم تمامی تگ هایی که صفت class دارند و مقدار این صفت شامل کلمه seton هست همگی رو به سمت چپ شناور کن.

امتحان کنید

و تمام ، حالا بریم تا از ستون ها استفاده کنیم ، باید اول یه ردیف ( row ) ایجاد کنیم بعدش داخل این ردیف ستون هامون رو قرار بدیم.

امتحان کنید

Free-Learn

مثال های مختلف از نمای گرید

مثال شماره ۱ : ایجاد گالری تصویر + واکنش گرایی با استفاده از دستور media@ ( قدم سوم از واکنش گرایی را حتما مشاهده نمایید )

امتحان کنید

مثال شماره ۲ : طرح بندی ساده یک قالب + واکنش گرایی با استفاده از دستور media@

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب