Bootstrap Step插件

Bootstrap Step插件

<ul class="nav nav-pills nav-justified step step-arrow">
<li class="disabled">
<a>基本信息</a>
</li>
<li class="active">
<a>上传BP</a>
</li>
<li class="disabled">
<a>行业竟品</a>
</li>
</ul>

新建step.css文件

/* 作者：lopo1983@foxmail
网站：www.bsfans
QQ：64832897
基友群：15832082
时间：2016-12-16
描述：
1. css.less 主色调 蓝色修改@ces /背景色 修改@cc2
2. 更新为less 书写的css 方便定制
3. 请便以为css后上线
/*step*/
.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20