Materialise - 快速指南

实现 - 概述

Materialize 是一个使用 CSS、JavaScript 和 HTML 创建的 UI 组件库。Materialise 可重用 UI 组件有助于构建有吸引力、一致且实用的网页和 Web 应用程序，同时遵守现代 Web 设计原则，例如浏览器可移植性、设备独立性和优雅降级。

其一些显着特征如下 -

内置响应式设计。
标准 CSS，占用空间最小。
新版本的常见用户界面控件（例如按钮、复选框和文本字段）经过调整以遵循 Material Design 概念。
增强和专门的功能，例如卡片、选项卡、导航栏、Toast 等。
免费使用，需要 jQuery JavaScript 库才能正常运行。
跨浏览器，可用于创建可重用的 Web 组件。

响应式设计

Materialise 具有内置的响应式设计，因此使用 Materialise 创建的网站将根据设备尺寸重新设计。Materialise 类的创建方式使得网站可以适应任何屏幕尺寸。

使用 Materialise 创建的网站与 PC、平板电脑和移动设备完全兼容。

可扩展

Materialise 的设计非常简约且扁平。它的设计考虑到添加新的 CSS 规则比覆盖现有的 CSS 规则要容易得多。它支持阴影和大胆的颜色。颜色和色调在不同平台和设备上保持一致。

最重要的是，它完全免费使用。

Materialise - 环境设置

如何使用物化？

有两种使用 Materialise 的方法 -

本地安装- 您可以在本地计算机上下载materialize.min.css和materialize.min.js文件并将其包含在HTML代码中。

基于 CDN 的版本- 您可以直接从内容分发网络 (CDN) 将materialize.min .css 和materialize.min.js文件包含到您的HTML 代码中。

本地安装

转至https://materializecss.com/getting-started.html下载可用的最新版本。
然后，将下载的materialize.min.js文件放在您网站的目录中，例如/js和/css中的materialize.min.css 。

例子

将 css 和 js 文件包含在 HTML 文件中，如下所示。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize 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="materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="materialize.min.js"></script>
   </head>
   <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

它将产生以下结果。

基于CDN的版本

您可以将materialize.min.js和materialize.min.css文件直接从内容交付网络(CDN) 包含到您的HTML 代码中。cdnjs.cloudflare.com提供最新版本的内容。

在本教程中，我们使用 CDNjs.cloudflare.com 库的 CDN 版本。

例子

使用来自 cdnjs.cloudflare.com CDN 的Materialize.min.css和Materialize.min.js重写上述示例。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

它将产生以下结果。

物化 - 颜色

Materialise 支持一组丰富的颜色类。这些颜色类别的灵感和开发考虑了营销、路标和便签中使用的颜色。

红色的
粉色的
紫色的
深紫色
靛青
蓝色的
浅蓝色
青色
青色
绿色的
浅绿色
酸橙
黄色的
琥珀色
橙子
深橙色
棕色的
灰色的
蓝灰色
黑色的
白色的
透明的

用法

以下是亮度/暗度类别列表，可用于改变所应用的颜色。

减轻1
减轻2
减轻3
减轻4
减轻5
变暗-1
变暗-2
变暗-3
变暗-4
口音-1
口音-2
口音-3
口音-4

例子

以下示例演示了如何使用上述类来渲染背景或更改文本的颜色。如果是背景，请按原样添加类；如果是文本，请在颜色类中添加后缀“-text”，在闪电类中添加前缀“text-”。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class="card-panel">
         <div class="card-panel red lighten-2">
            <h1>Red Colored Theme</h1>
         </div>
         <span class="red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>
         <ul>
            <li class="red lighten-5"><p>Using red lighten-5</p></li>
            <li class="red lighten-4"><p>Using red lighten-4</p></li>
            <li class="red lighten-3"><p>Using red lighten-3</p></li>
            <li class="red lighten-2"><p>Using red lighten-2</p></li>
            <li class="red lighten-1"><p>Using red lighten-1</p></li>
            <li class="red"><p>Using red</p></li>
            <li class="red darken-1"><p>Using red darken-1</p></li>
            <li class="red darken-2"><p>Using red darken-2</p></li>
            <li class="red darken-3"><p>Using red darken-3</p></li>
            <li class="red darken-4"><p>Using red darken-4</p></li>
            <li class="red accent-1"><p>Using red accent-1</p></li>
            <li class="red accent-2"><p>Using red accent-2</p></li>
            <li class="red accent-3"><p>Using red accent-3</p></li>
            <li class="red accent-4"><p>Using red accent-4</p></li>
         </ul>
       </div>
    </body>
</html>

结果

验证结果。

物化 - 网格

Materialise 提供了 12 列流体响应网格。

它使用行和列样式类分别定义行和列。

先生。	类名和描述
1	排指定用于响应列的无填充容器。为了使响应类完全响应，该类是必需的。
2	坳指定具有子类的列。

col有几个子类，适用于不同类型的屏幕。

小屏幕设备的列

以下是小屏幕设备（通常是智能手机）的列级样式列表。

先生。	类名和描述
1	s1 定义 12 列中的 1 列，宽度为 08.33%
2	s2 定义 12 列中的 2 列，宽度为 16.66%。
3	s3 定义 12 列中的 3 列，宽度为 25.00%。
4	s4 定义 12 列中的 4 列，宽度为 33.33%。
s5 - s11
12	s12 定义 12 列中的 12 列，宽度为 100%。小屏幕手机的默认类别。

适用于中屏幕设备的列

以下是中屏幕设备（通常是平板电脑）的列级样式列表。

先生。	类名和描述
1	米1 定义 12 列中的 1 列，宽度为 08.33%
2	平方米定义 12 列中的 2 列，宽度为 16.66%。
3	立方米定义 12 列中的 3 列，宽度为 25.00%。
4	米4 定义 12 列中的 4 列，宽度为 33.33%。
m5-m11
12	米12 定义 12 列中的 12 列，宽度为 100%。中屏手机的默认类别。

适用于大屏幕设备的列

以下是大屏幕设备（通常是笔记本电脑）的列级样式列表。

先生。	类名和描述
1	l1 定义 12 列中的 1 列，宽度为 08.33%
2	l2 定义 12 列中的 2 列，宽度为 16.66%。
3	l3 定义 12 列中的 3 列，宽度为 25.00%。
4	l4 定义 12 列中的 4 列，宽度为 33.33%。
l5 - l11
12	l12 定义 12 列中的 12 列，宽度为 100%。大屏幕设备的默认类。

用法

每个子类根据设备的类型确定要使用的网格的列数。考虑以下 HTML 片段。

<div class="row">
   <div class="col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

如果 HTML 元素的 class 属性中未提及子类，则设备上使用的默认列为 12。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      </head>
      <body>
      <div class="teal">
            <h2>Mobile First Design Demo</h2>
            <p>Resize the window to see the effect!</p>
         </div>
         <hr/>
        <div class="row">
         <div class="col m1 grey center">1</div>
         <div class="col m1 center">2</div>
         <div class="col m1 grey center">3</div>
         <div class="col m1 center">4</div>
         <div class="col m1 grey center">5</div>
         <div class="col m1 center">6</div>
         <div class="col m1 center grey">7</div>
         <div class="col m1 center">8</div>
         <div class="col m1 center grey">9</div>
         <div class="col m1 center">10</div>
         <div class="col m1 center grey">11</div>
         <div class="col m1 center">12</div>
      </div>
      <div class="row">
         <div class="col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
         <div class="col s4 m8 l9 grey">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

结果

验证结果。

Materialise - 帮助者

Materialise 有几个实用程序类，可满足日常设计需求。

颜色实用程序类- 例如，.red、.green、.grey 等
对齐实用程序类- 例如，.valign-wrapper、.left-align、.right-align、.center-align、.left、.right
根据设备大小隐藏内容实用程序类- 例如，.hide、.hide-on-small-only、.hide-on-med-only、.hide-on-med-and-down、.hide-on-med -and-up 和 .hide-on-large-only
格式化实用程序类- 例如，截断、可悬停

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize 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="https://code.jquery.com/jquery-2.1.1.min.js"><!/script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Materialize Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class="red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class="green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.<!/p>
      </div>
      <h3>Alignment Utilities Demo</h3>
      <div class="card-panel valign-wrapper">
         <p class="valign">Vertically Aligned Text</p>
      </div>
      <div class="card-panel">
         <div><p class="left-align">Left Aligned Text</p></div>
         <div><p class="right-align">Right Aligned Text</p><!/div>
         <div><p class="center-align">Center Aligned Text</p></div>
      <div>
      <h3>Hide Utilities Demo</h3>
      <div class="hide">
         <p>Hidden on all devices</p>
      </div>
      <div class="hide-on-small-only">
         <p>Hidden on mobile devices</p>
      </div>
      <h3>Formatting Utilities Demo</h3>
      <div class="card-panel">
         <p class="truncate">The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.<!/p>
      </div>
      <div class="card-panel hoverable">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      <h3>Center Utility Demo</h3>
      <div class="card-panel center">
         <img src="html5-mini-logo.jpg" alt="html5">
      </div>
   </body>
</html>

结果

验证结果。

物化 - 媒体

Materialise 有几个类可以使图像和视频响应不同的尺寸。

responsive-img - 它使图像根据屏幕尺寸调整自身大小。
video-container - 用于具有嵌入视频的响应式容器。
响应视频- 使 HTML5 视频响应。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Materialize Media Examples</h2>
      <hr/>
      <h3>Images Demo</h3>
      <div class="card-panel">
         <img src="html5-mini-logo.jpg" alt="" class="responsive-img">
      </div>
      <div class="card-panel">
         <img src="html5-mini-logo.jpg" alt="" class="circle responsive-img">
      </div>
      <h3>Responsive Embeded Video Demo</h3>
      <div class="video-container"> 
         <iframe width="540" height="200" src="http://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video-container">
         <video width="300" height="200" controls autoplay>
            <source src="http://www.tutorialspoint.com/html5/foo.ogg" type="video/ogg" />
            <source src="http://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4" />
            Your browser does not support the video element.
         </video>
      </div>
   </body>
</html>

结果

验证结果。

物化 - 阴影

Materialise 有几个特殊的类，可以将容器显示为带阴影的纸质卡片。

先生。	类名和描述
1	z 深度-0 默认情况下移除具有 z 深度的元素的阴影。
2	z 深度 1 为任何带有 1px 边框阴影的 HTML 内容设置容器样式。添加 z 深度 1。
3	z 深度 2 为任何带有 2px 边框阴影的 HTML 内容设置容器样式。添加 z 深度 2。
4	z 深度 3 为任何带有 3px 边框阴影的 HTML 内容设置容器样式。添加 z 深度 3。
5	z 深度 4 使用 4px 边框阴影设置任何 HTML 内容的容器样式。添加 z 深度 4。
6	z 深度 5 为任何带有 5px 边框阴影的 HTML 内容设置容器样式。添加 z 深度 5。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   <style>
      div {
           width : 200px;
           height : 200px;
         }
   </style>
   </head>
   <body class="container">
      <h2>Materialize Shadow Examples</h2>
      <hr/>
         <div class="card-panel">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
         <div class="z-depth-1">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
         <div class="z-depth-2">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
         <div class="z-depth-3">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
            <div class="z-depth-4">
               <p><b>TODO:</b> Learn HTML5</p>
         </div>
            <div class="z-depth-5">
               <p><b>TODO:</b> Learn HTML5</p>
         </div>
   </body>
</html>

结果

验证结果。

Materialize - 表格

Materialise 可用于使用表格上的各种样式来显示不同类型的表格。

先生。	类名和描述
1	没有任何表示没有任何边框的基本表格。
2	剥离的显示剥离的表。
3	有边框的绘制一个带有跨行边框的表格。
4	强调绘制突出显示的表格。
5	居中绘制一个表格，所有文本在表格中居中对齐。
6	响应表如果屏幕太小而无法显示内容，则绘制响应式表格以显示水平滚动条。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      <style>
         div {
               width : 200px;
               height : 200px;
            }
      </style>
   </head>
   <body class="container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table>
      <thead>
         <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
      </thead>
      <tbody>
         <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
         <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
      </tbody>
      </table>
      <h3>Stripped Table with borders</h3>
      <table class="striped bordered">
      <thead>
         <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
      </thead>
      <tbody>
         <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
         <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
      </tbody>
      </table>
      <hr/>
      <h3>Centered Table</h3>
      <table class="centered">
      <thead>
         <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
      </thead>
      <tbody>
         <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
         <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
      </tbody>
      </table>
      <h3>Responsive table</h3>
      <table class="responsive-table">
      <thead>
         <tr>
            <th>Student</th><th>Class</th><th>Data #1</th>
            <th>Data #2</th><th>Data #3</th><th>Data #4</th>
            <th>Data #5</th><th>Data #6</th><th>Data #7</th>
            <th>Data #8</th><th>Data #9</th><th>Data #10</th>
         </tr>
      </thead>
      <tbody>
      <tr>
         <td>Mahesh Parashar</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
         <tr>
         <td>Rahul Sharma</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
            <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
      </tbody>
      </table>
   </body>
</html>

结果

验证结果。

物化 - 版式

Materialise 使用Roboto 2.0作为标准字体。可以使用以下 CSS 样式覆盖它。

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

以下是标题、块引用和自由流动但响应式文本的示例。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Typography Demo</h2>
         <hr/>
         <h3>Headings</h3>
      <div class="card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h6>Heading 6</h6>
      </div>
         <h3>Block Quotes</h3>
      <div class="card-panel">
         <blockquote>
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </blockquote>
      </div>
         <h3>Responsive free-flow text</h3>
      <div class="card-panel">
         <p class="flow-text">
         The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </p>
      </div>
   </body>
</html>

结果

验证结果。

物化 - 徽章

Materialise 徽章组件是一个屏幕通知，可以是数字或图标。一般用于强调物品的数量。

先生。没有。	类名和描述
1	徽章将元素标识为 MDL 徽章组件。对于 span 元素是必需的。
2	新的向徽章组件添加“新”类，为其提供背景。

先生。没有。

类名和描述

徽章

将元素标识为 MDL 徽章组件。对于 span 元素是必需的。

新的

向徽章组件添加“新”类，为其提供背景。

以下是以不同方式使用徽章的示例。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Badges 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Badges Demo</h2>
         <hr/>
         <h3>Badges in List</h3>
      <div class="collection">
         <a href="#" class="collection-item">Inbox<span class="badge">12</span></a>
         <a href="#" class="collection-item">Unread<span class="new badge">4</span></a>
         <a href="#" class="collection-item">Sent</a>
         <a href="#" class="collection-item">Outbox<span class="badge">14</span></a>
      </div>
         <h3>Badges in dropdowns</h3>
      <ul id="dropdown" class="dropdown-content">
         <li><a href="#">Inbox<span class="badge">12</span></a></li>
         <li><a href="#!">Unread<span class="new badge">4</span></a></li>
         <li><a href="#">Sent</a></li>
            <li><a href="#">Outbox<span class="badge">14</span></a></li>
      </ul>
      <a class="btn dropdown-button" href="#" data-activates="dropdown">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
      <h3>Badges in Navigation</h3>
      <nav>
         <div class="nav-wrapper">
            <a href="" class="brand-logo">TutorialsPoint</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
               <li><a href="">Inbox</a></li>
               <li><a href="">Unread<span class="new badge">4</span></a></li>
               <li><a href="#">Sent</a></li>
                  <li><a href="#">Outbox</a></li>
            </ul>
         </div>
      </nav>
   </body>
</html>

结果

验证结果。

Materialize - 按钮

Materialise 提供了不同的 CSS 类，以对按钮应用各种预定义的视觉和Behave增强功能。下表提到了可用的类别及其效果。

先生。	类名和描述
1	按钮将按钮或锚点设置为 Materialize 按钮（必需）。设置按钮的凸起显示效果。
2	btn 浮动创建一个圆形按钮。
3	btn-平设置按钮平面显示效果，默认。
4	btn-大创建大按钮。
5	残疾人创建一个禁用按钮。
6	类型=“提交” 将锚点或按钮表示为主按钮。
7	波浪效应设置波纹点击效果，可以与任何其他类结合使用。

例子

以下示例演示了如何使用 mdl-button 类来显示不同类型的按钮。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="card-panel">
         <h5>Raised Buttons</h5>
         <button class="btn waves-effect waves-teal">Add</button></td>
         <button class="btn waves-effect waves-teal"><i class="material-icons left">add</i>Add</button></td>
         <button class="btn waves-effect waves-teal"><i class="material-icons right">add</i>Add</button></td>
         <button class="btn waves-effect waves-teal disabled">Add</button></td>
      </div>
      <div class="card-panel">
         <h5>Flat Buttons</h5>
         <button class="btn-flat waves-effect waves-teal">Add</button></td>
         <button class="btn-flat waves-effect waves-teal disabled" ><i class="material-icons left">add</i>Add</button></td>
      </div>
      <div class="card-panel">
         <h5>Floating Buttons</h5>
         <a class="btn-floating waves-effect waves-light red"><i class="material-icons">add</i></a>
         <a class="btn-floating waves-effect waves-light red disabled" ><i class="material-icons">add</i></a>
      </div>
      <div class="card-panel">
         <h5>Primary Buttons</h5>
         <button class="btn waves-effect waves-light red" type="submit">Send<i class="material-icons right">send</i></button>
         <button class="btn waves-effect waves-light red disabled" type="submit" >Cancel<i class="material-icons right">cancel</i></button>
      </div>
      <div class="card-panel">
         <h5>Large Buttons</h5>
         <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
         <a class="btn-floating btn-large waves-effect waves-light red disabled"><i class="material-icons">add</i></a>
      </div>
   </body>
</html>

结果

验证结果。

物化 - 面包屑导航

Materialise 提供了各种 CSS 类，可以轻松地创建漂亮的面包屑导航。下表提到了可用的类别及其效果。

先生。	类名和描述
1	导航包装器将导航组件设置为面包屑/导航栏包装。
2	面包屑将锚元素设置为面包屑。最后一个锚元素处于活动状态，而其余元素显示为灰色。

先生。

类名和描述

导航包装器

将导航组件设置为面包屑/导航栏包装。

面包屑

将锚元素设置为面包屑。最后一个锚元素处于活动状态，而其余元素显示为灰色。

例子

以下示例演示了如何使用面包屑类来展示导航栏。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize BreadCrumb 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <nav>
         <div class="nav-wrapper">
            <div class="col s12">
               <a href="#" class="breadcrumb">Home</a>
               <a href="#" class="breadcrumb">Technology</a>
               <a href="#" class="breadcrumb">HTML5</a>
            </div>
         </div>
      </nav>
   </body>
</html>

结果

验证结果。

物化 - 卡片

Materialise 提供不同的 CSS 类来应用各种预定义的视觉和Behave增强功能来显示各种类型的卡片。下表提到了可用的类别及其效果。

先生。	类名和描述
1	卡片将 div 元素标识为 Materialise 卡容器。“外部”div 必需。
2	卡片内容将 div 标识为卡片内容容器，并且在“内部”div 上是必需的。
3	卡标题将 div 标识为卡片标题容器，并且在“内部”标题 div 上是必需的。
4	卡牌行动将 div 标识为卡片操作容器，并将适当的文本特征分配给操作文本。“内部”动作 div 必需；内容直接进入 div 内部，没有中间容器。
5	卡片图像将 div 标识为卡片图像容器，并且在“内部”div 上是必需的。
6	卡牌展示将 div 标识为显示的文本容器。
7	活化剂将 div 标识为显示文本容器，并将图像标识为显示容器。用于显示与图像相关的上下文信息。
8	卡面板将 div 标识为带有阴影和填充的简单卡片。
9	小卡片将 div 标识为小尺寸卡片。高度 - 300px；
10	卡介质将 div 标识为中型卡片。高度 - 400px；
11	卡片更大将 div 标识为大尺寸卡片。高度 - 500px；

例子

以下示例展示了如何使用卡片类来展示各种类型的卡片。

<!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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/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.tutorialspoint.com">www.tutorialspoint.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.tutorialspoint.com">www.tutorialspoint.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.tutorialspoint.com">www.tutorialspoint.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>

结果

验证结果。

Materialise - 芯片

Materialise 提供了一个称为Chip 的特殊组件，它可用于表示一小组信息。例如，联系人、标签等。

先生。	类名和描述
1	芯片将div容器设置为一个chip。

例子

以下示例演示了如何使用芯片类来展示创建各种类型的标签。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="chip">
         <img alt="HTML5" src="html5-mini-logo.jpg">HTML 5
      </div>
      <div class="chip">
         HTML 5<i class="material-icons">close</i>
      </div>
   </body>
</html>

结果

验证结果。

Materialize - 集合

Materialise 提供了特殊的类来表示各种类型的集合，其中集合表示一组相关的信息项。

先生。	类名和描述
1	收藏将 div 或 ul 容器设置为集合。
2	收藏品将 a 或 li 项设置为集合项。
3	积极的将 a 或 li 项目显示为活动集合项目。
4	带标题将集合标记为具有标题。
5	集合标题将 a 或 li 项设置为集合标头。
6	头像将 a 或 li 项目设置为头像项目。
7	可驳回的使收藏品能够被滑走。仅适用于触摸屏设备。

例子

以下示例演示了如何使用集合类来展示创建各种类型的集合。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h3>Simple Collection</h3><hr/>
      <ul class="collection">
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection of Links</h3><hr/>
      <div class="collection">
         <a href="#" class="collection-item">HTML 5</a>
         <a href="#!" class="collection-item active">JQuery</a>
         <a href="#!" class="collection-item">JavaScript</a>
         <a href="#!" class="collection-item">CSS</a>
      </div>
      <h3>Collection with Header</h3><hr/>
      <ul class="collection with-header">
         <li class="collection-header"><h3>Front End Technologies</h3></li>
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class="collection">
         <li class="collection-item"><div>HTML 5<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JQuery<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JavaScript<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>CSS<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
      </ul>
      <h3>Collection with Avatar</h3><hr/>
      <ul class="collection">
         <li class="collection-item avatar">
            <img alt="HTML5" src="html5-mini-logo.jpg" class="circle">
            <span class="title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
         <li class="collection-item avatar">
            <i class="material-icons circle green">insert_chart</i>
            <span class="title">HighCharts</span>
            <p></p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
      </ul>
      <h3>Collection with dismissible content</h3><hr/>
      <ul class="collection">
         <li class="collection-item dismissable">HTML 5</li>
         <li class="collection-item dismissable">JQuery</li>
         <li class="collection-item dismissable">JavaScript</li>
         <li class="collection-item dismissable">CSS</li>
      </ul>
   </body>
</html>

结果

验证结果。

物化 - 页脚

Materialise 提供了特殊的类来表示各种类型的集合，其中集合表示一组相关的信息项。

先生。	类名和描述
1	页脚将 div 容器设置为页脚。
2	页脚版权将 div 容器设置为页脚版权容器。

先生。

类名和描述

页脚

将 div 容器设置为页脚。

页脚版权

将 div 容器设置为页脚版权容器。

例子

以下示例演示了如何使用页脚类来展示示例页脚。

<html>
   <head>
      <title>The Materialize Collections 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <footer class="page-footer">
         <div class="row">
            <div class="col s12 m6 l6">
               <h5 class="white-text">Footer Content</h5>
            </div>
            <div class="col">
               <ul>
                  <li><a href="#" class="grey-text text-lighten-4 right">Help</a></li>
                  <li><a href="#" class="grey-text text-lighten-4 right">Privacy and Terms</a></li>
                  <li><a href="#" class="grey-text text-lighten-4 right">User Agreement</a></li>
               </ul>
            </div>
         </div>
         <div class="footer-copyright">
            <div class="container">
               © 2016 Copyright Information
               <a class="grey-text text-lighten-4 right" href="#!">Links</a>
            </div>
         </div>
      </footer>
   </body>
</html>

结果

验证结果。

物化-形式

Materialise 有一个非常漂亮且响应灵敏的 CSS 用于表单设计。使用以下 CSS -

先生。	类名和描述
1	输入字段将 div 容器设置为输入字段容器。必需的。
2	证实将验证样式添加到输入字段。
3	积极的显示具有活动样式的输入。
4	物化文本区域用于设置文本区域的样式。文本区域将根据内部文本自动调整大小。
5	填写显示带有填充框样式的复选框。

例子

以下示例演示了如何使用输入类来展示示例表单。

<html>
   <head>
      <title>The Materialize Form 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <div class="input-field col