MD的web框架之一Materialize_CSS3

Table表格

表格可以很好的来组织大量数据。 我们提供了一些实用程序类，以帮助你尽可能容易修改表格样式。 此外，为了改善移动端的体验，在移动端屏幕中，所有表格都会自动居中。

无边框表格
该表格默认情况下无边框。

  

    

      

          
Name
          
Item Name
          
Item Price
      
    

    

      

        
Alvin
        
Eclair
        
$0.87
      
      

        
Alan
        
Jellybean
        
$3.76
      
      

        
Jonathan
        
Lollipop
        
$7.00
      
    
  

有边框表格
class="bordered"

条纹形表格

class="striped"

Highlight Table
class="highlight"

中心对齐表格
class="centered"

Responsive Table
class="responsive-table"

CSS Transitions

• Scale

  
  
  image.png

  
    add
  

  
  
    add
  
  

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
  你可以使用引用文字来强调，也可以使用它用来突出文章重点。

  
  

    

      This is an example quotation that uses the blockquote tag.
    

Flow Text

根据区域大小去改变字体的大小

    
I am Flow Text