字体图标 #

图标库使用的是第三方开源图标库字体 font-awesome 将其CSS完全转换成stylus 框架内部选择性加载，命名完全按照改图标库方法命名。

引用 @import "styl/mixins.styl"
在其中有 @import "icons/font-awesome.styl"

使用方法 #

• 字体图标 请使用 <i> 标签
• 引用字体图标中所属的class名即可出现图标

<i class="icon icon-at"></i> 
<i class="icon icon-automobile"></i> 
<i class="icon icon-balance-scale"></i> 
<i class="icon icon-ban"></i> 
<i class="icon icon-bank"></i> 
<i class="icon icon-bar-chart"></i> 
<i class="icon icon-bar-chart-o"></i> 
<i class="icon icon-barcode"></i> 
<i class="icon icon-bars"></i>

图标大小 #

• 通过应用 icon-large (增大 33%), icon-2x, icon-3x 或 icon-4x样式让图标变得更大。

icon-2x

icon-3x

icon-4x

icon-5x

<p><i class="icon icon-camera-retro icon-2x"></i> icon-2x</p>
<p><i class="icon icon-camera-retro icon-3x"></i> icon-3x</p>
<p><i class="icon icon-camera-retro icon-4x"></i> icon-4x</p>
<p><i class="icon icon-camera-retro icon-5x"></i> icon-5x</p>

• 通过设置字体的大小 css font-size 属性来设置图标

{
    font-size: 14px;
    font-size: 16px;
    font-size: 18px;
    font-size: 20px;
}

颜色 #

通过设置其css color 属性来改变图标颜色

{
    color: red;
    color: blue;
    color: #999;
    color: #333;
}

栅格系统 #

引用 @import "styl/mixins.styl"
引用 @import "styl/grid.styl"

简介 #

更好的创建页面布局，面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。

• 栅格分为12列布局
• 必须包含在.container 或 .container_fluid 容器中
• 必须通过 行.row 在水平方向创建一组列
• 内容必须放在列内，只有列可以作为 行.row 的直接子元素
• 栅格大于12列，多余的列将被作为一个整体另起一行排列。

多种屏幕设备定义类 #

说明: col_xs_、col_sm_ 下面四种写法、其实样式是一样，都是做栅格来用的，只不过是通过名字来区分pc，手机端，不同尺寸的屏幕。

使用场景: 有些地方是在大屏幕显示，小屏幕不显示，可以通过父节点 隐藏某个栅格。

1. .col_xs_ 超小屏幕 手机 (<768px) 。
2. .col_sm_ 小屏幕 平板 (≥768px) 。
3. .col_md_ 中等屏幕 桌面显示器 (≥992px) 。
4. .col_lg_ 大屏幕 大桌面显示器 (≥1200px) 。

参数 #

• .container 固定宽度并支持响应式布局的容器。
• .container_fluid 100% 宽度，全部视口的容器。
• 类前缀 .col_xs_ .col_sm_ .col_md_ .col_lg_ 。
• 栅格内将内容再次嵌套，需添加一个新的 .row 元素，被嵌套的行所包含的列的个数不能超过12。
• 使用 .col_md_offset_* 将列向右偏移。
• 使用 .col_md_push_*和 .col_md_pull_* 可以改变列的顺序。

实例 #

<div class="container">

    <!-- 12等分-列布局-->
    <div class="row">
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
        <div class="col_md_1">.col_md_1</div>
    </div>

    <!-- 3等分-列布局-->
    <div class="row">
        <div class="col_md_4">.col_md_4</div>
        <div class="col_md_4">.col_md_4</div>
        <div class="col_md_4">.col_md_4</div>
    </div>

    <!-- 4等分-列布局-->
    <div class="row">
        <div class="col_sm_3">.col_sm_3</div>
        <div class="col_sm_3">.col_sm_3</div>
        <div class="col_sm_3">.col_sm_3</div>
        <div class="col_sm_3">.col_sm_3</div>
    </div>

    <!-- 3-9分-列布局-->
    <div class="row">
        <div class="col_lg_3">.col_lg_3</div>
        <div class="col_lg_9">.col_lg_9</div>
    </div>

    <!-- 9-3分-列布局-->
    <div class="row">
        <div class="col_xs_9">.col_xs_9</div>
        <div class="col_xs_3">.col_xs_3</div>
    </div>

    <!-- 8-4分-列布局-->
    <div class="row">
        <div class="col_xs_12 col_md_8">.col_xs_12 .col_md_8</div>
        <div class="col_xs_6 col_md_4">.col_xs_6 .col_md_4</div>
    </div>

    <!-- 大于12列布局-.row 内包含的列大于12个，包含多余列的元素将作为一个整体单元被另起一行排列。-->
    <div class="row">
        <div class="col_xs_9">.col_xs_9</div>
        <div class="col_xs_4">.col_xs_4</div>
        <div class="col_xs_8">.col_xs_8</div>
    </div>

    <!-- 列偏-移通过 offset 将列向右偏移-->
    <div class="row">
        <div class="col_md_4">.col_md_4</div>
        <div class="col_md_4 col_md_offset_4">.col_md_4 .col_md_offset_4</div>
    </div>
    <div class="row">
        <div class="col_md_3 col_md_offset_3">.col_md_3 .col_md_offset_3</div>
        <div class="col_md_3 col_md_offset_3">.col_md_3 .col_md_offset_3</div>
    </div>
    <div class="row">
        <div class="col_md_6 col_md_offset_3">.col_md_6 .col_md_offset_3</div>
    </div>

    <!--列嵌套-栅格内将内容再次嵌套，需添加一个新的 .row 元素，被嵌套的行所包含的列的个数不能超过12 -->
    <div class="row">
        <div class="col_sm_10">
        层 1: .col_sm_10
            <div class="row">
                <div class="col_xs_8 col_sm_6">
                层 2: .col_xs_8 .col_sm_6
                </div>
                <div class="col_xs_4 col_sm_6">
                层 2: .col_xs_4 .col_sm_6
                </div>
            </div>
        </div>
    </div>

    <!-- 列排序-通过使用 .col_md_push_* 和 .col_md_pull_* 就可以很容易的改变列的顺序。-->
    <div class="row">
        <div class="col_md_9 col_md_push_3">.col_md_9 .col_md_push_3</div>
        <div class="col_md_3 col_md_pull_9">.col_md_3 .col_md_pull_9</div>
    </div>
</div>

排版 #

标题 #

HTML中的所有标题标签，<h1>到<h6>均可使用。另外，还提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。

HTML中定义的所有标题标签, 从<h1>到<h6>均可使用

<h1>h1标题</h1>  
<h2>h2标题</h2>  
<h3>h3标题</h3>  
<h4>h4标题</h4>  
<h5>h5标题</h5>  
<h6>h6标题</h6>

在标题内还可以包含<small>标签或赋予.small类的元素，可以用来标记副标题。

<h1>h1标题 <small>RUI文本</small></h1>  
<h2>h2标题 <small>RUI文本</small></h2>  
<h3>h3标题 <small>RUI文本</small></h3>  
<h4>h4标题 <small>RUI文本</small></h4>  
<h5>h5标题 <small>RUI文本</small></h5>  
<h6>h6标题 <small>RUI文本</small></h6>

页面主体 #

RUI将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>（段落）元素还被设置了等于1/2（即 10px）的底部外边距（margin）。

<p>...</p>

内联文本元素 #

标记文本 #

对于突出文本运行，因为它在其他方面的相关性，使用<mark>标记。

您可以使用该商标标记<mark>亮点</mark>文本。

被删除的文本 #

对于被删除的文本使用<del>标签。

<del>这行文字是为了被视为已删除的文字</del>

无用文本 #

对于没用的文本使用<s>标签。

<s>这行文字是为了被视为不再使用。</s>

插入文本 #

额外插入的文本使用<ins>标签。

<ins>这行文字是为了被视为额外插入的文件。</ins>

带下划线的文本 #

为文本添加下划线，使用<u>标签。

<u>这行文字将呈现为下划线</u>

小号文本 #

对于不需要强调的inline或block类型的文本，使用<small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予<small>类以代替任何<small>元素。

<small>这行文字是为了被视为小字。</small>

着重 #

通过增加 font-weight 值强调一段文本。

<strong>呈现为粗体文本</strong>

斜体 #

用斜体强调一段文本。

<em>呈现为斜体</em>

替代元素 #

在 HTML5 中可以放心使用 <b>和 <i> 标签。<b>用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

对齐 #

通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text_left">左对齐的文本。</p>
<p class="text_center">居中文本。</p>
<p class="text_right">右对齐文本。</p>
<p class="text_justify">对齐文本。</p>
<p class="text_nowrap">没用包裹的文字。</p>

状态文本颜色 #

这些用去强调的工具类通过颜色来表示强调。

默认默认

首选项（primary）

警告（warning）警告（warning）

报错（error）报错（error）

一般信息（info）一般信息（info）

成功（success）成功（success）

<p class="muted">默认默认</p>
<p class="text_primary">首选项（primary）</p>
<p class="text_warning">警告（warning）警告（warning）</p>
<p class="text_danger">报错（error）报错（error）</p>
<p class="text_info">一般信息（info）一般信息（info）</p>
<p class="text_success">成功（success）成功（success）</p>

改变大小写 #

通过这几个类可以改变文本的大写

<p class="text_lowercase">小写</p>
<p class="text_uppercased_text">大写</p>
<p class="text_capitalized_text">首字母大写</p>

缩略语 #

当鼠标悬停在缩写喝缩写词上时就会显示完整内容，RUI实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

基本缩略语 #

<abbr title="attrbute">attr</abbr>

首字母缩略语 #

为缩略语添加 .initialism类，可以让font-size变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址 #

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

<address>
    <strong>热璞科技</strong>
    上海市，青浦区，徐泾镇<br/>
    盈港东路2075弄1号<br/>
    <abbr title="Phone">P:</abbr>(021) 6155-9355
</address>

引用 #

在你的文档中引用其他来源的内容。

默认样式的引用 #

将任何 HTML 元素包裹在 <blockquote>中即可表现为引用样式。对于直接引用，我们建议用 <p>标签。

<blockquote>
    <p>引用文本引用文本引用文本引用文本</p>
</blockquote>

多种引用样式 #

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。

命名来源 #

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

<blockquote>
    <p>引用字段引用字段引用字段引用字段</p>
    <footer>用于标明引用来源。来源的名称可以包裹进cite标签内<cite titile="source title">source title</cite></footer>
</blockquote>

另一种展示风格 #

通过赋予.blockquote_reverse类可以让引用呈现内容右对齐的效果。

<blockquote class="blockquote_reverse">
    <p>引用字段引用字段引用字段引用字段引用字段引用字段引用字段引用字段</p>
    <footer>用于标明引用来源。来源的名称可以包裹进cite标签内<cite>source title</cite></footer>
</blockquote>

列表 #

无序列表 #

排列顺序无关紧要的一列元素。

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
</ul>

有序列表 #

顺序至关重要的一组元素。

<ol>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
</ol>

无样式列表 #

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

 <ul class="list_unstyled">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
</ul>

内联列表 #

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list_inline">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    <li>项目四</li>
</ul>

描述 #

带有描述的短语列表

<dl>
    <dt>说明列表</dt>
    <dd>说明列表是完美的定义条款。</dd>
</dl>

水平排列的描述 #

.dl_horizontal可以让<dl>内的短语及其描述拍照一行。开始是像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排在一行。

<dl class="dl_horizontal">
    <dt>说明列表</dt>
    <dd>说明列表是完美的定义条款。</dd>
</dl>

自动截断 #

通过text-overflow属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewoirt）内，列表将变成为默认堆叠列表的布局方式。

表格 #

引用 @import "styl/mixins.styl"
引用 @import "styl/table.styl"

简介 #

表格元素使用的很广泛，所以我们为其赋予默认样式，独立出来。

用法 #

任意 <table> 标签添加 .table 类可以为其赋予基本的样式。

带边框的表格 #

添加 .table_bordered 类为表格和其中的每个单元格增加边框。

实例 #

编号	标题一	标题二	标题三
1	内容一	内容二	内容三

<table class="table table_bordered">
    <thead>
        <tr>
            <th>编号</th>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
        </tr>
    </tbody>
</table>

条纹表格 #

添加 .table_striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

实例 #

编号	标题一	标题二	标题三
1	内容一	内容二	内容三

<table class="table table_striped">
    <thead>
        <tr>
            <th>编号</th>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
        </tr>
    </tbody>
</table>

鼠标悬停 #

添加 .table_hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

实例 #

编号	标题一	标题二	标题三
1	内容一	内容二	内容三

<table class="table table_hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
        </tr>
    </tbody>
</table>

紧缩类表格 #

添加 .table_condensed 类可以让表格更加紧凑，单元格中的内补padding均会减半

实例 #

编号	标题一	标题二	标题三
1	内容一	内容二	内容三

<table class="table table_condensed">
    <thead>
        <tr>
            <th>编号</th>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
        </tr>
    </tbody>
</table>

状态类 #

添加下面这些状态类可以为行或单元格设置颜色

• .active 鼠标悬停在行或单元格上时所设置的颜色
• .success 标识成功或积极的动作
• .info 标识普通的提示信息或动作
• .warning 标识警告或需要用户注意
• .danger 标识危险或潜在的带来负面影响的动作

实例 #

编号	标题一	标题二	标题三	标题四
1	内容一	内容二	内容三	内容四
2	成功	成功	成功	成功
3	警告	警告	警告	警告
3	危险	危险	危险	危险
3	信息	信息	信息	信息
...	...	...	...	...

<table class="table ">
    <thead>
        <tr>
            <th>编号</th>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <th>1</th>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
        <tr class="success">
            <th>2</th>
            <td>成功</td>
            <td>成功</td>
            <td>成功</td>
            <td>成功</td>
        </tr>
        <tr class="warning">
            <th>3</th>
            <td>警告</td>
            <td>警告</td>
            <td>警告</td>
            <td>警告</td>
        </tr>
        <tr class="danger">
            <th>3</th>
            <td>危险</td>
            <td>危险</td>
            <td>危险</td>
            <td>危险</td>
        </tr>
        <tr class="info">
            <th>3</th>
            <td>信息</td>
            <td>信息</td>
            <td>信息</td>
            <td>信息</td>
        </tr>
        <tr>
            <td class="active">...</td>
            <td class="success">...</td>
            <td class="warning">...</td>
            <td class="danger">...</td>
            <td class="info">...</td>
        </tr>
    </tbody>
</table>

响应式表格 #

将任何 table 元素包裹在 .table_responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

实例 #

#	标题一	标题二	标题三	标题四	标题五	标题六
1	内容一	内容二	内容三	内容四	内容五	内容六

#	标题一	标题二	标题三	标题四	标题五	标题六
1	内容一	内容二	内容三	内容四	内容五	内容六
2	内容一	内容二	内容三	内容四	内容五	内容六
3	内容一	内容二	内容三	内容四	内容五	内容六

<div class="table_responsive">

    <!-- 无边框的响应式表格 -->

    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
                <th>标题四</th>
                <th>标题五</th>
                <th>标题六</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
                <td>内容四</td>
                <td>内容五</td>
                <td>内容六</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="table_responsive">

    <!-- 有边框的响应式表格 -->

    <table class="table table_bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
                <th>标题四</th>
                <th>标题五</th>
                <th>标题六</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
                <td>内容四</td>
                <td>内容五</td>
                <td>内容六</td>
            </tr>
            <tr>
                <th>2</th>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
                <td>内容四</td>
                <td>内容五</td>
                <td>内容六</td>
            </tr>
            <tr>
                <th>3</th>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
                <td>内容四</td>
                <td>内容五</td>
                <td>内容六</td>
            </tr>
        </tbody>
    </table>
</div>

表单 #

引用 @import "styl/mixins.styl"
引用 @import "styl/index.styl"

基本实例 #

• 控件容器 form_group , 默认设置了向下间距15像素。
• input控件 form_control 类：<input> <textarea> <select> 默认宽度 100% , 将 label 元素和前面提到的控件包裹在 .form_group 中可以获得最好的排列。

<form>
    <div class="form_group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form_control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form_group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form_control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form_group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help_block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Check me out</label>
    </div>
    <button type="submit" class="btn btn_default">Submit</button>
</form>

内联表单 #

为 <form> 元素添加 .form_inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form_inline">
    <div class="form_group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form_control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form_group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form_control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn_default">Send invitation</button>
</form>

<form class="form_inline">
    <div class="form_group">
        <label class="sr_only" for="exampleInputEmail3">Email address</label>
        <input type="email" class="form_control" id="exampleInputEmail3" placeholder="Email">
    </div>
    <div class="form_group">
        <label class="sr_only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form_control" id="exampleInputPassword3" placeholder="Password">
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn_default">Sign in</button>
</form>

<form class="form_inline">
    <div class="form_group">
        <label class="sr_only" for="exampleInputAmount">Amount (in dollars)</label>
        <div class="input_group">
            <div class="input_group_addon">$</div>
            <input type="text" class="form_control" id="exampleInputAmount" placeholder="Amount">
            <div class="input_group_addon">.00</div>
        </div>
    </div>
    <button type="submit" class="btn btn_primary">Transfer cash</button>
</form>

水平排列的表单 #

为表单添加 .form_horizontal 类，并联合使用栅格系统，可以将 label 标签和控件组水平并排布局。这样做将改变 .form_group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form_horizontal border">
    <div class="form_group">
        <label for="inputEmail3" class="col_sm_2 control_label">Email</label>
        <div class="col_sm_10">
            <input type="email" class="form_control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form_group">
        <label for="inputPassword3" class="col_sm_2 control_label">Password</label>
        <div class="col_sm_10">
            <input type="password" class="form_control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form_group">
        <div class="col_sm_offset_2 col_sm_10">
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </div>
    </div>
    <div class="form_group">
        <div class="col_sm_offset_2 col_sm_10">
            <button type="submit" class="btn btn_default">Sign in</button>
        </div>
    </div>
</form>

输入框 #

必须添加类型声明
只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

支持大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text 、password 、datetime 、datetime-local 、date 、month 、time 、week 、number 、email 、url 、search 、tel 和 color 。

<form>
    <input type="text" class="form_control" placeholder="Text input">
</form>

文本域 #

支持多行文本的表单控件。可根据需要改变 rows 属性。

<form>
    <textarea class="form_control" rows="3" placeholder="Textarea"></textarea>
</form>

多选和单选框 #

设置 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio_inline、.checkbox、.checkboxinline 或 <fieldset>。

默认堆叠在一起 #

<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            Option one is this and that—be sure to include why it's great
        </label>
    </div>
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" value="" disabled="">
            Option two is disabled
        </label>
    </div>
    <br>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
            Option one is this and that—be sure to include why it's great
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one
        </label>
    </div>
    <div class="radio disabled">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">
            Option three is disabled
        </label>
    </div>
</form>

内联单选和多选框 #

通过将 .checkbox_inline 或 .radio_inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<form>
    <label class="checkbox_inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox_inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
    <label class="checkbox_inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    </label>
</form>

<form>
    <label class="radio_inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    </label>
    <label class="radio_inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    </label>
    <label class="radio_inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
    </label>
</form>

不带label文本的Checkbox 和 radio #

如果需要 <label> 内没有文字，输入框（input）正是你说期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。

<form>
<div class="checkbox">
    <label>
        <input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="Radio button without label text">
    </label>
</div>
</form>

下拉列表（select） #

注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

<form>
    <select class="form_control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</form>

<!-- 被标记了 multiple 属性的 <select> 控件来说，默认显示多选项 -->
<form>
    <select multiple="" class="form_control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</form>

静态控件 #

如需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form_control_static 类即可。

<form class="form_horizontal">
    <div class="form_group">
        <label class="col_sm_2 control_label">Email</label>
        <div class="col_sm_10">
            <p class="form_control_static">email@example.com</p>
        </div>
    </div>
    <div class="form_group">
        <label for="inputPassword" class="col_sm_2 control_label">Password</label>
        <div class="col_sm_10">
            <input type="password" class="form_control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>

<form class="form_inline">
    <div class="form_group">
        <label class="sr_only">Email</label>
        <p class="form_control_static">email@example.com</p>
    </div>
    <div class="form_group">
        <label for="inputPassword2" class="sr_only">Password</label>
        <input type="password" class="form_control" id="inputPassword2" placeholder="Password">
    </div>
    <button type="submit" class="btn btn_default">Confirm identity</button>
</form>

状态 #

焦点状态 #

将表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

<form>
    <input class="form_control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>

禁用状态 #

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。

<form>
    <input class="form_control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled="">
</form>

被禁用的 fieldset #

为 <fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

<form>
    <fieldset disabled="">
        <div class="form_group">
            <label for="disabledTextInput">Disabled input</label>
            <input type="text" id="disabledTextInput" class="form_control" placeholder="Disabled input">
        </div>
        <div class="form_group">
            <label for="disabledSelect">Disabled select menu</label>
            <select id="disabledSelect" class="form_control">
                <option>Disabled select</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Can't check this
            </label>
        </div>
        <button type="submit" class="btn btn_primary">Submit</button>
    </fieldset>
</form>

只读状态 #

设置输入框为 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

<form>
    <input class="form_control" type="text" placeholder="Readonly input here…" readonly="">
</form>

校验状态 #

表单控件的校验状态 ,error 、warning 和 success 状态。使用时，添加到这些控件的父元素即可。任何包含在此元素之内的 .control_label 、.form_control 和 .help_block 元素都将接受这些校验状态的样式。

1. .has_success
2. .has_warning
3. .has_error

<form>
    <div class="form_group has_success">
        <label class="control_label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form_control" id="inputSuccess1">
    </div>
    <div class="form_group has_warning">
        <label class="control_label" for="inputWarning1">Input with warning</label>
        <input type="text" class="form_control" id="inputWarning1">
    </div>
    <div class="form_group has_error">
        <label class="control_label" for="inputError1">Input with error</label>
        <input type="text" class="form_control" id="inputError1">
    </div>
    <div class="has_success">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxSuccess" value="option1">
                Checkbox with success
            </label>
        </div>
    </div>
    <div class="has_warning">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxWarning" value="option1">
                Checkbox with warning
            </label>
        </div>
    </div>
    <div class="has_error">
        <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxError" value="option1">
            Checkbox with error
            </label>
        </div>
    </div>
</form>

带图标的控件 #

添加额外的图标 #

针对校验状态为输入框添加额外的图标。只需设置相应的 .has_feedback 。

<form>
    <div class="form_group has_success has_feedback">
        <label class="control_label" for="inputSuccess2">Input with success</label>
        <input type="text" class="form_control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
        <span class="icon icon-check form_control_feedback " aria-hidden="true"></span>
        <span id="inputSuccess2Status" class="sr_only">(success)</span>
    </div>
    <div class="form_group has_warning has_feedback">
        <label class="control_label" for="inputWarning2">Input with warning</label>
        <input type="text" class="form_control" id="inputWarning2" aria-describedby="inputWarning2Status">
        <span class="icon icon-warning form_control_feedback" aria-hidden="true"></span>
        <span id="inputWarning2Status" class="sr_only">(warning)</span>
    </div>
    <div class="form_group has_error has_feedback">
        <label class="control_label" for="inputError2">Input with error</label>
        <input type="text" class="form_control" id="inputError2" aria-describedby="inputError2Status">
        <span class="icon icon-times form_control_feedback" aria-hidden="true"></span>
        <span id="inputError2Status" class="sr_only">(error)</span>
    </div>
    <div class="form_group has_success has_feedback">
        <label class="control_label" for="inputGroupSuccess1">Input group with success</label>
        <div class="input_group">
          <span class="input_group_addon">@</span>
          <input type="text" class="form_control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
        </div>
        <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
        <span id="inputGroupSuccess1Status" class="sr_only">(success)</span>
    </div>
</form>

水平排列的表单和内联表单设置可选的图标 #

<form class="form_horizontal">
    <div class="form_group has_success has_feedback">
        <label class="control_label col_sm_3" for="inputSuccess3">Input with success</label>
        <div class="col_sm_9">
            <input type="text" class="form_control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
            <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
            <span id="inputSuccess3Status" class="sr_only">(success)</span>
        </div>
    </div>
    <div class="form_group has_success has_feedback">
        <label class="control_label col_sm_3" for="inputGroupSuccess2">Input group with success</label>
        <div class="col_sm_9">
            <div class="input_group">
                <span class="input_group_addon">@</span>
                <input type="text" class="form_control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
            </div>
            <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
            <span id="inputGroupSuccess2Status" class="sr_only">(success)</span>
        </div>
    </div>
</form>
<form class="form_inline">
    <div class="form_group has_success has_feedback">
        <label class="control_label" for="inputSuccess4">Input with success</label>
        <input type="text" class="form_control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
        <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
        <span id="inputSuccess4Status" class="sr_only">(success)</span>
    </div>
</form>
<form class="form_inline">
    <div class="form_group has_success has_feedback">
        <label class="control_label" for="inputGroupSuccess3">Input group with success</label>
        <div class="input_group">
            <span class="input_group_addon">@</span>
            <input type="text" class="form_control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
        </div>
        <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
        <span id="inputGroupSuccess3Status" class="sr_only">(success)</span>
    </div>
</form>

可选的图标与设置 .sr_only 类的 label #

如果你使用 .sr_only 类来隐藏表单控件的 <label> （而不是使用其它标签选项，如 aria-label 属性）， 一旦它被添加，将会自动调整图标的位置。

<div class="form_group has_success has_feedback">
    <label class="control_label sr_only" for="inputSuccess5">Hidden label</label>
    <input type="text" class="form_control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
    <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
    <span id="inputSuccess5Status" class="sr_only">(success)</span>
</div>
<div class="form_group has_success has_feedback">
    <label class="control_label sr_only" for="inputGroupSuccess4">Input group with success</label>
    <div class="input_group">
        <span class="input_group_addon">@</span>
        <input type="text" class="form_control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
    </div>
    <span class="icon icon-check form_control_feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess4Status" class="sr_only">(success)</span>
</div>

控件尺寸 #

通过 .input_lg 类似的类可以为控件设置高度，通过 .col_lg_*类似的类可以为控件设置宽度。

高度尺寸 #

创建大一些或小一些的表单控件以匹配按钮尺寸。

<form>
    <div class="controls">
        <input class="form_control input_lg" type="text" placeholder=".input_lg">
        <br/>
        <input type="text" class="form_control" placeholder="Default input">
        <br/>
        <input class="form_control input_sm" type="text" placeholder=".input_sm">
        <br/>

        <select class="form_control input_lg">
            <option value="">.input_lg</option>
        </select>
        <br/>
        <select class="form_control">
            <option value="">Default select</option>
        </select>
        <br/>
        <select class="form_control input_sm">
            <option value="">.input_sm</option>
        </select>
    </div>
</form>

水平排列的表单组的尺寸 #

通过添加 .form_group_lg 或 .form_group_sm 类，为 .form_horizontal 包裹的 label 元素和表单控件快速设置尺寸。

<form class="form_horizontal">
    <div class="form_group form_group_lg">
        <label class="col_sm_2 control_label" for="formGroupInputLarge">Large label</label>
        <div class="col_sm_10">
            <input class="form_control" type="text" id="formGroupInputLarge" placeholder="Large input">
        </div>
    </div>
    <div class="form_group form_group_sm">
        <label class="col_sm_2 control_label" for="formGroupInputSmall">Small label</label>
        <div class="col_sm_10">
            <input class="form_control" type="text" id="formGroupInputSmall" placeholder="Small input">
        </div>
    </div>
</form>

调整列尺寸 #

用栅格系统中的列包裹输入框或其任何父元素，都可很容易的为其设置宽度。

<form>
    <div class="row">
        <div class="col_xs_2">
            <input type="text" class="form_control" placeholder=".col_xs_2">
        </div>
        <div class="col_xs_3">
            <input type="text" class="form_control" placeholder=".col_xs_3">
        </div>
        <div class="col_xs_4">
            <input type="text" class="form_control" placeholder=".col_xs_4">
        </div>
    </div>
</form>

辅助文本 #

与表单控件相关联的帮助文本 aria-describedby 属性的表单控件关联，这将确保使用辅助技术- 如屏幕阅读器 - 的用户获取控件焦点或进入控制时显示这个帮助文本。

针对表单控件的“块（block）”级辅助文本。

<form>
    <div class="form_group">
        <label for="inputHelpBlock">Input with help text</label>
        <input type="text" id="inputHelpBlock" class="form_control" aria-describedby="helpBlock">
    </div>
    <span id="helpBlock" class="help_block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>

按钮 #

引用 @import "styl/mixins.styl"
引用 @import "styl/buttons.styl"

全站通用按钮组件，无图片纯 css 实现，IE8 以下无圆角。

Link Button

<a href="#" class="btn btn_default">微笑</a>
<div class="btn btn_default">微笑</div>
<button type="button" class="btn btn_default">（默认样式）Default</button>
<button type="button" class="btn btn_primary">（首选项）Primary</button>
<button type="button" class="btn btn_success">（成功）Success</button>
<button type="button" class="btn btn_info">（一般信息）Info</button>
<button type="button" class="btn btn_warning">（警告）Warning</button>
<button type="button" class="btn btn_danger">（危险）Danger</button>
<button type="button" class="btn btn_link">（链接）Link</button>

预定义样式 #

• 默认样式 btn_default
• 首选项 btn_primary
• 成功 btn_success
• 一般信息 btn_info
• 警告 btn_warning
• 危险 btn_danger
• 链接 btn_link

微笑

微笑

（默认样式）Default （首选项）Primary （成功）Success （一般信息）Info （警告）Warning （危险）Danger （链接）Link

<a href="#" class="btn btn_default">微笑</a>
<div class="btn btn_default">微笑</div>
<button type="button" class="btn btn_default">（默认样式）Default</button>
<button type="button" class="btn btn_primary">（首选项）Primary</button>
<button type="button" class="btn btn_success">（成功）Success</button>
<button type="button" class="btn btn_info">（一般信息）Info</button>
<button type="button" class="btn btn_warning">（警告）Warning</button>
<button type="button" class="btn btn_danger">（危险）Danger</button>
<button type="button" class="btn btn_link">（链接）Link</button>

尺寸 #

• 默认大小为初始大小，这个是我们预设值
• 大：btn_l 比预设值大
• 小：btn_s 比预设值小一点
• 超小：btn_x 再小一点

<a href="#" class="btn btn_default">微笑</a>
<div class="btn btn_default">微笑</div>
<button type="button" class="btn btn_default btn_l">（默认样式）Default</button>
<button type="button" class="btn btn_primary btn_s">（首选项）Primary</button>
<button type="button" class="btn btn_success btn_x">（成功）Success</button>

激活状态 #

• 添加.active 样式，按钮成激活状态

<button type="button" class="btn btn_warning active">（警告）Warning</button>
<button type="button" class="btn btn_danger active">（危险）Danger</button>
<button type="button" class="btn btn_link active">（链接）Link</button>

禁用状态 #

• 按钮禁用 添加 disabled="disabled" 属性
• 其它标签禁用添加 disabled 样式
• fieldset 标签禁用，里面所有的input a等按钮样式不用重复添加禁用样式。

<a href="#" class="btn btn_default disabled">微笑</a>
<div class="btn btn_danger disabled">微笑</div>
<button type="button"  disabled="disabled" class="btn btn_default active">（默认样式）Default</button>
<button type="button"  disabled="disabled" class="btn btn_primary active">（首选项）Primary</button>
<button type="button"  disabled="disabled" class="btn btn_success active">（成功）Success</button>
<button type="button"  disabled="disabled" class="btn btn_info active">（一般信息）Info</button>
<button type="button"  disabled="disabled" class="btn btn_warning active">（警告）Warning</button>

<form>
    <fieldset disabled="disabled">
        <legend>health information</legend>
        height: <input type="text" class="btn btn_danger  active" value="golang"/>
        weight: <input type="text" />
    </fieldset>
</form>

图片 #

响应式图片 #

• .img_responsive 图片支持响应式布局。

<img src="..." class="img_responsive" alt="响应式图片">

图片形状 #

• .img_rounded 图片圆角
• .img_circle 图片圆形
• .img_thumbnail 图片圆角带边框

<img src="..." alt="..." class="img_rounded">
<img src="..." alt="..." class="img_circle">
<img src="..." alt="..." class="img_thumbnail">

颜色 #

文本颜色 #

通过颜色来展示意图， RUI提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

<p class="muted">默认默认</p>
<p class="text_primary">首选项（primary）</p>
<p class="text_warning">警告（warning）警告（warning）</p>
<p class="text_danger">报错（error）报错（error）</p>
<p class="text_info">一般信息（info）一般信息（info）</p>
<p class="text_success">成功（success）成功（success）</p>

背景色 #

和文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。

<p class="bg_primary">首选项（primary）</p>
<p class="bg_warning">警告（warning）警告（warning）</p>
<p class="bg_danger">报错（error）报错（error）</p>
<p class="bg_info">一般信息（info）一般信息（info）</p>
<p class="bg_success">成功（success）成功（success）</p>

CSS3 Animate #

分类	各种动画
Attention Seekers	bounce / flash / pulse / rubberBand / shake / swing / tada / wobble / jello
Bouncing Entrances	bounceIn / bounceInDown / bounceInLeft / bounceInRight / bounceInUp
Bouncing Exits	bounceOut / bounceOutDown / bounceOutLeft / bounceOutRight / bounceOutUp
Fading Entrances	fadeIn / fadeInDown / fadeInDownBig / fadeInLeft / fadeInLeftBig / fadeInRight / fadeInRightBig / fadeInUp / fadeInUpBig
Fading Exits	fadeOut / fadeOutDown / fadeOutDownBig / fadeOutLeft / fadeOutLeftBig / fadeOutRight / fadeOutRightBig / fadeOutUp / fadeOutUpBig
Flippers	flip / flipInX / flipInY / flipOutX / flipOutY
Lightspeed	lightSpeedIn / lightSpeedOut
Rotating Entrances	rotateIn / rotateInDownLeft / rotateInDownRight / rotateInUpLeft / rotateInUpRight
Rotating Exits	rotateOut / rotateOutDownLeft / rotateOutDownRight / rotateOutUpLeft / rotateOutUpRight
Sliding Entrances	slideInDown / slideInLeft / slideInRight / slideInUp
Sliding Exits	slideOutDown / slideOutLeft / slideOutRight / slideOutUp
Specials	hinge / rollIn / rollOut
Zoom Entrances	zoomIn / zoomInDown / zoomInLeft / zoomInRight / zoomInUp
Zoom Exits	zoomOut / zoomOutDown / zoomOutLeft / zoomOutRight / zoomOutUp

js 添加一个动画效果 #

依赖jQuery方法

$('#yourElement').addClass('animated bounceOutLeft');

检测动画结束 #

多数情况使用one

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    //doSomething
});

更改动画持续时间 #

.bounceIn {
    //定义动画完成一个周期所需要的时间
    -vendor-animation-duration: 3s;   
    //属性定义动画何时开始。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画
    -vendor-animation-delay: 2s;
    //播放动画次数 infinite(无限循环)
    -vendor-animation-iteration-count: infinite; 
}

实用工具 #

这些工具是在你写CSS的时候使用的，方便你快速写css，请使用 stylus 写CSS

三角符号 #

<span class="caret"></span>

浮动 #

引用 @import "styl/utilities.styl"

• 左浮动.left ，使用了!important 被用来明确 CSS 样式的优先级。
• 右浮动.right ，也使用了!important
• 清除浮动.clearfix ，前面的兄弟节点都浮动了，最后一个节点需要清除浮动。

<div class="container">
    <div class="left">左浮动</div>
    <div class="right">右浮动</div>
    <div class="clearfix"></div>
</div>

left和right浮动不能用于导航条中

引用 @import "styl/mixins.styl"
在 stylus 中使用清除浮动clearfix()。

显示隐藏 #

• hidden: 隐藏
• show : 显示
• invisible 隐藏内容，还是会占位

<div class="container">
    <div class="hidden">隐藏内容</div>
    <div class="show">显示内容</div>
    <div class="invisible">隐藏内容，还是会占位</div>
</div>

高清图片处理 #

引用 @import "styl/mixins.styl"
语法 img-retina($file_1x, $file_2x, $width_1x, $height_1x)

• img-retina 视网膜屏幕（Retina）下的图片，写CSS内部调用，通过指定两个图片路径和 @1x 和@2x图片尺寸。

.baidu
    img-retina("/img/bg@1x.png", "/img/bg@2x.png", 100px, 100px);

下面生成结果:

.baidu{
  background-image:url("{$file_1x}");
}
@media only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi),
only screen and (min-resolution:2dppx){
    .baidu{
        background-image:url("{$file_2x}");
        -webkit-background-size:100px 100px;
        -moz-background-size:100px 100px;
        background-size:100px 100px
    }
}