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 >

输出如下:
CSS如何使用materialize(代码示例)

文章图片

    推荐阅读