Bootstrap Panel Timeline / Элементы / Сниппеты Bootstrap

Каталог: Сниппеты Bootstrap

Категория: Элементы

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2008

Количество символов:

Посмотрели: 4990 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.8 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, сниппет, Bootstrap, Timeline, element, Responsive, html, элемент, адаптивные

Поделился: BootstrapТема

Добавлено: 2017-04-28 в 19:24

Метка: 1493396657

⇄ ⇅

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Panel Timeline Bootstrap</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style>
/* demo background */
body{background: #fff}

/* style timeline */
.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;
 }

@media (max-width: 767px) {
 ul.timeline:before {
 left: 40px;
 }

ul.timeline > li > .timeline-panel {
 width: calc(100% - 90px);
 width: -moz-calc(100% - 90px);
 width: -webkit-calc(100% - 90px);
 }

ul.timeline > li > .timeline-badge {
 left: 15px;
 margin-left: 0;
 top: 16px;
 }

ul.timeline > li > .timeline-panel {
 float: right;
 }

ul.timeline > li > .timeline-panel:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }

ul.timeline > li > .timeline-panel:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }
}
</style>
<body>
<div class="container">
<div class="row">

<ul class="timeline">
 <li>
 <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Bootstrap Panel Timeline</h4>
 <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 15:58 28.04.2017</small></p>
 </div>
 <div class="timeline-body">
 <p>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">Bootstrap Glyphicon Icons</h4>
 </div>
 <div class="timeline-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</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">Line left and Right</h4>
 </div>
 <div class="timeline-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
 </div>
 </div>
 </li>
 <li class="timeline-inverted">
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Lorem ipsum dolor sit amet</h4>
 </div>
 <div class="timeline-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</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">Lorem ipsum dolor sit amet</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 1</a></li>
 <li><a href="#">Action 2</a></li>
 <li><a href="#">Action 3</a></li>
 <li class="divider"></li>
 <li><a href="#">Action 4</a></li>
 </ul>
 </div>
 </div>
 </div>
 </li>
 <li>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Lorem ipsum dolor sit amet</h4>
 </div>
 <div class="timeline-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</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">Lorem ipsum dolor sit amet</h4>
 </div>
 <div class="timeline-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
 </div>
 </div>
 </li>
</ul>

</div>
</div>
</body>
</html>

BootstrapTema

Bootstrap Panel Timeline

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0