带有 Bootstrap3 的响应式时间线 UI [英] Responsive timeline UI with Bootstrap3

问题描述

如何创建一个带有垂直时间线栏的 UI，在桌面上它在中间显示为时间线栏，在两侧显示为事件框.在较小的移动屏幕上，左侧的时间轴栏和右侧的所有事件框.

将 JQuery 与响应式类结合使用是可以的，只需要显示所有事件框，所以用 xs-hidden 隐藏替代框是行不通的.

JS 小提琴: <小时>

这是我为您截取的两张屏幕截图...宽而细:

How can I create a UI with a vertical timeline bar where on desktop it shows as timeline-bar in middle and event boxes on both sides. On smaller mobile screen, the timeline-bar on the left and all event boxes on the right.

Using JQuery in combination with responsive classes is okay, just need to show all event boxes, so hiding alternate boxes with xs-hidden won't do.

JS Fiddle: http://jsfiddle.net/n82ek/2/

Reduce expand size of result window to see responsive behavior.

What needs to happen? Move the bar left for xs display Nice to have: Also add the timelineDot on line alongside the box.

Please Refer to a sample timeline ui pattern image attached.... and Thank you!

Current HTML:

<div class="container">
    <div class="timelineBar"></div>
    <div class="timelineDot"></div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
</div>

Current CSS:

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
    width: 2px;
    background-color: #BDBDBD;
    display: inline-block;
    position: absolute;
    height: 100%;
    left: 50%;
    margin-left: 10px;
    margin-right: 10px;
}
.shadowBox {
    box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    border:2px solid white;
    border-radius: 10px;
    margin: 10px;
    background-color: #FFFFFF;
}
.timelineDot{
    width: 10px;
    height: 10px;
    background-color: #BDBDBD;
    opacity: 1;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: 6px;
    border-radius: 10px;
}

解决方案

"Timeline (responsive)" snippet:

This looks very, very close to what your example shows. The bootstrap snippet linked below covers all the bases you are looking for. I've been considering it myself, with the same requirements you have ( especially responsiveness ). This morphs well between screen sizes and devices.

You can fork this and use it as a great starting point for your specific expectations:

• http://bootsnipp.com/snippets/featured/timeline-responsive

---

Here are two screenshots I took for you... wide and thin:

这篇关于带有 Bootstrap3 的响应式时间线 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！