卡片



图块能非常方便的把那些不同类型的元素组合在一起。同时,也非常适合呈现那种大小差不多或者能进行的操作差不多的模块,如那些包含长度不定的图片标题。

基础样式

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.



   <div class="row">
     <div class="col s12 m6">
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
             <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href='#'>This is a link</a>
         </div>
       </div>
     </div>
   </div>
              

图片

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.





标准的缩略图。



   <div class="row">
     <div class="col s12 m7">
       <div class="card">
         <div class="card-image">
           <img src="images/sample-1.jpg">
           <span class="card-title">Card Title</span>
         </div>
         <div class="card-content">
           <p>I am a very simple card. I am good at containing small bits of information.
           I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href='#'>This is a link</a>
         </div>
       </div>
     </div>
   </div>
            

详细

Card Title

This is a link

Card Title

Here is some more information about this product that is only revealed once clicked on.





这是个只要点击图片一下就能展示更多信息的Card。具体代码请看示例。



   <div class="card">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="images/office.jpg">
     </div>
     <div class="card-content">
       <span class="card-title activator grey-text text-darken-4">Card Title <i
       class="mdi-navigation-more-vert right"></i></span>
       <p><a href="#">This is a link</a></p>
     </div>
     <div class="card-reveal">
       <span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close right"></i></span>
       <p>Here is some more information about this product that is only revealed once clicked on.</p>
     </div>
   </div>
            

尺寸

提供了几种预制的尺寸供使用,只需要添加相应的class就行。


   <div class="card small">
     <!-- Card Content -->
   </div>
            

Small

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.



小号的高度限制为300px。

Medium

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.



中号的高度限制为400px。

Large

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.



大号的高度限制为500px。

面板

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.




对于一些简单的Card,使用card panel或许是更好的选择。



   <div class="row">
     <div class="col s12 m5">
       <div class="card-panel teal">
         <span class="white-text">I am a very simple card. I am good at containing small bits of information.
         I am convenient because I require little markup to use effectively. I am similar to what is called a panel
         in other frameworks.
         </span>
       </div>
     </div>
   </div>