آموزش فریمورک materialize-تنظیمات مربوط به grid

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

کلاس container :

این کلاس به شما اجازه میده تا محتوای خودتون رو به بخش مرکزی صفحه هدایت کنید! این کلاس به هر Tag از صفحه که اعمال بشه عرض اون تگ رو ۷۰% از صفحه در نظر میگیره و بیشترین عرض (width) رو ۹۹۲ پیکسل قرار میده! به مثال زیر دقت کنید 🙁برای دیدن پیش نمایش کلیک کنید)

در مثال بالا یک row یا ردیف ایجاد کردیم. اگه دقت کنید این ردیف (row) را درون container قرار دادیم! این باعث میشه که عرض row برابر با ۷۰ درصد صفحه باشه و بیشترین سایز برای عرض ان ۹۹۲ پیکسل در نظر گرفته شود. پیش نمایش مثال بالا رو میتونید از اینجا(کلیک کنید) ببینید.

افست ها (Offsets) :

با استفاده از کلاس های offset میتونید یک ستون (تگی که دارای کلاس col باشد) رو با توجه به grid جابه جا کنید! مجموع offset ها و اندازه ی ستون ها نباید بیشتر از ۱۲ بشه چون در فریمورک متریالایز عرض صفحه به ۱۲ ستون تقسیم بندی میشه!!! برای اینکه بهتر متوجه بشید به مثال زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید)

در دستورات بالا اومدیم از کلاس offset استفاده کردیم تا ستون ها رو به سمت چپ انتقال بدیم! پیش نمایش مثال بالا رو میتونید از اینجا(کلیک کنید) ببینید.

دقت کنید که کلاس offset دارای سایز های ۱ تا ۱۲ است و چون حالت رسپانسیو رو پوشش میده به سه قسمت تقسیم میشه :

  1. برای صفحه های کوچک از offset-s1 تا offset-s12
  2. برای صفحه های با سایز متوسط از offset-m1 تا offset-m12
  3. برای صفحه های با سایز بزرگ از offset-l1 تا offset-l12

در اینجا s مخفف small و m مخفف medium و L مخفف large است.

دقت کنید که در یک ردیف یا row , مجموع سایز ستون ها و offset ها نباید بیشتر از سایز Grid بشه! همونطور که گفتم سایز گرید در فریمورک متریالایز برابر با ۱۲ است بدین معنا که در این فریمورک عرض صفحه به ۱۲ ستون تقسیم میشه.

میتونید از کلاس های offset همزمان در حالت هاس s و L و M استفاده کنید تا در هر سایزی یک offset به خصوص برای ستون ها در نظر گرفته شود.

Materialize-tutorial-offsets
Materialize-tutorial-offsets
materialize-tutorial-offsets.zip
1.0 MiB
5 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

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