响应式设计 – 响应时间线UI与Bootstrap3

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

使用JQuery结合响应类是好的，只需要显示所有的事件框，所以隐藏备用框与xs-hidden将不会。

缩小结果窗口的大小以查看响应行为。

需要做什么？移动左侧的栏以显示xs
很好有：也添加时间线在框旁边排队。

请参考示例时间轴ui模式图像附加….和谢谢！

当前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>

当前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.796875) 0px 0px 2px;
    -webkit-Box-shadow: rgba(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;
}

解决方法

“时间轴(响应)”代码段：

这看起来非常，非常接近你的例子显示。下面链接的引导程序片段涵盖了您正在寻找的所有基础。我一直在考虑自己，与你有同样的要求(特别是响应)。这种变形在屏幕尺寸和设备之间。

你可以分叉并使用它作为您的具体期望的一个伟大的起点：

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

这里是我为你采取的两个截图…宽和薄：

响应式设计 – 响应时间线UI与Bootstrap3

解决方法

猜你在找的Bootstrap相关文章