如何创建一个具有垂直时间轴栏的UI,在桌面上它显示为中间的时间轴栏和两侧的事件框。在较小的移动屏幕上,左侧的时间轴栏和右侧的所有事件框。
使用JQuery结合响应类是好的,只需要显示所有的事件框,所以隐藏备用框与xs-hidden将不会。
JS小提琴:http://jsfiddle.net/n82ek/2/
缩小结果窗口的大小以查看响应行为。
需要做什么?移动左侧的栏以显示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
这里是我为你采取的两个截图…宽和薄:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。