工具/Utility

一些实用的效果类集合,它们可以用来风格化你的网页内容。

显示

示例

div 块添加了 display-block
div 块添加了display-inline
,一些其他文字。
div 块添加了 display-inline-block
,一些其他文字。

代码

<div class="display-block">...</div>
<div class="display-inline">...</div>
<div class="display-inline-block">...</div>

浮动与清除浮动

浮动是创建各式布局的基础。但浮动需要清除,否则在最坏的情况下需,你会得到一个杂乱无章的页面。下面的类能帮助你创建基础的布局。

示例

一些向左浮动的文字
一些向右浮动的文字

代码

<div class="clearfix">
    <div class="float-right">...</div>
    <div class="float-left">...</div>
</div>

排版方向

示例

بعض الكلمات من اليمين إلى اليسار
一些从左向右的文字

代码

<div class="dir-rtl">...</div>
<div class="dir-ltr">...</div>

图片与对象的对齐

示例

图像 aligned to the right我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

图像 aligned to the center我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

图像 aligned to the left我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

代码

<p class="clearfix">
    <img class="align-right" src="">...
</p>
<p class="clearfix">
    <img class="align-center" src="">...
</p>
<p class="clearfix">
    <img class="align-left" src="">...
</p>

垂直对齐

示例

一些垂直居顶的文字。
一些垂直居中的文字。
一些垂直居底的文字。

代码

<div class="vertical-align" style="height:120px;">
    <div class="vertical-align-top">
        ...
    </div>
</div>
<div class="vertical-align" style="height:120px;">
    <div class="vertical-align-middle">
        ...
    </div>
</div>
<div class="vertical-align" style="height:120px;">
    <div class="vertical-align-bottom">
        ...
    </div>
</div>

元素的定位

FEA 提供一系列的类去定位你的内容,而无须更改你自己的 CSS。

描述
position-top 将元素绝对定位在顶部
position-top-left 将元素绝对定位在左侧顶部
position-top-right 将元素绝对定位在右侧顶部
position-bottom 将元素绝对定位在底部
position-bottom-left 将元素绝对定位在左侧底部
position-bottom-right 将元素绝对定位在右侧底部
position-cover 为元素添加绝对定位,并将其扩展覆盖其父元素
position-relative 为元素添加relative定位方法

边框圆角

要为元素添加圆角,添加 border-radius 即可。要使用圆形,添加 border-circle 即可。

示例

图像 with border radius 图像 with border radius small 图像 with border radius large 图像 with border circle

代码

<img class="border-radius" width="100" height="100" src="">
<img class="border-radius-sm" width="100" height="100" src="">
<img class="border-radius-lg" width="100" height="100" src="">
<img class="border-circle" width="100" height="100" src="">

滚动

示例

表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
表格脚部 表格脚部 表格脚部 表格脚部 表格脚部 表格脚部 表格脚部 表格脚部 表格脚部 表格脚部
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据

可滚动文本 我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

可滚动框

代码

<div class="scrollable" style="height:90px;">
    ...
</div>
<div class="scrollable-text">
    ...
</div>
<div class="scrollable-box">
    ...
</div>

边距

添加一个下面的类为块元素添加外边距。

描述
margin 为一个段落添加相同的顶部和底部外边距。
margin-top 添加顶部外边距。
margin-bottom 添加底部外边距。
margin-left 添加左边外边距。
margin-right 添加右边外边距。

使用一个下面的类来为块元素添加较小的外边距。

描述
margin-sm 为一个段落添加较小的顶部和底部外边距。
margin-top-sm 添加较小的顶部外边距。
margin-bottom-sm 添加较小的底部外边距。
margin-left-sm 添加较小的左边外边距。
margin-right-sm 添加较小的右边外边距。

使用一个下面的类来为块元素添加较大的外边距。

描述
margin-lg 为一个段落添加较大的顶部和底部外边距。
margin-top-lg 添加较大的顶部外边距。
margin-bottom-lg 添加较大的底部外边距。
margin-left-lg 添加较大的左边外边距。
margin-right-lg 添加较大的右边外边距。

添加一个下面的类来移除块元素的外边距。

描述
margin-remove 移除全部外边距。
margin-remove-top 移除顶部外边距。
margin-remove-bottom 移除顶部外边距。
margin-remove-left 移除左边外边距。
margin-remove-right 移除右边外边距。

可见性

描述
hide 在所有设备上隐藏该元素。
show 在所有设备上显示该元素。
invisible 该元素透明度为 0。
visible 该元素透明度为 1。
sr-only 只在阅读器上显示该元素。

打印可见性

示例

打印时不可见的文本。 只打印时可见的文本。

代码

<span class="hide-print">...</span>
<span class="show-print">...</span>

响应式可见性

你可以在特定的视口宽度下对内容进行显示或隐藏。通过设置断点变量可以很容易的进行修改。由于不同设备的尺寸变得越来越模糊,所以类的名称保持通用性而不提及任何具体的设备名称。

小屏幕(手机)
最大 639
中屏幕(平板)
640 到 991
大屏幕(PC)
992 以上
show-sm 可见 隐藏 隐藏
show-md 隐藏 可见 隐藏
show-lg 隐藏 隐藏 可见
hide-sm 隐藏 可见 可见
hide-md 可见 隐藏 可见
hide-lg 可见 可见 隐藏