使用Bootstrap3的响应时间线用户界面
我怎样才能创build一个垂直的时间线栏，在桌面上显示为中间的时间线栏和两侧的事件框的用户界面。 在较小的手机屏幕上，左侧的时间轴和右侧的所有事件框。
结合使用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('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; }
“时间轴（响应）”片段：
这看起来非常非常接近你的例子显示。 下面链接的引导程序片段涵盖了您正在寻找的所有基础。 我一直在考虑自己，与你有相同的要求（特别是响应）。 这在屏幕尺寸和设备之间变化良好。
你可以把它作为一个很好的起点来满足你的特定期望：
以下是我为你拍摄的两张截图：宽而薄：
BootFlat
您也可以尝试BootFlat ，在其文档中有专门用于制作时间轴的部分：
.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: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: 2px; padding: 20px; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .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%; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; }
<div class="container"> <div class="page-header"> <h1 id="timeline">Timeline</h1> </div> <ul class="timeline"> <li> <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div> <div class="timeline-panel"> <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> <p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p> </div> </div> </li> <li> <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li> <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> <hr> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </li> <li> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> </ul> </div>
