Как создать пользовательский интерфейс с вертикальной панелью временной шкалы, где на рабочем столе он отображается как шкала временной шкалы в середине и окна событий с обеих сторон. На маленьком мобильном экране справа находится шкала времени и все окна событий справа.
Использование JQuery в сочетании с отзывчивыми классами в порядке, просто нужно показать все окна событий, поэтому скрывать альтернативные поля с помощью xs-hidden не будет.
JS Fiddle: http://jsfiddle.net/n82ek/2/
Уменьшить размер окна результатов, чтобы увидеть отзывчивое поведение.
Что должно произойти? Переместите панель влево для отображения xs Приятно иметь: Также добавьте timelineDot на линии рядом с коробкой.
Пожалуйста, обратитесь к образцу временного графика 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, 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;
}
