页面的head部分，需引入bootstrap和style样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/lib/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/less/style.css"/>

页面的body部分，一个div容器里放入了多个ul无序列表，用来显示不同的分步样式效果，代码如下：

<div class="container">
	<ul class="nav nav-pills nav-justified step step-arrow">
		<li>
			<a>步骤 1</a>
		</li>
		<li>
			<a>步骤 2</a>
		</li>
		<li>
			<a>步骤 3</a>
		</li>
		<li>
			<a>步骤 4</a>
		</li>
		<li>
			<a>步骤 5</a>
		</li>
	</ul>
	<ul class="nav nav-pills nav-justified step step-square" data-step="2">
		<li>
			<a>步骤 1</a>
		</li>
		<li>
			<a>步骤 2</a>
		</li>
		<li>
			<a>步骤 3</a>
		</li>
		<li>
			<a>步骤 4</a>
		</li>
		<li>
			<a>步骤 5</a>
		</li>
	</ul>
	<ul class="nav nav-pills nav-justified step step-round" data-step="3">
		<li>
			<a>步骤 1</a>
		</li>
		<li>
			<a>步骤 2</a>
		</li>
		<li>
			<a>步骤 3</a>
		</li>
		<li>
			<a>步骤 4</a>
		</li>
		<li>
			<a>步骤 5</a>
		</li>
	</ul>
	<ul class="nav nav-pills nav-justified step step-progress" data-step="4">
		<li>
			<a>步骤 1<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 2<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 3<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 4<span class="caret"></span></a>
		</li>
		<li>
			<a>步骤 5<span class="caret"></span></a>
		</li>
	</ul>
</div>

页面的底部，需引入jQuery库和必要的JS文件，并启用步骤插件，代码如下：

<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/lib.js"></script>
<script type="text/javascript">
$(function() {
	bsStep();
	//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)
})
</script>