帮助类



对齐

使用几个简单的class你就能对页面内容进行对齐

垂直对齐

通过在外部包裹容器中使用valign-wrapper,就能保持内部的元素进行垂直对齐。

WOW垂直对齐

    <div class="valign-wrapper">
      <h5 class="valign">WOW垂直对齐</h5>
    </div>
        

文本对齐

这些主要是水平对齐。包括.left-align, .right-align and .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 or right能快速的浮动任何元素。且用!important来避免一些特殊问题。


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

隐藏

我们提供了几个class来在不同的屏幕尺寸上进行显隐。

Screen Range
.hide 所有尺寸
.hide-on-small-only 手机
.hide-on-med-only 平板
.hide-on-med-and-down 平板及以下尺寸
.hide-on-med-and-up 平板及以上尺寸
.hide-on-large-only 桌面电脑

用法

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

格式化

这些类帮助你格式化网页上不同的内容。

省略

使过长的文字用省略号代替,给包含长段文字的标签添加 truncate,看下面的例子。

妈妈说名字要起得长一点才能被别人看到


  <h4 class="truncate">妈妈说名字要起得长一点才能被别人看到</h4>