materialize卡片用法详细介绍 _前端开发

【materialize卡片用法详细介绍】卡片是显示不同类型相关内容的便捷方式。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 = "https://www.lsbin.com/#" class = "white-text" > Link< / a > < a href = "https://www.lsbin.com/#" 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 = "https://www.lsbin.com/#" class = "white-text" > Link< / a > < a href = "https://www.lsbin.com/#" 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 srchttps://www.lsbin.com/= "https://www.lsbin.com/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 = "https://www.lsbin.com/#" 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 srchttps://www.lsbin.com/= "https://www.lsbin.com/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 srchttps://www.lsbin.com/= "https://www.lsbin.com/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 srchttps://www.lsbin.com/= "" /> < / 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 = "https://www.lsbin.com/#" 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" srchttps://www.lsbin.com/= "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 = "https://www.lsbin.com/#" 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 = "https://www.lsbin.com/#test4" > Test 1< / a > < / li > < li class = "tab" > < a href = "https://www.lsbin.com/#test5" class = "green-text" > Test 2< / a > < / li > < li class = "tab" > < a href = "https://www.lsbin.com/#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 >

输出如下：