Materialize CSS

https://materializecss.com/

遇到的问题：

because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

参考答案链接：
https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular/49269425#49269425
不需要修改 index.html，按照官网添加下面代码就会报上面的错

只需要修改 angular.json
"styles": [
"src/styles.css",
"node_modules/materialize-css/dist/css/materialize.min.css"
],

0. 总结： Class

1. set background color

class： card-panel
使用方法：

class="card-panel teal lighten-2"
class="card-panel dark"

2. set text color

class： colorName-text
使用方法： apply a text color ,just append -text to the color class

class="teal-text text-lighten-2"
class="dark-text text-darken-2"

3. set the body content's width

class： container
set the body content's width to the window width of ~xxx%
.s 90%
.m 85%
.l 70%
.xl 70%
使用方法：
ASD

4. align your content

vertical align
1.1 class: valign-wrapper
1.2 使用方法: div class="valign-wrapper">
horizon text align
2.1 class:
left-align
right-align
center-align
2.2 使用方法：


This should be right aligned

5. quickly float things

which is used to avoid specificity issues

class: left, right
使用方法：
div class="left">
div class="right">

6. navbar

6.1 设置 navbar 对齐

class:

class="brand-logo center" 设置logo 居中
- 使用方法：


  
    Logo 
    
        Sass
        Components
        JavaScript

6.2 Active Items

增加类active 到 li 标签表示当前页

class: class="active"
使用方法：
JavaScript

  
    
      Logo
      
        Sass
        Components
        JavaScript

6.3 Extended Navbar with Tabs

要实现增加拓展的组件到 navbar，需要增加类 nav-extended 到外层的nav tag

class: nav-extended
使用方法：


    
      Logo

 
      
        Test 1
        Test 2
        Disabled Tab
        Test 4

6.4 Fixed Navbar

To make the navbar fixed , you have to add an outer wrapping div with the class navbar-fixed.
This will offset your other content while making your nav fixed.
You can adjust the height of this outer div to change how much offset is on your content.
class: navbar-fixed
使用方法：


    
      
        Logo
        
          Sass
          Components

6.5 Navbar 下拉菜单

To add a navbar dropdown menu, add the ul dropdown structure into the page.
Add an element to trigger the dropdown menu
Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.
class: navbar-fixed
使用方法：

---

\***** 分割线  \*****

---

## 1. Color
> 1. background color:    ``` class="card-panel teal lighten-2"```
> 2. text color:  ```class="blue-text text-darken-2"```

// Background Color

This is a card panel with a teal lighten-2 class

// Text color ,To apply a text color, just append ' -text ' to the color class like this
This is a card panel with dark blue text

## 2. Grid   
> - standard 12 column fluid responsive grid system.
> 1. 用 grid 布局网页
> 2. container 设置为窗口宽度的 70% ，将网页内容居中。
The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
> 3.  grid 网页布局原理：
无论浏览器多大尺寸，一行grid 就是相同宽度的12 列
> 4. 所有的column 必须包含在同一个row 里面，且必须增加class       ```col ``` 到你内部的div 里面来增加这些 column。
> 5.  ```offset-s6``` 意思是偏移 6行
> 6. ```div class="col s7 push-s5"``` , ```class="col s5 pull-s7``` push 向右推，pull 向左拉
> 7.  ```class="section"``` used for simple top and bottom padding
> 8. ```class="divider"``` are 1 pixel lines that help break up your content.(水平分割线)
> 9. 

  





### 1.    columns contained inside a  row

this div is 6-columns wide on all screen sizes

### 2.   push and pull

This div is 7-columns wide on pushed to the right by 5-columns.

5-columns wide pulled to the left by 7-columns.


### 3.   offset

6-columns

### 4.   section and divider

section1

stuff

### 5.  Promotion Table
3 个等尺寸的div， 定义每个div 的宽度为4-columns

Promo Content 1 goes heres

Promo Content 2 goes heres

Promo Content 3 goes heres

### 6.  Side Navigation Layout

Grey navigation panel

Teal page content

### 7.  create responsive layouts
How to layout elements using our grid system. Show you how to design you layouts so that they look great on all screen sizes.
**Screen Sizes**
| | Mobile Devices | Tablet Devices | Desktop Devices  | Large Desktop Devices |
:-: | :-: | :-: | :-: | :-: |
|screen sizes|<= 600px |<= 600px | > 992px | > 1200px | 
class prefix | .s | .m | .l  | .xl 
container width| 90% | 85% | 70% | 70%
number of columns| 12 | 12 | 12 |12|
where s signifies the screen class-prefix (s = small, m = medium, l = large) 
#### 7.1 adding responsiveness
-  同时适用大屏幕和小屏幕

I am always full-width (col s12)

I am full-width on mobile (col s12 m6)

          
#### 7.2 Responsive Side Navigation Layout