materialize 布局1 --- 背景、文本设置

https://materializecss.com/
material design 配色：
https://material.io/archive/guidelines/style/color.html#color-color-system
materializecss 配色：
https://materializecss.com/color.html

设置背景颜色、文本颜色、文本宽度、文本对齐

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. 使用方法：
   <div class="container"> ASD </div>

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 使用方法：

<div>
<h5 class="right-align">This should be right aligned</h5>
</div>

5. quickly float things

which is used to avoid specificity issues

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

---

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

---

1. Color

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

// Background Color
 <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
  <div class="card-panel">
// Text color ,To apply a text color, just append  ' -text ' to the color class like this
    <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
  </div>

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.(水平分割线)

1. columns contained inside a row

<div class="row">
<div class="col s6 "> this div is 6-columns wide on all screen sizes</div>
</div>

2. push and pull

<div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>
          

3. offset

<div class="row">
<div class="col s3 offset-s6"> 6-columns</div>
<div class="col s3 offset-s6"> <span class="flow-text">6-columns</span></div>
</div>

4. section and divider

<div class="divider"></div>
<div class="section">
<h2>section1<h2>
<p>stuff</p>
</div>
<div class="divider"></div>

5. Promotion Table

3 个等尺寸的div， 定义每个div 的宽度为4-columns

<div class="row">
<div class="col s4">
Promo Content 1 goes heres
</div>
<div class="col s4">
Promo Content 2 goes heres
</div>
<div class="col s4">
Promo Content 3 goes heres
</div>
</div>

6. Side Navigation Layout

<div class="row">
      <div class="col s3">
         Grey navigation panel 
      </div>
      <div class="col s9">
        Teal page content 
      </div>
    </div>

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

• 同时适用大屏幕和小屏幕

<div class="row">
      <div class="grid-example col s12"><span class="flow-text">I am always full-width (col s12)</span></div>
      <div class="grid-example col s12 m6"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
    </div>

7.2 Responsive Side Navigation Layout

  <!-- Navbar goes here -->

    <!-- Page Layout here -->
    <div class="row">

      <div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
        <!-- Grey navigation panel

              This content will be:
          3-columns-wide on large screens,
          4-columns-wide on medium screens,
          12-columns-wide on small screens  -->

      </div>

      <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
        <!-- Teal page content

              This content will be:
          9-columns-wide on large screens,
          8-columns-wide on medium screens,
          12-columns-wide on small screens  -->

      </div>

    </div>

L