Helpers帮助的类

• Alignment

我们可以很方便地使用 class 来帮助你调整你的内容。

• 垂直对齐
  valign-wrapper
  

<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

• Text Align
  .left-align,

.right-align

.center-align.

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

• Quick Floats

Quickly float things by adding the class

left

or

right

to the element.

!important

is used to avoid specificity issues.

<div class="left">...</div>
<div class="right">...</div>

• Hiding/Showing Content
  | | Screen Range |
  | --- | --- |
  | .hide | Hidden for all Devices |
  | .hide-on-small-only | Hidden for Mobile Only |
  | .hide-on-med-only | Hidden for Tablet Only |
  | .hide-on-med-and-down | Hidden for Tablet and Below |
  | .hide-on-med-and-up | Hidden for Tablet and Above |
  | .hide-on-large-only | Hidden for Desktop Only |
  | .show-on-small | Show for Mobile Only |
  | .show-on-medium | Show for Tablet Only |
  | .show-on-large | Show for Desktop Only |
  | .show-on-medium-and-up | Show for Tablet and Above |
  | .show-on-medium-and-down | Show for Tablet and Below |
• 用法

  <div class="hide-on-small-only"></div>

• 格式化

  • Truncation
    truncate
    

  <h4 class="truncate">This is an extremely long title that will be truncated</h4>

• Hover
  hoverable
  

这是一个链接

  <div class="card-panel hoverable"> Hoverable Card Panel</div>

• Browser Defaults

Because we override many of the default browser styles and elements, we provide the

.browser-defaultclass to revert these elements to their original state.

Name of Element	Reverted Style
UL	Bullet points
SELECT	Browser default select element
INPUT	Browser default input

Media图像

使用 Materialize 可以以不同的方式对图像进行排版

• 响应式图像

responsive-img

max-width: 100%

height:auto.

    <img class="responsive-img" src="cool_pic.jpg">

• 圆形图像

  
  

这个图像本身是个正方形。 添加 “.circle” class，使其显示为圆形。

class="circle"

      <div class="col s12 m8 offset-m2 l6 offset-l3">
        <div class="card-panel grey lighten-5 z-depth-1">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
            </div>
            <div class="col s10">
              <span class="black-text">
                This is a square image. Add the "circle" class to it to make it appear circular.
              </span>
            </div>
          </div>
        </div>
      </div>

• 视频

我们为嵌入式视频提供了一个容器，可以根据需要调整它们的大小。

video-container

      <div class="video-container">
        <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>

• Responsive Videos
  responsive-video
  

  <video class="responsive-video" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>

Pulse

pulse

<a class="btn btn-floating pulse"><i class="material-icons">menu</i></a>
<a class="btn btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>

Sass

使用Sass时，您可以非常迅速地更改站点的颜色方案。下面是一个非常小的示例，说明您可以通过sass in_variables.scss进行更改。

  $primary-color: color("materialize-red", "lighten-2") !default;
  $primary-color-light: false !default;
  $primary-color-dark: false !default;
  @if not $primary-color-light {
    $primary-color-light: lighten($primary-color, 15%);
  }
  @if not $primary-color-dark {
    $primary-color-dark: darken($primary-color, 15%);
  }
  $secondary-color: color("teal", "lighten-1") !default;
  $success-color: color("green", "base") !default;
  $error-color: color("red", "base") !default;

  $link-color: color("light-blue", "darken-1") !default;

  /*** More variables not shown here.. ***/

• Media Queries
  我们有3个媒体查询的3个标准屏幕大小，您可以使用在您的自定义Sass文件。这还包括将定义范围的媒体查询变量。
  Small screens are defined as having a max-width of 600px
  Medium screens are defined as having a max-width of 992px
  Large screen are defined as having a min-width of 993px
  Extra Large screen are defined as having a min-width of 1200px

 /* These classes can be added to HTML Elements
   * to affect visibility on certain displays.
   */
  .hide-on-small-only
  .hide-on-small-and-down
  .hide-on-med-and-down
  .hide-on-med-and-up
  .hide-on-med-only
  .hide-on-large-only
  .show-on-large
  .show-on-medium
  .show-on-small
  .show-on-medium-and-up
  .show-on-medium-and-down

sass

 @media #{$small-and-down} {
    // styles for small screens and down
  }
  @media #{$medium-and-up} {
    // styles for medium screens and larger
  }
  @media #{$medium-and-down} {
    // styles for medium screens and down
  }
  @media #{$large-and-up} {
    // styles for large screens and up
  }
  @media #{$extra-large-and-up} {
    // styles for extra large screens and up
  }

Shadow阴影

在材料设计中，一切都应该具有一定的z深度，它决定了该元素在页面上的上升或下沉的距离。

    <div class="col s12 m2">
      <p class="z-depth-1">z-depth-1</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-2">z-depth-2</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-3">z-depth-3</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-4">z-depth-4</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-5">z-depth-5</p>
    </div>