bootstrap响应式自适应垂直时间轴时间线效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：bootstrap响应式自适应垂直时间轴时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
.timeline {
	list-style:none;
	padding:20px 0 20px;
	position:relative;
}
.timeline:before {
	top:0;
	bottom:0;
	position:absolute;
	content:" ";
	width:10px;
	background-color:#eaeaea;
	left:50%;
	margin-left:-5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: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:44%;
	float:left;
	margin-left:0px !important;
	border:1px solid #eaeaea;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
	padding:20px;
	position:relative;
	-webkit-box-shadow:0 1px 6px rgba(150,150,150,0.175);
	-moz-box-shadow:0 1px 6px rgba(150,150,150,0.175);
	box-shadow:0 1px 6px rgba(150,150,150,0.175);
	margin-left:-15px;
	z-index:11;
}
.timeline >li >.timeline-panel:before {
	position:absolute;
	top:36px;
	right:-15px;
	display:inline-block;
	border-top:15px solid transparent;
	border-left:15px solid #eaeaea;
	border-right:0 solid #eaeaea;
	border-bottom:15px solid transparent;
	content:" ";
}
.timeline >li >.timeline-panel:after {
	position:absolute;
	top:37px;
	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:70px;
	height:70px;
	line-height:65px;
	font-size:30px;
	text-align:center;
	position:absolute;
	top:20px;
	left:50%;
	margin-left:-35px;
	background-color:#673AB7;
	z-index:10;
	-webkit-border-top-right-radius:50%;
	-moz-border-radius-topright:50%;
	border-top-right-radius:50%;
	-webkit-border-top-left-radius:50%;
	-moz-border-radius-topleft:50%;
	border-top-left-radius:50%;
	-webkit-border-bottom-right-radius:50%;
	-moz-border-radius-bottomright:50%;
	border-bottom-right-radius:50%;
	-webkit-border-bottom-left-radius:50%;
	-moz-border-radius-bottomleft:50%;
	border-bottom-left-radius:50%;
	border:5px solid #eaeaea;
}
.timeline >li >.timeline-badge i {
	font-size:28px;
}
.timeline >li.timeline-inverted >.timeline-panel {
	float:right;
	width:44%;
}
.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:#4d9cf8 !important;
}
.timeline-badge.success {
	background-color:#4CAF50 !important;
}
.timeline-badge.warning {
	background-color:#FFC107 !important;
}
.timeline-badge.danger {
	background-color:#f44336 !important;
}
.timeline-badge.info {
	background-color:#03A9F4 !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:992px) {
	ul.timeline:before {
	left:40px;
}
ul.timeline >li >.timeline-panel {
	width:calc(100% - 100px) !important;
	width:-moz-calc(100% - 100px) !important;
	width:-webkit-calc(100% - 100px) !important;
}
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>
</head>

<body>
    <div class="col-xs-8">
        <ul class="timeline">
            <li>
                <div class="timeline-badge animated flipInY"><i class="glyphicon glyphicon-check"></i></div>
                <div class="timeline-panel animated flipInY">
                    <div class="timeline-heading">
                        <h4 class="timeline-title">Graphic Design</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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque voluptatem dolorum numquam enim hic aliquam at consequuntur repellendus corporis a doloribus optio exercitationem, iste eaque aliquid explicabo animi non repudiandae.</p>
                    </div>
                </div>
            </li>
            <li class=".........完整代码请登录后点击上方下载按钮下载查看