آموزش فریمورک materialize-ایجاد grid و ستون بندی صفحه

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

در فریمورک متریالایز , گرید(grid) به ۱۲ ستون تقسیم میشه , برای استفاده از این ستون ها ابتدا باید یک ردیف ایجاد کنیم! برای ایجاد کردن ردیف کافیه به تگ مورد نظر خودتون کلاس row رو بدید. پس از ایجاد کردن ردیف , برای ایجاد کردن ستون از کلاس col استفاده میکنیم. حالا برای تنظیم سایز این ستون از s1 تا s12 استفاده کنید. به مثال زیر دقت کنید:(پیش نمایش مثال زیر رو اینجا ببینید(کلیک کنید))

همونطور که گفته شد توی فریمورک متریالایز , عرض صفحه یا همون ردیف که با استفاده از کلاس row به وجود میاد به ۱۲ ستون یا grid تقسیم میشه ,حالا ما در مثال بالا با استفاده از کلاس col ستون های خودمون رو ایجاد میکنیم! سایز ستون ها با چی مشخص میشه؟ توی فریمورک متریالایز سه نوع کلاس برای مشخص کردن سایز ستون ها وجود داره , کلاس l1 تا l12 , (حرف L کوچک به همراه اعداد ۱ تا ۱۲) که برای مشخص کردن سایز ستون در مانیتورهای با عرض بیشتر از ۹۹۲ پیکسل استفاده میشه , کلاس m1 تا m12 که برای مشخص کردن سایز ستون در مانیتورهای کوچکتر مساوی ۹۹۲ پیکسل استفاده میشه و کلاس s1 تا s12 که برای مشخص کردن سایز ستون در مانیتورهای کوچکتر مساوی ۶۰۰ پیکسل استفاده میشه!

دقت کنید که ترتیب ارجعیت کلاس ها به صورت S<m<L است یعنی اینکه میتونید از این کلاس ها به صورت ترکیبی استفاده کنید تا ساختار صفحه ی شما در هرکدوم از سایزهای مانیتور به صورت خاص نمایش داده بشه 😀 به این حالت میگن رسپانسیو بودن (Responsive) , اگه نمیدونید رسپانسیو چیه اینجا(کلیک کنید) رو بخونید.

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

۱- میخوایم صفحه ای بسازیم که دو ستونه باشه! یه ستون برای نمایش مطالب سایت و یه ستون کناری هم برای لینک ها و دسترسی ها , کدمون رو به صورت زیر مینویسیم :

توی دستورات بالا فریمورک رو همونطور که در آموزش قبل (اینجا کلیک کنید) گفتیم به صفحه اظافه کردیم و سپس یک ردیف ایجاد کردیم و آن را به ۲ ستون تقسیم کردیم , یک ستون ۴ بخش از صفحه و یک ستون دیگر ۸ بخش از صفحه پوشش میده! دقت کنید که جمع سایز ستون ها نباید بیشتر از ۱۲ بشه , در غیر این صورت از صفحه بیرون میزنه! چون عرض صفحه ی ما توی متریالایز برابر با ۱۲ ستون هست پس جمع سایز ستون های در یک ردیف باید ۱۲ بشه. پیش نمایش چیزی که در بالا ساختیم رو میتونید از اینجا (کلیک کنید) ببینید , صفحه رو بزرگ و کوچیک کنید تا متوجه بشید ستون ها چجوری تغییر سایز پیدا میکنن.

۲- میخوایم صفحه ی ۲ ستونه ای که در مرحله ی قبل ساختیم رو طوری تغییر بدیم که توی مانیتورهای بزرگ , متوسط و موبایل عملکرد بهتری داشته باشه و بهتر نمایش داده بشه. میتونیم از کلاس های m و l و S به صورت ترکیبی استفاده کنیم ولی دقت کنید که جمع اعداد جلوی هرکدوم باید برابر با ۱۲ باشه! مثلا جمع اعداد جلوی S در ستون های درون یک ردیف باید ۱۲ بشه و همچنین در L نیز باید ۱۲ بشه (جداگانه حساب میکنیم) , به مثال زیر دقت کنید:

در مثال بالا از کلاس های s و m و l به صورت همزمان استفاده کردیم! کلاس s12 باعث میشه که در صفحات کمتر از ۶۰۰ پیکسل ستون های ما تمام عرض صفحه رو پوشش بدن! کلاس m4 باعث میشه که صفحات با عرض متوسط , ستون ما ۴ قسمت از ۱۲ قسمت عرض رو پوشش بده که همون یک سوم یا ۳۳ درصد عرض صفحه میشه. کلاس l9 باعث میشه که در صفحات بزرگ ستون ما ۹ قسمت از ۱۲ قسمت عرض صفحه رو پوشش بده. چیزی که در مثال بالا ساختیم رو میتونید از اینجا (کلیک کنید) ببینید.

۳- برای اینکه یک سیستم گرید رو بهتر درک کنید به مثال زیر دقت کنید :

دقت کنید که هرگاه کلاس L وجود نداشته باشه فریمورک از کلاس m برای سایزهای بزرگتر استفاده میکنه , اگه کلاس L و m نباشن از کلاس s برای همه ی سایز ها استفاده میشه , فریمورک از کلاس با سایز کوچکتر برای کلاس با سایز بزرگتری که موجود نیست استفاده میکنه. مثلا اگه کلاس های L و S رو استفاده کنیم , فریمورک از کلاس S برای سایز های M نیز استفاده میکنه!!! 😀 امیدوارم متوجه شده باشید! اگه متوجه نشدید چیزی که در مثال بالا ساختیم رو میتونید از اینجا(کلیک کنید) ببینید! حالا صفحه رو کوچیک و بزرگ کنید(عرض مرورگر رو تغییر بدید) تا بهتر متوجه بشید! دقت کنید که بین هر ردیف تا ردیف دیگه یه فاصله وجود داره!! از فضای سفید ایجاد شده توی مثال تابلوعه و دیگه نیازی به توضیح بیشتر نیست!!! 😀

خب تا اینجا راجب ستون بندی صفحه صحبت کردیم 😀 با اموزش های بعدی ما از سری اموزش های فریمورک متریالایز (materialize framework) همراه باشید.

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

سورس کد مثال های این اموزش
سورس کد مثال های این اموزش
materialize-tutorial.zip
Version: 1.0
1.0 MiB
7 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟