جلسه دوم – آموزش شبکه بندی در متریالایز (materialize)

طراحی واکنش گرا با متریالایز

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

متریالایز صفحه HTML  یا هر فضای داده شده را به ۱۲ قسمت تقسیم می کند. یعنی هر سطر دارای ۱۲ واحد است که این واحدها می تواند بین ستون ها یا بخش های آن به دلخواه تقسیم شود. materialize با استفاده از کلاس های row و cols این تقسیم بندی را انجام داده و سطرها و ستون ها را بصورت واکنشگرا (responsive) ایجاد می کند.

کلاس  توضیحات
row  

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

col این کلاس به همراه زیر کلاسش به کار می رود. و یک ستون را مشخص می کند.

 

ستون های در صفحه نمایش کوچک (Small Screen Devices)

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

ردیف نام کلاس و توضیحات
۱ s1
ستون با عرض ۱ از ۱۲ را تعریف می کند حدودا ۰۸٫۳۳%
۲ s2
ستون با عرض ۲ از ۱۲ را تعریف می کند حدودا ۱۶٫۶۶%
۳ s3
ستون با عرض ۳ از ۱۲ را تعریف می کند حدودا ۲۵٫۰۰%
۴ s4
ستون با عرض ۴ از ۱۲ را تعریف می کند حدودا ۳۳٫۳۳%
s5 – s11
۱۲ s12
ستون با عرض ۱۲ از ۱۲ تعریف می کند دقیقا ۱۰۰% عرض صفحه نمایش

 

ستون ها در صفحه نمایش متوسط (Medium Screen Devices)

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

ردیف نام کلاس و توضیحات
۱ m1
ستون با عرض ۱ از ۱۲ را تعریف می کند حدودا ۰۸٫۳۳%
۲ m2
ستون با عرض ۲ از ۱۲ را تعریف می کند حدودا ۱۶٫۶۶%
۳ m3
ستون با عرض ۳ از ۱۲ را تعریف می کند حدودا ۲۵٫۰۰%
۴ m4
ستون با عرض ۴ از ۱۲ را تعریف می کند حدودا ۳۳٫۳۳%
m5 – m11
۱۲ m12
ستون با عرض ۱۲ از ۱۲ را تعریف می کند دقیقا ۱۰۰% عرض صفحه نمایش

 

ستون ها در صفحه نمایش بزرگ (Large Screen Devices)

در زیر لیست ستون هایی که برای وسایلی که دارای صفحه نمایش بزرگ (مانند لپ تاپ ها) هستند، مورد استفاده قرار می گیرند، ذکر شده است.

ردیف نام کلاس و توضیحات
۱ l1
ستون با عرض ۱ از ۱۲ را تعریف می کند حدودا ۰۸٫۳۳%
۲ l2
ستون با عرض ۲ از ۱۲ را تعریف می کند حدودا ۱۶٫۶۶%
۳ l3
ستون با عرض ۳ از ۱۲ را تعریف می کند حدودا ۲۵٫۰۰%
۴ l4
ستون با عرض ۴ از ۱۲ را تعریف می کند حدودا ۳۳٫۳۳%
l5 – l11
۱۲ l12
ستون با عرض ۱۲ از ۱۲ را تعریف می کند دقیقا ۱۰۰% عرض صفحه نمایش

 

نحوه استفاده

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

<div class="row">
<div class="col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</div>
</div>

مثال

<!DOCTYPE html>
<html>
<head>
<title>The Materialize Grids Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="teal">
<h2>Mobile First Design Demo</h2>
<p>Resize the window to see the effect!</p>
</div>
<hr/>
<div class="row">
<div class="col m1 grey center">1</div>
<div class="col m1 center">2</div>
<div class="col m1 grey center">3</div>
<div class="col m1 center">4</div>
<div class="col m1 grey center">5</div>
<div class="col m1 center">6</div>
<div class="col m1 center grey">7</div>
<div class="col m1 center">8</div>
<div class="col m1 center grey">9</div>
<div class="col m1 center">10</div>
<div class="col m1 center grey">11</div>
<div class="col m1 center">12</div>
</div>
<div class="row">
<div class="col m4 l3 yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
</div>
<div class="col s4 m8 l9 grey">

<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>

</div>
</div>
</body>
</html>

 

خروجی بصورت زیر خواهد بود:

 

برچسب ها

, , , , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

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


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.