Materialize-网格



 

Materialize提供了一个12列流体响应网格。

它使用行和列样式类分别定义行和列。

Sr.No. Class Name & Description
1 row

Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.

2 col

Specifies a column with sub-classes.

col具有多个子类,分别用于不同类型的屏幕。

小屏幕设备的列

以下是小屏幕设备(通常是智能手机)的列级样式列表。

Sr.No. Class Name & Description
1 s1

Defines 1 of 12 columns with width as 08.33%.

2 s2

Defines 2 of 12 columns with width as 16.66%.

3 s3

Defines 3 of 12 columns with width as 25.00%.

4 s4

Defines 4 of 12 columns with width as 33.33%.

s5 – s11
12 s12

Defines 12 of 12 columns with width as 100%. Default class for small screen phones.

中型屏幕设备的列

以下是中型屏幕设备(通常为平板电脑)的列级样式列表。

Sr.No. Class Name & Description
1 m1

Defines 1 of 12 columns with width as 08.33%

2 m2

Defines 2 of 12 columns with width as 16.66%.

3 m3

Defines 3 of 12 columns with width as 25.00%.

4 m4

Defines 4 of 12 columns with width as 33.33%.

m5 – m11
12 m12

Defines 12 of 12 columns with width as 100%. Default class for medium screen phones.

大屏幕设备的列

以下是大屏幕设备(通常是笔记本电脑)的列级样式列表。

Sr.No. Class Name & Description
1 l1

Defines 1 of 12 columns with width as 08.33%.

2 l2

Defines 2 of 12 columns with width as 16.66%.

3 l3

Defines 3 of 12 columns with width as 25.00%.

4 l4

Defines 4 of 12 columns with width as 33.33%.

l5 – l11
12 l12

Defines 12 of 12 columns with width as 100%. Default class for large screen devices.

用法

每个子类都根据设备的类型确定要使用的网格的列数。考虑以下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>

如果在HTML元素的class属性中未提及子类,则设备上要使用的默认列为12。

materialize_grids.htm

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

结果

验证结果。

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1