安信娱乐谁是老板

拼图开发文档

时间轴

安信娱乐谁是老板时间轴以时间为节点,显示时间点的描述内容。

基本样式

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

  • 起床
  • 上班
  • 下班
  • 睡觉
    <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样式元素下面。

  • 起床
  • 09: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样式,可将时间轴显示在中间。

  • 起床
  • 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>
  

时间侧边显示

  • 起床
  • 09:00
    上班
  • 18: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>