https://virgool.io/feed/@abolfazzl یه پسر معمولی با آرزو های غیر معمول fa 2026-06-10 15:23:30 https://files.virgool.io/upload/users/164705/avatar/27I1XC.png?height=120&width=120 https://virgool.io/@abolfazzl https://virgool.io/@abolfazzl/grid-materialize-dngr5r7uln39 ‍شبکه گرید در متریالایزسلام, قراره راجبه شبکه گرید در متریالایز و نحوه استفاده ازش صحبت کنیم امیدوارم که خوشتون بیاد.بدون مقدمه و حرف اضافی شروع میکنم!برای ایجاد کانتینر دقیقا مثل بوت استرپ عمل میکنیم و کافیه به تگ مورد نظرمون کلاس container رو اضافه کنیم.عرض کانتینر برای دستگاه های مختلف در تصویر زیر مشخص شده.به ترتیب از چپ به راست, موبایل, تبلت, دستکاپ, دستگاه های خیلی بزرگشبکه گرید صفحه رو به صوررت افقی به ۱۲ بخش تقسیم میکنه.برای استفاده از گرید کافیه یک تگ div ایجاد کنین و کلاس row رو بهش اضافه کنینبقیه اجزا باید درون این تگ قرار بگیرن, به مثال زیر نگاه کنین تا براتون جا بیوفته!نتیجه کدهای بالا میشه تصویر زیرتوضیحات کد:همون طور که میبینید تگ div با کلاس row به عنوان والد قرار گرفته و بقیه تگ ها (فرزندان) مابین این تگ قرار گرفتن.همه فرزندان باید کلاس col رو داشته باشن تا در جای مناسب قرار بگیرن.حالا بریم سراغ کلاس s1 , درواقع s همون مخفف شده small هست, منظور اینه برای دستگاه های کوچک یعنی موبایل.اون عدد جلوش مشخص میکنه چند بخش از اون 12 بخش رو تصاحب کنه و از 1 تا 12 متغیر هست.یه مثال دیگههمون طور که میبینید تگی که از s12 استفاده کرده کل صفحه رو تصرف کرده و بقیه اجزا رو به خط بعدی برده, و هر کدوم از تگ هایی که از کلاس s6 استفاده کردن فقط 6 قسمت از 12 قسمت (یعنی نصف صفحه) رو تصرف کردن.فکر کنم حالا متوجه شدین اون عدد جلوی s برای چی هست.حالا باید بدونید که به جای s میشه از گزینه های دیگه ای هم استفاده کردلیست این گزینه ها در تصویر زیر مشخص شدههمون طور که میبینید از کلاس s برای موبایل و دستگاه های بزرگتر, m برای تبلت و دستگاه های بزرگتر, l برای دسکتاپ و دستگاه های بزرگتر و در نهایت xl برای دستگاه های خیلی بزرگ استفاده میشه.میشه به صورت ترکیبی ازشون استفاده کرد, مثلا کلاس های s1 و m4 و l6 رو به یک تگ اضاف کرداین کار باعث میشه در هر دستگاه بخشی که مشخص کردیم رو تصرف کنهمثالدر مثال بالا ما از دسکتاپ استفاده کردیم در نتیجه کلاس l خصوصیاتش رو نشون داداما اگر از موبایل استفاده میکردیم کلاس s خودشو نشون میداد , درست مثل تصویر زیریعنی هر تگ فرزند ۱۲ قسمت (کل صفحه) رو تصرف میکرد.یکی دیگه از خصوصیات عالی شبکه گرید در متریالایز آفست هستبرای اینکه درکش کنین به تصویر زیر نگاه کنینهمون طور که میبینین این کلاس (offset) باعث میشه عنصر مدنظرتون یک یا چند بخش از سمت چپ فاصله بگیره, بعد از نوشتن کلاس offset باید مشخص کنید که در چه نوع دستگاه و به چه میزان فاصله بگیرهنحوه نوشتن در تصویر بالا مشخصه.ممنون که این مقاله رو مطالعه کردین برای دریافت اطلاعات بیشتر از فریمورک متریالایز اینجا کلیک کنین.اگر سوالی داشتین پاسخگو هستم.با تشکر ابوالفضل ابوالفضل Mon, 17 Aug 2020 20:57:08 +0430