1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<meta name="description" content="Quick and easy way to build your product tours with Bootstrap Popovers."> 8<title> 9 10 Bootstrap Tour 11 12</title> 13<link href="/components/bootstrap/dist/css/bootstrap.min.css?2016-08-06T07%3A17%3A00%2B01%3A00" rel="stylesheet"> 14<link href="/assets/vendor/pygments-manni.css?2016-08-06T07%3A17%3A00%2B01%3A00" rel="stylesheet"> 15<link href="/assets/css/bootstrap-tour.css?2016-08-06T07%3A17%3A00%2B01%3A00" rel="stylesheet"> 16<link href="/assets/css/bootstrap-tour.docs.css?2016-08-06T07%3A17%3A00%2B01%3A00" rel="stylesheet"> 17<link href="https://boostraptour.com/" rel="canonical"> 18<!--[if lt IE 9]>
18<script src="/components/html5shiv/dist/html5shiv.min.js"></script>
18<![endif]-->
19<script> 20if (window.location.href.indexOf('sorich87.github.com') > -1) { 21 window.location.href = 'http://bootstraptour.com/'; 22}
vendor: 329 bytes, lines 22-28
22 23 24(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 25(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 26m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 27})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 28ga('create', '
28UA-47485647-1
vendor: 49 bytes, lines 28-29
28', 'bootstraptour.com'); 29ga('send', 'pageview');
30</script>
30 31 32 </head> 33 <body> 34 <a href="https://github.com/sorich87/bootstrap-tour" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> 35 <div id="navbar" class="navbar navbar-static-top"> 36 <div class="container"> 37 <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-collapse"> 38 <span class="icon-bar"></span> 39 <span class="icon-bar"></span> 40 <span class="icon-bar"></span> 41 </button> 42 <a href="/" class="navbar-brand">Bootstrap Tour</a> 43 <div class="collapse navbar-collapse"> 44 <ul class="navbar-nav nav"> 45 <li class="active"> 46 <a href="/">Getting started</a> 47 </li> 48 <li> 49 <a href="https://github.com/sorich87/bootstrap-tour/releases">Download</a> 50 </li> 51 <li > 52 <a href="/api">API Documentation</a> 53 </li> 54 <li> 55 <a href="https://github.com/sorich87/bootstrap-tour/issues">Bug reports</a> 56 </li> 57 </ul> 58 </div> 59 </div> 60</div> 61 62 <header id="home"> 63 <div class="jumbotron masthead"> 64 <h1>Bootstrap Tour</h1> 65 <p class="lead"> 66 The easiest way to show people how to use your website. 67 <br><small>Not using Bootstrap? It works anyway!</small> 68 </p> 69 <p> 70 <button type="button" id="demo" class="btn btn-default btn-lg" data-demo> 71 <span class="glyphicon glyphicon-play"></span> 72 Start the demo 73 </button> 74 </p> 75 <ul class="social"> 76 <li> 77 <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=sorich87&repo=bootstrap-tour&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe> 78 </li> 79 <li> 80 <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=sorich87&repo=bootstrap-tour&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe> 81 </li> 82 <li class="tweet-btn"> 83 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootstraptour.com/" data-count="horizontal">Tweet</a> 84 </li> 85 </ul> 86 </div> 87</header> 88<section id="usage"> 89 <div class="container"> 90 <div class="page-header"> 91 <h2>The How-to <small>It's simple!</small></h2> 92 </div> 93 <h3>Add the dependencies</h3> 94 <p>If you are using Bootstrap, include <code>bootstrap-tour.min.css</code> and <code>bootstrap-tour.min.js</code>:</p> 95<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">href=</span><span class="s">"bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span> 96<span class="nt"><link</span> <span class="na">href=</span><span class="s">"bootstrap-tour.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span> 97... 98<span class="nt"><script </span><span class="na">src=</span><span class="s">"jquery.min.js"</span><span class="nt">></script></span> 99<span class="nt"><script </span><span class="na">src=</span><span class="s">"bootstrap.min.js"</span><span class="nt">></script></span> 100<span class="nt"><script </span><span class="na">src=</span><span class="s">"bootstrap-tour.min.js"</span><span class="nt">></script></span></code></pre></figure> 101 <p>Otherwise, just include <code>bootstrap-tour-standalone.min.css</code> and <code>bootstrap-tour-standalone.min.js</code>:</p> 102<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">href=</span><span class="s">"bootstrap-tour-standalone.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span> 103... 104<span class="nt"><script </span><span class="na">src=</span><span class="s">"jquery.min.js"</span><span class="nt">></script></span> 105<span class="nt"><script </span><span class="na">src=</span><span class="s">"bootstrap-tour-standalone.min.js"</span><span class="nt">></script></span></code></pre></figure> 106 <h3>Setup your tour:</h3> 107<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">
107// Instance the tour</span> 108<span class="kd">var</span> <span class="nx">tour</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tour</span><span class="p">({</span> 109 <span class="na">steps</span><span class="p">:</span> <span class="p">[</span> 110 <span class="p">{</span> 111 <span class="na">element</span><span class="p">:</span> <span class="s2">"#my-element"</span><span class="p">,</span> 112 <span class="na">title</span><span class="p">:</span> <span class="s2">"Title of my step"</span><span class="p">,</span> 113 <span class="na">content</span><span class="p">:</span> <span class="s2">"Content of my step"</span> 114 <span class="p">},</span> 115 <span class="p">{</span> 116 <span class="na">element</span><span class="p">:</span> <span class="s2">"#my-other-element"</span><span class="p">,</span> 117 <span class="na">title</span><span class="p">:</span> <span class="s2">"Title of my step"</span><span class="p">,</span> 118 <span class="na">content</span><span class="p">:</span> <span class="s2">"Content of my step"</span> 119 <span class="p">}</span> 120<span class="p">]});</span> 121 122<span class="c1">// Initialize the tour</span> 123<span class="nx">tour</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span> 124 125<span class="c1">// Start the tour</span> 126<span class="nx">tour</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span></code></pre></figure> 127 <p>Do you want to do more? <a href="api">Read the full documentation.</a></p> 128 </div> 129</section> 130<section id="contributing"> 131 <div class="container"> 132 <div class="page-header"> 133 <h2>The Team <small>It's handmade!</small></h2> 134 </div> 135 <div class="row"> 136 <div class="col-sm-4"> 137 <a href="https://github.com/sorich87"><img src="" class="gravatar img-circle" data-email="[email protected]"> Ulrich Sossou</a> 138 </div> 139 <div class="col-sm-4"> 140 <a href="https://github.com/LostCrew"><img src="" class="gravatar img-circle" data-email="[email protected]"> Emanuele Marchi</a> 141 </div> 142 <div class="col-sm-4"> 143 <a href="https://github.com/emmenko"><img src="" class="gravatar img-circle" data-email="[email protected]"> Nicola Molinari</a> 144 </div> 145 </div> 146 </div> 147</section> 148<section id="license"> 149 <div class="container"> 150 <div class="page-header"> 151 <h2>The License <small>It's free!</small></h2> 152 </div> 153 <p>Code licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.<br> 154 Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> 155 </div> 156</section> 157 158
158<script src="/components/jquery/dist/jquery.min.js?2016-08-06T07%3A17%3A00%2B01%3A00"></script>
vendor: 1 bytes, line 158
158
159<script src="/components/bootstrap/dist/js/bootstrap.min.js?2016-08-06T07%3A17%3A00%2B01%3A00"></script>
vendor: 1 bytes, line 159
159
160<script src="/components/blueimp-md5/js/md5.min.js?2016-08-06T07%3A17%3A00%2B01%3A00"></script>
vendor: 1 bytes, line 160
160
161<script src="/assets/vendor/jquery.smoothscroll.js?2016-08-06T07%3A17%3A00%2B01%3A00"></script>
vendor: 1 bytes, line 161
161
162<script src="/assets/js/bootstrap-tour.js?2016-08-06T07%3A17%3A00%2B01%3A00"></script>
vendor: 1 bytes, line 162
162
163<script src="/assets/js/bootstrap-tour.docs.js?2016-08-06T07%3A17%3A00%2B01%3A00"></script>
vendor: 1 bytes, line 163
163
164<script> 165window.twttr = (function (d,s,id) { 166 var t, js, fjs = d.getElementsByTagName(s)[0]; 167 if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1; 168 js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); 169 return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); 170}(document, "script", "twitter-wjs")); 171</script>
vendor: 1 bytes, line 171
171
172<script src="//my.hellobar.com/8de0c45141ba6289e0a9d247b192ae3b42875f9d.js" type="text/javascript" charset="utf-8" async="async"></script>
172 173 174
174<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"639cb82713ef460f9a262e44c9e163f0","r":1,"spa":2}' crossorigin="anonymous"></script>
174 175</body> 176</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.