1.demo直接貼上來了，有什么不懂的，直接去官網上看,地址：http://bootstraptour.com/。
2.這個bootstrap-tour插件的版本是v0.12.0，復制下來代碼，引入庫應該直接可以運行。
3.點評一下：
a.插件會自己在localStorage里記錄引導的信息，一般需求下，不用手動寫這方面代碼了
b.在每個step里提供onNext鈎子，這個還是很方便的
c.可以像demo里這樣動態產生一個節點(my-other-element)，提前在它上面定義step也是可以找到的
d.backdrop的時候，點下一步會閃，這個沒找到在那設置，也不知道能不能設置，個人感覺不好看
e.這個插件沒有提供hints的支持
f.element為id的時候沒啥說的，為class的時候，會每個匹配上的class都出現引導
<html>
<head>
<link href="bootstrap-tour-standalone.min.css" rel="stylesheet"></link>
<script src="jquery-2.1.4.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>
<script>
$(function(){
$("#subm").on('click',function(){
var txt = $("#my-element").val();
$("#xiaol").html("<div id='my-other-element'>"+txt+"</div>");
})
tour = new Tour({
steps: [
{
element: "#div1",
title: "Title of my step",
content: "Content of my step",
placement:"auto",
backdrop:true,
onNext: function(tour){
var txt = $("#my-element").val();
if(!txt){
$("#my-element").val("xiaol")
}
$("#subm").click();
}
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step1111",
backdrop:true,
backdropContainer:"#my-other-element",
placement:"auto"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
})
</script>
</head>
<body>
<div id="div1">
<input id="my-element"></input>
<button id="subm">submit</button>
</div>
<div id="xiaol"></div>
<button onclick="tour.restart()">test</button>
</body>
</html>