Materialise提供了各種CSS類,以對顯示各種類型的卡應用各種預定義的視覺和行為增強。下表提到了可用的類及其效果。
SN | 類名稱及說明 |
---|---|
1 | card 將div元素標識為Materialize卡容器。在“outer”div上需要。 |
2 | card-content 將div標識為卡內(nèi)容容器,并且在“inner”div上是必需的。 |
3 | card-title 將div標識為卡片標題容器,并且在“inner”標題div上是必需的。 |
4 | card-action 將div標識為卡操作容器,并為操作文本分配適當?shù)奈谋咎匦?,并在“?nèi)部”操作div上需要;內(nèi)容直接在div內(nèi)部,沒有中間容器。 |
5 | card-image 將div標識為卡片圖像容器,并且在“內(nèi)部”div上是必需的。 |
6 | card-reveal 將div標識為顯示的文本容器。 |
7 | activator 將div標識為顯示的文本容器,將圖像標識為顯示器。用于顯示與圖像相關(guān)的上下文信息。 |
8 | card-panel 將div標識為具有陰影和填充的簡單卡。 |
9 | card-small 將div標識為小型卡。身高:300px; |
10 | card-medium 將div標識為中型卡。高度:400px; |
11 | card-large 將div標識為大型卡。身高:500px; |
以下示例展示使用卡類來展示各種類型的卡。
materialize_cards.html
<!DOCTYPE html> <html> <head> <title>The Materialize Cards Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="/attachments/tuploads/materialize/jquery-2.1.1.min.js"></script> <script src="/attachments/tuploads/materialize/materialize.min.js"></script> </head> <body class="container"> <div class="row"> <div class="col s12 m6"> <div class="card blue-grey lighten-4"> <div class="card-content"> <span class="card-title"><h3>Learn HTML5</h3></span> <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> </div> <div class="card-action"> <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button> <a class="right blue-grey-text" href="http://www.o2fo.com">www.o2fo.com</a> </div> </div> </div> <div class="col s12 m6"> <div class="card blue-grey lighten-4"> <div class="card-image"> <img src="html5-mini-logo.jpg"> </div> <div class="card-content"> <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> </div> <div class="card-action"> <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button> <a class="right blue-grey-text" href="http://www.o2fo.com">www.o2fo.com</a> </div> </div> </div> </div> <div class="row"> <div class="col s12 m6"> <div class="card blue-grey lighten-4"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="html5-mini-logo.jpg"> </div> <div class="card-content activator"> <p>Click the image to reveal more information.</p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">HTML5<i class="material-icons right">close</i></span> <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> </div> <div class="card-action"> <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button> <a class="right blue-grey-text" href="http://www.o2fo.com">www.o2fo.com</a> </div> </div> </div> </div> <div class="row"> <div class="col s12 m3"> <div class="card-panel teal"> <span class="white-text">Simple Card</span> </div> </div> <div class="col s12 m3"> <div class="card small teal"> <span class="white-text">Small Card</span> </div> </div> <div class="col s12 m3"> <div class="card medium teal"> <span class="white-text">Medium Card</span> </div> </div> <div class="col s12 m3"> <div class="card large teal"> <span class="white-text">Large Card</span> </div> </div> </div> </body> </html>
驗證結(jié)果,如下圖所示。
更多建議: