卡片是显示不同类型相关内容的便捷方式。materialize使用卡来呈现相似的对象, 其大小和动作可以根据要求进行更改。这是基本卡的示例。
<!DOCTYPE html>
< html >
< head >
< title >Page Title</ title >
</ head >
< body >
< h3 >Basic card</ h3 >
< div class = "card green lighten-1" >
< div class = "card-content black-text" >
< span class = "card-title" ></ span >
< p >This is a very simple card.
It is good at containing small
information. This is convenient
because It require little markup
to use effectively.</ p >
</ div >
< div class = "card-action" >
< a href = "#"
class = "white-text" >Link</ a >
< a href = "#"
class = "white-text" >Link</ a >
</ div >
</ div >
</ body >
</ html >materialize根据其要求提供不同类型的卡, 以下为名称：
- 影像卡:它通过图像缩略图用于标准卡。为了这卡图像类被添加到卡片类中。
- 卡中的FAB:在图像卡中, 可以添加不同大小的浮动操作按钮。
- 横向卡:在这种情况下, 空间被分为两个块, 其中一侧用于图像, 另一侧用于信息。
- 卡显示:这用于添加额外的信息, 这些信息可以通过单击来访问。为此, 卡显示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" />
< script type = "text/javascript"
src =
"https://code.jquery.com/jquery-2.1.1.min.js" >
</ script >
<!--Let browser know website is
optimized for mobile-->
< meta name = "viewport"
content=" width = device -width, initial-scale = 1 .0" />
</ head >
< body >
< div class = "container" >
< h3 >Basic card</ h3 >
< div class = "card green lighten-1" >
< div class = "card-content black-text" >
< span class = "card-title" >
</ span >
< p >This is a very simple card.
It is good at containing small
information. This is convenient
because It require little markup
to use effectively.</ p >
</ div >
< div class = "card-action" >
< a href = "#"
class = "white-text" >Link</ a >
< a href = "#"
class = "white-text" >Link</ a >
</ div >
</ div >
< div class = "divider black" ></ div >
< h3 >Image card with link</ h3 >
< div class = "card" >
< div class = "card-image" >
< img src = "lsbin-6.png"
alt = "" />
< span class = "card-title" >
</ span >
</ div >
< div class = "card-content" >
< p >This is a very simple card.
It is good at containing small
information.This is because It
require little markup to use
effectively.</ p >
</ div >
< div class = "card-action" >
< a href = "#"
class = "green-text" >Link</ a >
</ div >
</ div >
< div class = "divider black" ></ div >
< div class = "row" >
< h2 >FABs in Cards</ h2 >
< div class = "col s12 m6" >
< div class = "card" >
< div class = "card-image" >
< img src = "download.png" />
< span class = "card-title" >
Card Title
</ span >
< a class =
"btn-floating halfway-fab waves-effect waves-light red" >
< i class = "material-icons" >
add</ i ></ a >
</ div >
< div class = "card-content" >
< p >This is a very simple
card. It is good at
containing small information.
This is because It require
little markup to use effectively.
</ p >
</ div >
</ div >
</ div >
< div class = "col s12 m6" >
< div class = "card" >
< div class = "card-image" >
< img src = "download.png" />
< span class = "card-title" >
Card Title</ span >
< a class =
"btn-floating btn-large halfway-fab waves-effect waves-light red" >
< i class = "material-icons" >add</ i >
</ a >
</ div >
< div class = "card-content" >
< p >This is a very simple card.
It is good at containing small
information. This is because It
require little markup to use
effectively.</ p >
</ div >
</ div >
</ div >
</ div >
< div class = "divider black" ></ div >
< div class = "col s12 m7" >
< h2 class = "header" >
Horizontal Card</ h2 >
< div class = "card horizontal" >
< div class = "card-image" >
< img src = "" />
</ div >
< div class = "card-stacked" >
< div class = "card-content" >
< p >This is a very simple card.
It is good at containing
small information.</ p >
</ div >
< div class = "card-action" >
< a href = "#"
class = "green-text" >Link</ a >
</ div >
</ div >
</ div >
</ div >
< div class = "divider black" ></ div >
< h2 >Card Reveal</ h2 >
< div class = "card" >
< div class =
"card-image waves-effect waves-block waves-light" >
< img class = "activator"
src = "office.jpg" />
</ div >
< div class = "card-content" >
< span class =
"card-title activator grey-text text-darken-4" >
Card Title
< i class = "material-icons right" >
more_vert</ i ></ span >
< p >< a href = "#"
class = "green-text" >
Link</ a ></ p >
</ div >
< div class = "card-reveal" >
< span class =
"card-title grey-text text-darken-4" >
Card Title
< i class = "material-icons right" >
close
</ i ></ span >
< h5 >Here is some more information that
will be only revealed once clicked on.
</ h5 >
</ div >
</ div >
< div class = "divider black" ></ div >
< h2 >Tabs in Cards</ h2 >
< div class = "card" >
< div class = "card-content" >
< p >This is a very simple card.
It is good at containing small
information. This is because
It require little markup to use
effectively.</ p >
</ div >
< div class = "card-tabs" >
< ul class = "tabs tabs-fixed-width" >
< li class = "tab" >
< a class = "active green-text"
href = "#test4" >Test 1</ a >
</ li >
< li class = "tab" >
< a href = "#test5"
class = "green-text" >Test 2</ a >
</ li >
< li class = "tab" >
< a href = "#test6"
class = "green-text" >Test 3</ a >
</ li >
</ ul >
</ div >
< div class = "card-content grey lighten-4" >
< div id = "test4" >< h5 >Test 1</ h5 ></ div >
< div id = "test5" >< h5 >Test 2</ h5 ></ div >
< div id = "test6" >< h5 >Test 3</ h5 ></ div >
</ div >
</ div >
< div class = "divider black" ></ div >
< div class = "divider black" ></ div >
< br />
< br />
< 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 >输出如下：
