新手操作指南Demo - 使用双汇UI代码

second.html 2.9KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Multi-page introduction, Page 2</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
  8. <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
  9. <!-- styles -->
  10. <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
  11. <link href="../assets/css/demo.css" rel="stylesheet">
  12. <!-- Add IntroJs styles -->
  13. <link href="../../introjs.css" rel="stylesheet">
  14. <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
  15. </head>
  16. <body>
  17. <div class="container-narrow">
  18. <div class="masthead">
  19. <ul class="nav nav-pills pull-right" data-intro="Get it, use it.">
  20. <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
  21. <li><a href="https://github.com/usablica/intro.js">Github</a></li>
  22. <li><a href="https://twitter.com/usablica">@usablica</a></li>
  23. </ul>
  24. <h3 class="muted">Intro.js</h3>
  25. </div>
  26. <hr>
  27. <div class="jumbotron">
  28. <h1>Second Page</span></h1>
  29. <p class="lead" data-intro="Another step.">Next page of introduction!</p>
  30. </div>
  31. <hr>
  32. <div class="row-fluid marketing">
  33. <div class="span6">
  34. <h4>Section One</h4>
  35. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
  36. <h4>Section Two</h4>
  37. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
  38. <h4>Section Three</h4>
  39. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
  40. </div>
  41. <div class="span6">
  42. <h4>Section Four</h4>
  43. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
  44. <h4>Section Five</h4>
  45. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
  46. <h4>Section Six</h4>
  47. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
  48. </div>
  49. </div>
  50. </div>
  51. <script type="text/javascript" src="../../intro.js"></script>
  52. <script type="text/javascript">
  53. if (RegExp('multipage', 'gi').test(window.location.search)) {
  54. introJs().start();
  55. }
  56. </script>
  57. </body>
  58. </html>