Added getting started guide to the home page

docs/_includes/navigation.html

@@ -15,9 +15,6 @@
         <li{% if page.slug == "home" %} class="active"{% endif %}>
           <a href="./">Home</a>
         </li>
-        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
-          <a href="./getting-started.html">Getting started</a>
-        </li>
         <li{% if page.slug == "examples" %} class="active"{% endif %}>
           <a href="./examples.html">Examples</a>
         </li>

docs/index.html

@@ -27,3 +27,121 @@ slug: home
     </div>
   </div>
 </main>
+
+<div class="container">
+  <section id="lead" class="lead">
+    Select2 gives you a customizable select box with support for searching,
+    tagging, remote data sets, infinite scrolling, and many other highly used
+    options.
+  </section>
+
+  <section id="getting-started">
+    <h2>
+      Getting started with Select2
+    </h2>
+
+    <p>
+      In order to use Select2, you must include the JavaScript and CSS file on
+      your website. You can get these files built for you from many different
+      locations.
+    </p>
+
+    <h3>
+      Using Select2 from a CDN
+    </h3>
+
+    <p>
+      Select2 is hosted on both the
+      <a href="https://cdnjs.com/libraries/select2">cdnjs</a> and
+      <a href="http://www.jsdelivr.com/#!select2">jsDelivr</a> CDNs, allowing
+      you to quickly include Select2 on your website.
+    </p>
+
+    <ol>
+      <li>
+        Include the following lines of code in the <code>&lt;head&gt;</code>
+        section of your HTML.
+
+<pre class="code">
+&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/select2.min.css" /&gt;
+&lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/select2.min.js"&gt;&lt;/script&gt;
+</pre>
+
+        <div class="alert alert-info">
+          <i class="fa fa-info-circle"></i>
+          Immediately following a new release, it takes some time for CDNs to
+          catch up and get the new versions live on the CDN.
+        </div>
+      </li>
+      <li>
+        Initialize Select2 on the <code>&gt;select&lt;</code> element that you
+        want to make awesome.
+
+<pre class="code">
+&lt;script type="text/javascript"&gt;
+  $('select').select2();
+&lt;/script&gt;
+</pre>
+      </li>
+      <li>
+        Check out the <a href="examples.html">examples page</a> to start using
+        the additional features of Select2.
+      </li>
+    </ol>
+
+    <h3>
+      Downloading the code locally
+    </h3>
+
+    <p>
+      In some situations, you can't use Select2 from a CDN and you must include
+      the files through your own static file servers.
+    </p>
+
+    <ol>
+      <li>
+        <a href="https://github.com/ivaynberg/select2/tags">
+          Download the code
+        </a>
+        from GitHub and copy the <code>dist</code> directory to your project.
+      </li>
+      <li>
+        Include the following lines of code in the <code>&lt;head&gt;</code>
+        section of your HTML.
+
+<pre class="code">
+&lt;link href="path/to/select2.min.css" /&gt;
+&lt;script src="path/to/select2.js"&gt;&lt;/script&gt;
+</pre>
+      </li>
+      <li>
+        Check out the <a href="examples.html">examples page</a> to start using
+        the additional features of Select2.
+      </li>
+    </ol>
+  </section>
+
+  <section id="about">
+    <h2>
+      About
+    </h2>
+
+    <ul>
+      <li>
+        <a href="https://github.com/ivaynberg/select2">
+          Source code, hosted on GitHub
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/ivaynberg/select2/issues">
+          Bug tracker
+        </a>
+      </li>
+      <li>
+        <a href="community.html">
+          Community and support
+        </a>
+      </li>
+    </ul>
+  </section>
+</div>