免費AI編程助手
Materialize 網格
2018-01-05 11:11 更新
Materialize提供了一個12列流體響應網格。
它使用row和col樣式類分別定義行和列。
| 序號 | 類名稱及描述 |
|---|---|
| 1 | row 指定要用于響應列的無填充容器。這個類是響應類是完全響應的強制性。 |
| 2 | col 指定具有子類的列 |
col有幾個子類，用于不同類型的屏幕。
小屏幕設備的列
以下是小屏幕設備（通常是智能手機）的列級樣式列表。
| 序號 | 類名稱及說明 | |
|---|---|---|
| 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％。小屏手機的默認類。 | |
中屏幕設備的列
以下是中屏幕設備（通常為平板電腦）的列級樣式列表。
| 序號 | 類名稱及說明 | |
|---|---|---|
| 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％。中屏手機的默認類別 | |
大屏幕設備的列
以下是大屏幕設備（通常是筆記本電腦）的列級樣式列表。
| 序號 | 類名稱及說明 | |
|---|---|---|
| 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％。大屏幕設備的默認類。 | |
用法
每個子類根據設備的類型確定要使用的網格的列數?？紤]以下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>
結果
驗證結果。
以上內容是否對您有幫助：
更多建議：