Materialize 网格

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

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

序号类名称及描述
1row
指定要用于响应列的无填充容器。这个类是响应类是完全响应的强制性。
2col
指定具有子类的列

col有几个子类,用于不同类型的屏幕。

小屏幕设备的列

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

序号类名称及说明
1S1
定义12列中的1列,宽度为08.33%。
2S2
定义12列中的2列,宽度为16.66%。
3S3
定义12列中的3列,宽度为25.00%。
4S4
定义12列中的4列,宽度为33.33%。
S5 - S11
12S12
定义12列中的12列,宽度为100%。小屏手机的默认类。

中屏幕设备的列

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

序号类名称及说明
1M1
定义12列中的1列,宽度为08.33%。
2M2
定义12列中的2列,宽度为16.66%。
3M3
定义12列中的3列,宽度为25.00%。
4M4
定义12列中的4列,宽度为33.33%。
M5 - M11
12M12
定义12列中的12列,宽度为100%。中屏手机的默认类别

大屏幕设备的列

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

序号类名称及说明
1L1
定义12列中的1列,宽度为08.33%。
2L2
定义12列中的2列,宽度为16.66%。
3L3
定义12列中的3列,宽度为25.00%。
4L4
定义12列中的4列,宽度为33.33%。
L5 - L11
12L12
定义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>

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

例子

materialize_grids.html

<!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="/attachments/tuploads/materialize/jquery-2.1.1.min.js"></script>           
      <script src="/attachments/tuploads/materialize/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>

结果

验证结果。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部