Учебники

Материализация — Сетки

Июль 26, 2018

Materialise обеспечивает сетку с 12 колонками, чувствительными к жидкости.

Он использует классы стиля строк и столбцов для определения строк и столбцов соответственно.

Sr.No. Имя класса и описание
1

строка

Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

2

седло

Определяет столбец с подклассами.

строка

Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

седло

Определяет столбец с подклассами.

У col есть несколько подклассов, предназначенных для разных типов экранов.

Колонны для небольших экранных устройств

Ниже приведен список стилей на уровне столбцов для устройств с небольшим экраном, обычно смартфонов.

Sr.No. Имя класса и описание
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%. Класс по умолчанию для телефонов с небольшим экраном.

s1

Определяет 1 из 12 столбцов с шириной 08,33%.

s2

Определяет 2 из 12 столбцов с шириной 16,66%.

s3

Определяет 3 из 12 столбцов с шириной 25,00%.

s4

Определяет 4 из 12 столбцов с шириной 33,33%.

s12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.

Колонки для средних экранов

Ниже приведен список стилей на уровне столбцов для устройств среднего экрана, обычно для планшетов.

Sr.No. Имя класса и описание
1

m1

Определяет 1 из 12 столбцов шириной 08,33%

2

м2

Определяет 2 из 12 столбцов с шириной 16,66%.

3

м3

Определяет 3 из 12 столбцов с шириной 25,00%.

4

m4

Определяет 4 из 12 столбцов с шириной 33,33%.

м5 — м11
12

m12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.

m1

Определяет 1 из 12 столбцов шириной 08,33%

м2

Определяет 2 из 12 столбцов с шириной 16,66%.

м3

Определяет 3 из 12 столбцов с шириной 25,00%.

m4

Определяет 4 из 12 столбцов с шириной 33,33%.

m12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.

Колонны для устройств с большим экраном

Ниже приведен список стилей на уровне столбцов для устройств с большим экраном, обычно для ноутбуков.

Sr.No. Имя класса и описание
1

l1

Определяет 1 из 12 столбцов с шириной 08,33%.

2

l2

Определяет 2 из 12 столбцов с шириной 16,66%.

3

l3

Определяет 3 из 12 столбцов с шириной 25,00%.

4

l4

Определяет 4 из 12 столбцов с шириной 33,33%.

15 — 11
12

l12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном.

l1

Определяет 1 из 12 столбцов с шириной 08,33%.

l2

Определяет 2 из 12 столбцов с шириной 16,66%.

l3

Определяет 3 из 12 столбцов с шириной 25,00%.

l4

Определяет 4 из 12 столбцов с шириной 33,33%.

l12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном.

использование

Каждый подкласс определяет количество столбцов сетки, которые будут использоваться, в зависимости от типа устройства. Рассмотрим следующий фрагмент HTML. 

<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>

Столбцы по умолчанию, которые будут использоваться на устройстве, равны 12, если подкласс не указан в атрибуте класса HTML-элемента.

пример

materialize_grids.htm 

<!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>

Результат

Проверьте результат.

51
Share: