CSS如何使用materialize?代码示例

2021年3月18日16:01:08 发表评论 661 次浏览

在使用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?代码示例

木子山

发表评论

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