menu

对齐

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

垂直对齐

通过增加 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>
        

快速浮动

快速浮动通过添加类leftright到元素中。!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 隐藏,仅桌面设备隐藏。

用法

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

格式

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

截尾

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

这是一个长长的标题头被截断。


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

悬浮

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

卡片标题

我是一个非常简单的卡片。我擅长展示小部分的内容。 我很方便, 因为我包含一个标记效果。


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

浏览器默认

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

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