bootstrap时间插件-bootstrap timeline

解决方案

在Web开发中，展示时间线（timeline）是一种有效的方式来呈现一系列事件的发生顺序。Bootstrap本身并没有直接提供时间线组件，但我们可以结合Bootstrap的样式和其他JavaScript库来创建一个美观且功能丰富的bootstrap timeline。通过这种方式，我们可以快速构建响应式的时间线布局，并根据需要添加交互功能。

使用原生Bootstrap实现简单时间线

我们可以通过纯Bootstrap类来创建一个基本的时间线。以下是一个简单的例子：

html</p>

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul class="timeline">
        <li>
          <div class="timeline-badge primary"><i class="glyphicon glyphicon-check"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">事件标题1</h4>
            </div>
            <div class="timeline-body">
              <p>事件描述1...</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge success"><i class="glyphicon glyphicon-credit-card"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">事件标题2</h4>
            </div>
            <div class="timeline-body">
              <p>事件描述2...</p>
            </div>
          </div>
        </li>
        <!-- 更多项... -->
      </ul>
    </div>
  </div>
</div>


.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li .timeline-panel {
  width: 46%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.timeline > li .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}


<p>

这段代码创建了一个基础的时间线，其中包含两个事件项，分别位于时间线的左右两侧。每个事件项都有一个图标、标题和描述文本。

使用第三方插件增强功能

如果需要更复杂的功能，比如点击展开更多详情、拖拽排序等，可以考虑使用专门的时间线插件，如vis.js或timeline.js。这些插件提供了更多的配置选项和交互功能。

例如，使用vis.js可以创建一个动态可交互的时间线：

html
</p>



  <title>Vis.js Timeline Example</title>
  
  


  <div id="timeline"></div>

  
    // 创建数据集
    var items = new vis.DataSet([
      {id: 1, content: '事件1', start: '2023-04-20'},
      {id: 2, content: '事件2', start: '2023-04-25'},
      {id: 3, content: '事件3', start: '2023-04-30'}
    ]);

    // 创建容器
    var container = document.getElementById('timeline');

    // 初始化时间线
    var options = {};
    var timeline = new vis.Timeline(container, items, options);
  



<p>

这段代码使用了vis.js库来创建一个交互式时间线，用户可以轻松地查看不同时间点发生的事件。

通过上述两种方法，我们可以根据实际需求选择合适的方式实现时间线功能。对于简单的展示型应用，使用纯Bootstrap样式就足够；而对于需要更多交互功能的应用，则可以考虑引入第三方插件。无论哪种方式，都可以确保时间线组件既美观又实用，满足不同的业务场景需求。