时间轴组件显示一个事件历史记录。你可以使用它来描述发生在特定时间段内的事件。
<!-- Main node for this component -->
<div class="timeline">
<!-- Timeline time label -->
<div class="time-label">
<span class="bg-green">23 Aug. 2019</span>
</div>
<div>
<!-- Before each timeline item corresponds to one icon on the left scale -->
<i class="fas fa-envelope bg-blue"></i>
<!-- Timeline item -->
<div class="timeline-item">
<!-- Time -->
<span class="time"><i class="fas fa-clock"></i> 12:05</span>
<!-- Header. Optional -->
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
<!-- Body -->
<div class="timeline-body">
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
weebly ning heekya handango imeem plugg dopplr jibjab, movity
jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
quora plaxo ideeli hulu weebly balihoo...
</div>
<!-- Placement of additional controls. Optional -->
<div class="timeline-footer">
<a class="btn btn-primary btn-sm">Read more</a>
<a class="btn btn-danger btn-sm">Delete</a>
</div>
</div>
</div>
<!-- The last icon means the story is complete -->
<div>
<i class="fas fa-clock bg-gray"></i>
</div>
</div>
有一个额外的样式类。它加深元素颜色,在一般背景下突出显示它。你可以通过向 .timeline
中添加 .timeline-inverse
来使用它。
<div class="timeline timeline-inverse">
<!-- ... Item ... -->
</div>