Materialize CSS

https://materializecss.com/

遇到的问题:

  1. 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

  1. class: card-panel
  2. 使用方法:
  • class="card-panel teal lighten-2"
  • class="card-panel dark"

2. set text color

  1. class: colorName-text
  2. 使用方法: 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

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

4. align your content

  1. vertical align
    1.1 class: valign-wrapper
    1.2 使用方法: div class="valign-wrapper">
  2. 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

  1. class: left, right
  2. 使用方法:
    div class="left">
    div class="right">

6. navbar

6.1 设置 navbar 对齐
  1. class:

    class="brand-logo center" 设置logo 居中
      设置 navbar links 居中
    • 使用方法:

6.2 Active Items
  • 增加类active 到 li 标签表示当前页
  1. class: class="active"
  2. 使用方法:
  3. JavaScript
  
6.3 Extended Navbar with Tabs

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

  1. class: nav-extended
  2. 使用方法:

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

6.5 Navbar 下拉菜单
  1. To add a navbar dropdown menu, add the ul dropdown structure into the page.
  2. Add an element to trigger the dropdown menu
  3. Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.
  4. class: navbar-fixed
  5. 使用方法:
---

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

---

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

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






L

你可能感兴趣的:(Materialize CSS)