Table表格
表格可以很好的来组织大量数据。 我们提供了一些实用程序类,以帮助你尽可能容易修改表格样式。 此外,为了改善移动端的体验,在移动端屏幕中,所有表格都会自动居中。
无边框表格
该表格默认情况下无边框。
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
有边框表格
class="bordered"
条纹形表格
class="striped"
Highlight Table
class="highlight"
中心对齐表格
class="centered"
Responsive Table
class="responsive-table"
CSS Transitions
-
Scale
<!-- Scaled in -->
<a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">
<i class="material-icons">add</i>
</a>
<!-- Scaled out -->
<a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out">
<i class="material-icons">add</i>
</a>
Typography字体
Roboto 2.0
Material Design使用的标准字体是Roboto。 我们已经在我们的框架中包括了字体文件。
框架与最新版本的Roboto Google发布的版本捆绑在一起。它有5种不同的字体权重,你可以使用:100,300,400,500,600。 这是来自谷歌Roboto样本文档的图像,显示不同的字体权重。删除 Roboto
如果你不想在你的网页上使用Roboto。 只需更改 font-family,根据情况修改下面的代码,并将其添加到你的自定义css。
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
-
Headers
我们提供了标题标签的基本样式。 在示例中,你可以看到 6 个标题标签的不同大小。
-
Blockquotes
你可以使用引用文字来强调,也可以使用它用来突出文章重点。
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
Flow Text
根据区域大小去改变字体的大小
<p class="flow-text">I am Flow Text</p>