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

  
  image.png

<!-- 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>