یکی از مهمترین قسمت های طراحی صفحات وب ، شبکه بندی است یعنی تعیین سطرها و ستون های داخل هر سط برای چیدن اجزای صفحه وب. متریالایز یک روش ساده برای تقسیم بندی صفحه وب ارائه می کند . در این قسمت روش کار متریالایز برای تقسیم بندی صفحه را آموزش می دهیم.
متریالایز صفحه HTML یا هر فضای داده شده را به 12 قسمت تقسیم می کند. یعنی هر سطر دارای 12 واحد است که این واحدها می تواند بین ستون ها یا بخش های آن به دلخواه تقسیم شود. materialize با استفاده از کلاس های row و cols این تقسیم بندی را انجام داده و سطرها و ستون ها را بصورت واکنشگرا (responsive) ایجاد می کند.
| کلاس | توضیحات |
|---|---|
| row |
هنگامی که ستون های واکنشگرا را داخل این کلاس قرار دهید، padding آنها را بر می دارد. این کلاس برای اینکه صفحات بطور کامل واکنشگرا باشند اجباری است . |
| col | این کلاس به همراه زیر کلاسش به کار می رود. و یک ستون را مشخص می کند. |
ستون های در صفحه نمایش کوچک (Small Screen Devices)
در زیر لیست ستون هایی که برای وسایلی که دارای صفحه نمایش کوچک (گوشی های هوشمند) هستند، مورد استفاده قرار می گیرند، ذکر شده است.
| ردیف | نام کلاس و توضیحات | |
|---|---|---|
| 1 | s1 ستون با عرض 1 از 12 را تعریف می کند حدودا 08.33% |
|
| 2 | s2 ستون با عرض 2 از 12 را تعریف می کند حدودا 16.66% |
|
| 3 | s3 ستون با عرض 3 از 12 را تعریف می کند حدودا 25.00% |
|
| 4 | s4 ستون با عرض 4 از 12 را تعریف می کند حدودا 33.33% |
|
| s5 – s11 | ||
| 12 | s12 ستون با عرض 12 از 12 تعریف می کند دقیقا 100% عرض صفحه نمایش |
|
ستون ها در صفحه نمایش متوسط (Medium Screen Devices)
در زیر لیست ستون هایی که برای وسایلی که دارای صفحه نمایش متوسط (مانند تبلت ها) هستند، مورد استفاده قرار می گیرند، ذکر شده است.
| ردیف | نام کلاس و توضیحات | |
|---|---|---|
| 1 | m1 ستون با عرض 1 از 12 را تعریف می کند حدودا 08.33% |
|
| 2 | m2 ستون با عرض 2 از 12 را تعریف می کند حدودا 16.66% |
|
| 3 | m3 ستون با عرض 3 از 12 را تعریف می کند حدودا 25.00% |
|
| 4 | m4 ستون با عرض 4 از 12 را تعریف می کند حدودا 33.33% |
|
| m5 – m11 | ||
| 12 | m12 ستون با عرض 12 از 12 را تعریف می کند دقیقا 100% عرض صفحه نمایش |
|
ستون ها در صفحه نمایش بزرگ (Large Screen Devices)
در زیر لیست ستون هایی که برای وسایلی که دارای صفحه نمایش بزرگ (مانند لپ تاپ ها) هستند، مورد استفاده قرار می گیرند، ذکر شده است.
| ردیف | نام کلاس و توضیحات | |
|---|---|---|
| 1 | l1 ستون با عرض 1 از 12 را تعریف می کند حدودا 08.33% |
|
| 2 | l2 ستون با عرض 2 از 12 را تعریف می کند حدودا 16.66% |
|
| 3 | l3 ستون با عرض 3 از 12 را تعریف می کند حدودا 25.00% |
|
| 4 | l4 ستون با عرض 4 از 12 را تعریف می کند حدودا 33.33% |
|
| l5 – l11 | ||
| 12 | l12 ستون با عرض 12 از 12 را تعریف می کند دقیقا 100% عرض صفحه نمایش |
|
نحوه استفاده
هر زیر کلاس شماره ستون دلخواه شما را بر اساس نوع دستگاه تعیین می کند. قطعه کد زیر را در نظر بگیرید.
<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>
خروجی بصورت زیر خواهد بود:
