CSS如何使用materialize（代码示例）

【CSS如何使用materialize（代码示例）】在使用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 >

输出如下：