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

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

代码语言：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:inli.........完整代码请登录后点击上方下载按钮下载查看