閱讀(4.8k) 書(shū)簽贊(0) 我要糾錯(cuò)

Materialize 網(wǎng)格

2018-01-05 11:11 更新

Materialize提供了一個(gè)12列流體響應(yīng)網(wǎng)格。

它使用row和col樣式類(lèi)分別定義行和列。

序號(hào)	類(lèi)名稱(chēng)及描述
1	row 指定要用于響應(yīng)列的無(wú)填充容器。這個(gè)類(lèi)是響應(yīng)類(lèi)是完全響應(yīng)的強(qiáng)制性。
2	col 指定具有子類(lèi)的列

col有幾個(gè)子類(lèi)，用于不同類(lèi)型的屏幕。

小屏幕設(shè)備的列

以下是小屏幕設(shè)備（通常是智能手機(jī)）的列級(jí)樣式列表。

序號(hào)	類(lèi)名稱(chēng)及說(shuō)明
1	S1 定義12列中的1列，寬度為08.33％。
2	S2 定義12列中的2列，寬度為16.66％。
3	S3 定義12列中的3列，寬度為25.00％。
4	S4 定義12列中的4列，寬度為33.33％。
S5 - S11
12	S12 定義12列中的12列，寬度為100％。小屏手機(jī)的默認(rèn)類(lèi)。

中屏幕設(shè)備的列

以下是中屏幕設(shè)備（通常為平板電腦）的列級(jí)樣式列表。

序號(hào)	類(lèi)名稱(chēng)及說(shuō)明
1	M1 定義12列中的1列，寬度為08.33％。
2	M2 定義12列中的2列，寬度為16.66％。
3	M3 定義12列中的3列，寬度為25.00％。
4	M4 定義12列中的4列，寬度為33.33％。
M5 - M11
12	M12 定義12列中的12列，寬度為100％。中屏手機(jī)的默認(rèn)類(lèi)別

大屏幕設(shè)備的列

以下是大屏幕設(shè)備（通常是筆記本電腦）的列級(jí)樣式列表。

序號(hào)	類(lèi)名稱(chēng)及說(shuō)明
1	L1 定義12列中的1列，寬度為08.33％。
2	L2 定義12列中的2列，寬度為16.66％。
3	L3 定義12列中的3列，寬度為25.00％。
4	L4 定義12列中的4列，寬度為33.33％。
L5 - L11
12	L12 定義12列中的12列，寬度為100％。大屏幕設(shè)備的默認(rèn)類(lèi)。

用法

每個(gè)子類(lèi)根據(jù)設(shè)備的類(lèi)型確定要使用的網(wǎng)格的列數(shù)?？紤]以下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屬性中未提及子類(lèi)，則設(shè)備上使用的默認(rèn)列為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>