Materialize CSS如何使用网格布局?用法示例

2021年4月2日11:24:10 发表评论 660 次浏览

有12个标准的列流体响应网格系统, 可帮助你以有序且简便的方式布局页面。它使用行和列样式类分别定义行和列。行数用于指定用于响应列的无填充容器关口用于指定带有子类的列。

有一个容器用于居中页面内容的类。的容器class设置为窗口宽度的~70%。要添加一个容器只需将你的内容放入<div>用一个标签容器类。语法如下:

<body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
 </body>

现在, 让我们了解网格系统的工作原理:

标准网格有12列。无论浏览器的大小如何, 这些列中的每一列始终具有相等的宽度。请记住, 在创建布局时, 所有列都必须包含在一行中, 并且必须添加关口对你内部的<div>类进行分类以使其成为列。你可以轻松地更改列的顺序推和拉。只需添加推S2or拉-s2上课的地方s是屏幕类前缀(s =小, m =中, l =大), 其后的数字是你要推送或拉出的列数。

例子:

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- Compiled and minified CSS -->
     <link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
     <!--Let browser know website is 
         optimized for mobile-->
     <meta name = "viewport" content=
                     " width = device -width, initial-scale = 1 .0" />
</head>
  
<body>
     <div class = "green center">
         <h2>lsbin</h2>
     </div>
      
     <div class = "row">
         <div class = "col s1 green center">1</div>
         <div class = "col s1 green darken-3 center">2</div>
         <div class = "col s1 green center">3</div>
         <div class = "col s1 green darken-3 center">4</div>
         <div class = "col s1 green center">5</div>
         <div class = "col s1 green darken-3 center">6</div>
         <div class = "col s1 green  center">7</div>
         <div class = "col s1 green darken-3 center">8</div>
         <div class = "col s1 green  center">9</div>
         <div class = "col s1 green darken-3 center">10</div>
         <div class = "col s1 green center">11</div>
         <div class = "col s1 green darken-3 center">12</div>
     </div>
  
     <div class = "row">
         <div class = "col s7 push-s5 green darken-1">
             <span class = "flow-text">
                 This div is 7-columns wide on pushed
                 to the right by 5-columns.
             </span>
         </div>
  
         <div class = "col s5 pull-s7 light-green">
             <span class = "flow-text">
                 5-columns wide pulled to the left by
                 7-columns.
             </span>
         </div>
     </div>
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

网格类别: 物化网格系统分为四类:

  • .s(用于移动设备)
  • .m(平板电脑设备)
  • .l(台式设备)
  • .xl(大型台式设备)
 

移动设备

<= 600像素

平板电脑设备

> 600像素

桌面设备

> 992px

大型台式设备

> 1200px

类前缀 .s .m .l .xl
容器宽度 90% 85% 70% 70%
列数 12 12 12 12

在上一个示例中, 我们仅使用定义小屏幕的尺寸" col s12"。仅仅说s12, 我们实际上是在说" col s12 m12 l12"。但是, 通过明确定义大小, 我们可以使我们的网站更具响应性。

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- Compiled and minified CSS -->
     <link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
     <!--Let browser know website is 
         optimized for mobile-->
     <meta name = "viewport" content=
                     " width = device -width, initial-scale = 1 .0" />
</head>
  
<body>
     <div class = "green center">
         <h2>lsbin</h2>
     </div>
  
     <!--Responsive layout-->
     <div class = "row">
         <div class="grid-example col 
             s12 light-green center">
             <span class = "flow-text">
                 Always full-width (col s12)
             </span>
         </div>
  
         <div class="grid-example col 
             s8 m6 green center">
             <span class = "flow-text">
                 Full-width on mobile (col s8 m6)
             </span>
         </div>
     </div>
  
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下:

Materialize CSS如何使用网格布局?用法示例

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: