助手

对齐

我们使用几个简单的类来是你的页面进行对齐。

垂直对齐

通过增加 valign-wrapper 类来使包裹的内容垂直居中。

<div class="valign-wrapper">
<h5 class="valign">这个应该垂直居中对齐</h5>
</div>

文本对齐

这些类用于水平对齐内容。我们有 .left-align, .right-align 和 .center-align

<div>
  <h5 class="left-align">这个应该左对齐</h5>
</div>
<div>
  <h5 class="right-align">这个应该右对齐</h5>
</div>
<div>
  <h5 class="center-align">这个应该居中对齐</h5>
</div>

快速浮动

快速浮动通过添加类 left 或 right 到元素中。!important 常用避免特殊问题。

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

隐藏内容

我们提供易于使用的类来隐藏特定屏幕大小的内容。

用法

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

格式

这些类用于格式话网站上的不同内容。

截尾

清空一行中溢出的文本并用省略号代替，添加类 truncate 到包含内容的标签里。 看下面一个卡片标题头被截断的例子。

<h4>这是一个长长的标题头被截断。</h4>

悬浮

hoverable是一个悬浮类，给盒子增加一个动态的阴影就像下面。 它可以用在很多元素中，并不意味着只能用于卡片中。

<div class="card-panel hoverable"> 可悬浮卡片面板</div>

浏览器默认

因为我们重写很多默认的浏览器样式与元素，我们提供 .browser-default 类来还原为浏览器默认的样式或元素。