时间轴

时间轴以时间为节点，显示时间点的描述内容。

基本样式

框架定义的时间轴基于ul列表结构，用.timeline定义，其基本样式为。

07:00
起床
09:00
上班
18:00
下班
22:00
睡觉

    <ul class="timeline">
      <li class="active">
        <time class="timeline-title">07:00</time>
        <div class="timeline-body">起床</div>
      </li>
      <li class="active">
        <time class="timeline-title">09:00</time>
        <div class="timeline-body">上班</div>
      </li>
      <li>
        <time class="timeline-title">18:00</time>
        <div class="timeline-body">下班</div>
      </li>
      <li>
        <time class="timeline-title">22:00</time>
        <div class="timeline-body">睡觉</div>
      </li>
    </ul>

激活的时间点，在li元素上添加active样式。

提示工具样式

时间点及内容，也可以用提示工具样式。

07:00

起床
09:00
上班
18:00

下班
22:00
睡觉

    <ul class="timeline">
      <li class="active">
        <div class="tips tips-right">07:00</div>
        <div class="timeline-body">起床</div>
      </li>
      <li class="active">
        <div class="popove popove-right popove-title">
          <strong class="popove-title">09:00</strong>
          <div class="popove-body">上班</div>
        </div>
      </li>
      <li class="active">
        <div class="tips tips-right">18:00</div>
        <div class="timeline-body">下班</div>
      </li>
      <li>
        <div class="popove popove-right popove-title">
          <strong class="popove-title">22:00</strong>
          <div class="popove-body">睡觉</div>
        </div>
      </li>
    </ul>

侧边显示

在时间轴上叠加.timeline-aside样式，可将时间显示在侧边；如果时间用.tips样式，则需要放在.timeline-title样式元素下面。

07:00
起床
09:00

上班
18:00

下班
22:00

睡觉
那是不可能的，还得加班。

    <ul class="timeline timeline-aside">
      <li class="active">
        <time class="timeline-title">07:00</time>
        <div class="timeline-body">起床</div>
      </li>
      <li class="active">
        <div class="timeline-title">
          <div class="tips tips-left">09:00</div>
        </div>
        <div class="popove popove-right">
          <div class="popove-body">上班</div>
        </div>
      </li>
      <li>
        <time class="timeline-title">18:00</time>
        <div class="popove popove-right">
          <div class="popove-body">下班</div>
        </div>
      </li>
      <li>
        <div class="timeline-title">
          <div class="tips tips-left">22:00</div>
        </div>
        <div class="popove popove-right popove-title">
          <strong class="popove-title">睡觉</strong>
          <div class="popove-body">那是不可能的，还得加班。</div>
        </div>
      </li>
    </ul>

居中显示

在时间轴上叠加.timeline-center样式，可将时间轴显示在中间。

07:00
起床
09:00

上班
18:00

下班
22:00
睡觉

    <ul class="timeline timeline-center">
      <li class="active">
        <time class="timeline-title">07:00</time>
        <div class="timeline-body border radius padding">起床</div>
      </li>
      <li class="active">
        <div class="tips tips-left">09:00</div>
        <div class="timeline-body">上班</div>
      </li>
      <li class="active">
        <div class="tips tips-right">18:00</div>
        <div class="timeline-body">下班</div>
      </li>
      <li>
        <div class="popove popove-left popove-title">
          <strong class="popove-title">22:00</strong>
          <div class="popove-body">睡觉</div>
        </div>
      </li>
    </ul>

时间侧边显示

07:00
起床
09:00

上班
18:00

下班
22:00
睡觉
那是不可能的，还得加班。

    <ul class="timeline timeline-center timeline-aside">
      <li class="active">
        <time class="timeline-title">07:00</time>
        <div class="timeline-body">起床</div>
      </li>
      <li class="active">
        <div class="timeline-title">
          <div class="tips tips-right">09:00</div>
        </div>
        <div class="popove popove-left">
          <div class="popove-body">上班</div>
        </div>
      </li>
      <li>
        <div class="timeline-title">
          <div class="tips tips-left">18:00</div>
        </div>
        <div class="popove popove-right">
          <div class="popove-body">下班</div>
        </div>
      </li>
      <li>
        <time class="timeline-title">22:00</time>
        <div class="popove popove-left popove-title">
          <strong class="popove-title">睡觉</strong>
          <div class="popove-body">那是不可能的，还得加班。</div>
        </div>
      </li>
    </ul>