辅助css

对齐

我们使用类可以很容易地对齐你的内容。

垂直对齐

你可以轻松地垂直居中，通过给放有你想要垂直居中的内容的容器增加“valign-wrapper”这个类。

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

文本对齐

这些类用于水平对齐内容。我们有“.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>

快速浮动

通过给元素增加“left”类或“right”类可以快速浮动。“！important”是用于避免特别的问题。

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

隐藏内容

我们提供容易使用的类在特定的屏幕尺寸时隐藏内容。

用法

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

格式化

这些类帮助你在你的网站上格式化各种内容。

截断

为了用一个省略号截取一行长的文本，在包含文本的标签上增加“truncate”类。看下面这个例子：在一个“card”里面一个标题被截断。

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

Hover

“hoverable”是一个“hover”类，为盒子阴影增加了生机，正如下面的例子所见。它可以被用在大多数元素上，但主要用于卡片上。

鼠标移过（hover）出现阴影：

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

浏览器默认

由于我们复写了许多浏览器默认样式和元素，因此我们提供了“.browser-default”这个类来恢复这些元素原始的样式。