专为 Rails 设计的前端模块化框架

字体

字体类型

"Helvetica Neue", "PingFang SC", "Microsoft Yahei", 微软雅黑, STXihei, 华文细黑, sans-serif

字体大小

  • 大号字体
  • 普通字体
  • 小号字体
  • 加小号字体

颜色

  • $ui-color #55bb33
  • $white-color #ffffff
  • $grey-color #4a4a4a
  • $black-color #000000
  • $red-color #ff7755
  • $orange-color #ffaa00
  • $green-color #55bb33
  • $blue-color #22bbff
  • $grey-blue-color #7AA4D4
  • $light-grey-color #666666
  • $lighter-grey-color #9b9b9b
  • $lightest-grey-color #cccccc
  • $grey-bg-color #f6f6f6
  • $green-bg-color #f5fdf3
  • $blue-bg-color #f5f9ff
  • $orange-bg-color #fffcf7
  • $red-bg-color #ffeee6
  • $border-color/$line-color #dfdfdf
  • $light-border-color/$light-line-color #eeeeee
  • $lighter-border-color/$lighter-line-color #f3f3f3

标题

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

一号标题

二号标题

三号标题

四号标题

五号标题
六号标题

链接

<%= link_to "普通链接", '#' %>、
<%= link_to '警告链接', '#', class: 'warn' %>、
<%= link_to '禁用状态', '#', class: 'disabled' %>

列表

<ul>
  <li>
    列表项 1
    <ol>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ol>
  </li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>
  • 列表项 1
    1. 列表项 1
    2. 列表项 2
    3. 列表项 3
  • 列表项 2
  • 列表项 3

代码

行内代码: <code>test()</code>、键盘按键: <kbd><kbd>Cmd</kbd> + <kbd>C</kbd></kbd>
行内代码: test()、键盘按键: Cmd + C
<pre><code class="coffee"><%= %Q(\
class TodoItem extends TaoComponent

@tag 'tao-todo-item'

@attribute 'completed', type: 'boolean', default: false

TaoComponent.register TodoItem
) %></code></pre>
class TodoItem extends TaoComponent

  @tag 'tao-todo-item'

  @attribute 'completed', type: 'boolean', default: false

TaoComponent.register TodoItem

引用

<blockquote>
  <p>知人,智能人力资源管理专家</p>
</blockquote>

知人,智能人力资源管理专家

Tabs

<div class="tabs">
  <%= link_to "新增加", '#', class: 'tab active' %>
  <%= link_to "已推荐", '#', class: 'tab' %>
  <%= link_to "面试", '#', class: 'tab' %>
  <%= link_to "录用", '#', class: 'tab' %>
  <%= link_to "归档", '#', class: 'tab' %>
</div>
<br>
<div class="vertical-tabs">
  <%= link_to "新增加", '#', class: 'tab active' %>
  <%= link_to "已推荐", '#', class: 'tab' %>
  <%= link_to "面试", '#', class: 'tab' %>
  <%= link_to "录用", '#', class: 'tab' %>
  <%= link_to "归档", '#', class: 'tab' %>
</div>