对齐

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

垂直对齐

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

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

隐藏或显示内容

我们提供简单易用的类来隐藏或显示内容在指定屏幕大小上。

类	屏幕类别
.hide	在所有设备隐藏
.hide-on-small-only	手机设备隐藏
.hide-on-med-only	仅对平板电脑隐藏
.hide-on-med-and-down	平板电脑及以下隐藏
.hide-on-med-and-up	平板电脑及以上隐藏
.hide-on-large-only	仅对桌面设备隐藏
.show-on-small	仅手机设备显示
.show-on-medium	仅平板设备显示
.show-on-large	仅桌面设备显示
.show-on-medium-and-up	平板电脑及以上显示
.show-on-medium-and-down	平板电脑及以下显示

用法

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

格式

这些类有助于格式化网站上的各种内容。

截尾

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

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

悬浮

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

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

浏览器默认

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

元素名称	关联的样式
UL	子弹点
SELECT	浏览器默认的select元素
INPUT	浏览器默认的input元素