时间线Timeline

<ul class="timeline">
    <li>
        <i data-mark></i>
        <p>Content A</p>
    </li>
    <li>
        <i data-mark></i>
        <p>Content B</p>
    </li>
    <li>
        <i data-mark></i>
        <p>Content C</p>
    </li>
</ul> 

右侧Right

添加class="right"转换为右侧时间线

<ul class="timeline right">
    ...
</ul> 

激活与自定义Active and Custom

内容块中的<i data-mark>元素是其圆点标记，可以使用其属性设定文本和自定义背景颜色，添加class="active"转换为激活项

<ul class="timeline">
    <li>
        <i data-mark="2019-01-01 14:22:11" class="bg-blue active"></i>
        <p>Content A</p>
    </li>
    <li>
        <i data-mark="2019-01-01 14:22:11" class="bg-green"></i>
        <p>Content B</p>
    </li>
    <li>
        <i data-mark></i>
        <p>Content C</p>
    </li>
</ul> 

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<ul class="timeline mystyle">
    ...
</ul>