在使用CSS materialize时, 有几个helper可用于设计需求, 例如：
1.对齐方式：可以使用以下类在水平或垂直方向上对齐内容：
- 垂直对齐：通过添加类可以轻松完成valign包装存放要对齐的项目的容器。
<div class="valign-wrapper"> <h5>This is vertically aligned</h5> </div>
- 水平对齐：这些类用于水平对齐内容：左对齐, 右对齐, 居中对齐。
<div> <h5 class="left-align">This is left aligned</h5> </div> <div> <h5 class="right-align">This is right aligned</h5> </div> <div> <h5 class="center-align">This is center aligned</h5> </div> - 快速浮动：还有其他用于对齐内容的类是剩下和对.
<div class="left">...</div> <div class="right">...</div>
2.隐藏/显示内容：要在特定屏幕上隐藏/显示内容, 实例化提供了易于使用的类。
| 类 | 屏幕范围 |
|---|---|
| 隐藏 | 隐藏在所有设备上 |
| 只隐藏在小 | 仅针对移动设备隐藏 |
| 只在医疗中隐藏 | 仅适用于平板电脑 |
| 隐藏下来 | 平板电脑及以下版本隐藏 |
| 隐藏起来 | 平板电脑及以上版本隐藏 |
| 只隐藏在大 | 仅台式机隐藏 |
| 小展示 | 仅针对移动设备显示 |
| 媒体展示 | 仅显示平板电脑 |
| 大型展示 | 仅针对桌面显示 |
| 显示中和以上 | 显示平板电脑及以上 |
| 显示中和下 | 显示平板电脑及以下 |
<div class="hide-on-small-only">
This will be hidden from mobile screen
</div>3.格式：这些类有助于格式化各种内容。这些类是–
- 截断：要在省略号中截断较长的文本, 截短类将添加到包含文本的标签中。
<h4 class="truncate"> This is an extremely long title that will be truncated </h4>
- 徘徊：的可悬停的是悬停类, 用于为框阴影添加动画。
<div class="card-panel hoverable"> Hoverable Card Panel </div>
这是使用上述所有类的示例：
<!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 = "class green" >
< br >
< div class = "card-panel " >
< div class = "valign-wrapper" >
< h5 >This is vertically aligned</ h5 >
</ div >
</ div >
< div class = "card-panel" >
< h5 class = "left-align" >
This is left aligned
</ h5 >
</ div >
< div class = "card-panel" >
< h5 class = "right-align" >
This is right aligned
</ h5 >
</ div >
< div class = "card-panel" >
< h5 class = "center-align" >
This is center aligned
</ h5 >
</ div >
< div class = "card-panel" >
< div class = "left" >...</ div >
</ div >
< div class = "card-panel" >
< div class = "right" >...</ div >
</ div >
< div class = "hide-on-small-only" >
Hidden for mobile only</ div >
< div class = "hide-on-med-only " >
Hidden for Tablet Only </ div >
< div class = "hide-on-large-only" >
Hidden for Desktop Only</ div >
< div class = "card-panel" >
< h4 class = "truncate" >
This is an extremely long text
that will be truncated to show
the changes.
</ h4 >
</ div >
< div class = "card-panel hoverable center" >
this is hoverable
</ div >
< br >< br >
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
