      组件
      这是一篇简约介绍文档，并未包含组合变化。更丰富的表现可以参见 demo 。请注意每个组件所使用的简约标记结构以及class名称。
      本页使用了 body.flat 取消了所有的圆角。可以使用 mainNav 上的按钮进行切换。

导航

堆叠导航

<nav>
  <dl>
    <dt><a href="#nav">导航</a></dt>
    <dt><a href="#buttons">按钮</a></dt>
    <dt><a href="#breadcrumb">面包屑</a></dt>
    <dt><a href="#pagination">分页条</a></dt>
  </dl>
</nav>

bar 导航

<nav>
  <dl class="bar">
    <dt><a href="#nav">导航</a></dt>
    <dt class="active"><a href="#buttons">按钮</a></dt>
    <dt><a href="#breadcrumb">面包屑</a></dt>
    <dt><a href="#pagination">分页条</a></dt>
  </dl>
</nav>

Tabs

基本样式, 配套代码由应用实现

<nav class="shadow">
  <span class="active"><a href="#nav">导航</a></span>
  <span><a href="#buttons">按钮</a></span>
  <span><a href="#breadcrumb">面包屑</a></span>
  <span><a href="#pagination">分页条</a></span>
  <span><a href="#form">表单</a></span>
  <div>
    <div>tabs body 1</div>
    <div>tabs body 2</div>
    <div>tabs body 3</div>
    <div>tabs body 4</div>
    <div>tabs body 5</div>
  </div>
</nav>

按钮

简单

B标签

success info

<button>接受</button> <button>拒绝</button> <b class ="button">B标签</b><br><br>
<button class="primary">primary</button>
<button class="warning">warning</button>
<b class ="button success">success</b>
<b class ="button info">info</b>
<button class="error">error</button>
<button class="disabled">disabled</button>>

Split button

<button class="split">button.split</button><i></i>

面包屑

<div class="breadcrumb">
  <b><a href="#">首页</a></b>
  <b><a href="#">上级</a></b>
  <b>当前</b>
</div>

分页条

上页12 3 下页

<div class="pagination">
  <b>上页</b>
  <b>1</b>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">下页</a>
</div>

Blockboard

header 是标题,可以省略

主体

主体

<div class="blockboard">
  <header> 是标题,可以省略</header>
  <div>主体</div>
  <p>主体</p>
  <footer> 是注脚,可以省略</footer>
</div>

表单

注意不能有多余的空白

<form action="">
  <input type="text" placeholder="placeholder"><br>
  <label>
    <span class="addon">label span.addon</span><input type="text" placeholder="placeholder">
  </label>
  <label class="addon">label.addon</label><input type="text"><br>
  <label class="addon">datetime</label><input type="datetime"><br>
  <label class="addon">email</label><input type="email"><br>
  <label class="addon">url</label><input type="url"><br>
  <label class="addon">password</label><input type="password"><br>
  <label class="addon">tel</label><input type="tel"><br>
  <label>range <input type="range"></label><br>
  <label class="addon">number</label><input type="number"><br>
  <label class="addon">datetime-local</label><input type="datetime-local"><br>
  <label class="addon">date</label><input type="date"><br>
  <label class="addon">month</label><input type="month"><br>
  <label class="addon">time</label><input type="time"><br>
  <label class="addon">search</label><input type="search"><br>
  <button type="submit">Submit</button> <input type="submit">
  <button type="submit">Submit</button> <input type="submit">
</form>