Skip to content
GitLab
Commit 35c90fe1 authored by Mark Otto's avatar Mark Otto
Browse files

rewrite getting started quick start and download in markdown

parent 1af9ae16
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 108 additions and 49 deletions
+108 -49
docs/_includes/getting-started/download.html deleted 100644 → 0
+ 0
- 46
View file @ 1af9ae16
<div class="bs-docs-section">
<h1 id="download" class="page-header">Download</h1>
<p class="lead">Bootstrap (currently v{{ site.current_version }}) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<div class="row bs-downloads">
<div class="col-sm-4">
<h3 id="download-bootstrap">Bootstrap</h3>
<p>Compiled and minified CSS and JavaScript. No docs or original source files are included.</p>
<p>
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
</p>
</div>
<div class="col-sm-4">
<h3 id="download-source">Source code</h3>
<p>Source Less, JavaScript, and documentation. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
<p>
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
</p>
</div>
<div class="col-sm-4">
<h3 id="download-sass">Sass</h3>
<p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
<p>
<a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
</p>
</div>
</div>
<h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ site.cdn.css }}">
<!-- Optional theme -->
<link rel="stylesheet" href="{{ site.cdn.css_theme }}">
<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn.js }}"></script>
{% endhighlight %}
<h3 id="download-bower">Install with Bower</h3>
<p>Install and manage Bootstrap's Less, CSS, and JavaScript using <a href="http://bower.io">Bower</a>.</p>
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>
docs/_includes/getting-started/download.md 0 → 100644
+ 84
- 0
View file @ 35c90fe1
<a id="quick-start"></a>
# Quick start
Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks. Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
{% highlight html %}
<link rel="stylesheet" href="{{ site.cdn.css }}">
{% endhighlight %}
Then, add the Bootstrap JavaScript—and jQuery—near the end of your project. It's best placed right before the closing `</body>` tag. Be sure to place jQuery first.
{% highlight html %}
<script src="">jQuery</script>
<script src="{{ site.cdn.js }}"></script>
{% endhighlight %}
Be sure to have your pages set up with the latest design and development standards. That means:
* Using an HTML5 doctype
* Forcing Internet Explorer to use it's latest rendering mode ([read more]())
* And, utilizing the viewport meta tag.
Put it all together and your pages should look like this:
{% highlight html %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="{{ site.cdn.css }}">
</head>
<body>
<h1>Hello, world!</h1>
<script src="">jQuery</script>
<script src="{{ site.cdn.js }}"></script>
</body>
</html>
{% endhighlight %}
And that's it. Happy Bootstrapping!
<a id="download"></a>
# Download
Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
<a id="download-precompiled"></a>
### Precompiled
Compiled and minified CSS and JavaScript. No docs or original source files are included.
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
<a id="download-source"></a>
### Source code and docs
Source Less, JavaScript, and documentation. **Requires a Less compiler and [some setup](#grunt).**
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
<a id="download-bower"></a>
### Bower
Install and manage Bootstrap's Less, CSS, and JavaScript using [Bower](http://bower.io).
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
<a id="download-npm"></a>
### npm
Bootstrap is available as [an npm package](https://www.npmjs.org/package/bootstrap). Install it into your Node powered apps with:
{% highlight bash %}$ npm install bootstrap{% endhighlight %}
docs/_includes/nav/docs.html
+ 5
- 0
View file @ 35c90fe1
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
<div class="bs-docs-toc-item{% if page.slug == "css" %} active{% endif %}"> <div class="bs-docs-toc-item{% if page.slug == "css" %} active{% endif %}">
<a class="bs-docs-toc-link" href="../css">CSS</a> <a class="bs-docs-toc-link" href="../css">CSS</a>
{% if page.slug == "css" %} {% if page.slug == "css" %}
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
<div class="bs-docs-toc-item{% if page.slug == "components" %} active{% endif %}"> <div class="bs-docs-toc-item{% if page.slug == "components" %} active{% endif %}">
<a class="bs-docs-toc-link" href="../components">Components</a> <a class="bs-docs-toc-link" href="../components">Components</a>
{% if page.slug == "components" %} {% if page.slug == "components" %}
...@@ -36,6 +38,7 @@ ...@@ -36,6 +38,7 @@
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
<div class="bs-docs-toc-item{% if page.slug == "js" %} active{% endif %}"> <div class="bs-docs-toc-item{% if page.slug == "js" %} active{% endif %}">
<a class="bs-docs-toc-link" href="../javascript">JavaScript</a> <a class="bs-docs-toc-link" href="../javascript">JavaScript</a>
{% if page.slug == "js" %} {% if page.slug == "js" %}
...@@ -44,6 +47,7 @@ ...@@ -44,6 +47,7 @@
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
<div class="bs-docs-toc-item{% if page.slug == "customize" %} active{% endif %}"> <div class="bs-docs-toc-item{% if page.slug == "customize" %} active{% endif %}">
<a class="bs-docs-toc-link" href="../customize">Customize</a> <a class="bs-docs-toc-link" href="../customize">Customize</a>
{% if page.slug == "customize" %} {% if page.slug == "customize" %}
...@@ -52,6 +56,7 @@ ...@@ -52,6 +56,7 @@
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
<div class="bs-docs-toc-item{% if page.slug == "about" %} active{% endif %}"> <div class="bs-docs-toc-item{% if page.slug == "about" %} active{% endif %}">
<a class="bs-docs-toc-link" href="../about">About</a> <a class="bs-docs-toc-link" href="../about">About</a>
{% if page.slug == "js" %} {% if page.slug == "js" %}
......
docs/_includes/nav/getting-started.html
+ 9
- 0
View file @ 35c90fe1
<li>
<a href="#quick-start">Quick start</a>
</li>
<li> <li>
<a href="#download">Download</a> <a href="#download">Download</a>
<ul class="nav">
<li><a href="#download-precompiled">CSS and JavaScript</a></li>
<li><a href="#download-source">Source code &amp; docs</a></li>
<li><a href="#download-bower">Via Bower</a></li>
<li><a href="#download-npm">Via npm</a></li>
</ul>
</li> </li>
<li> <li>
<a href="#whats-included">What's included</a> <a href="#whats-included">What's included</a>
......
docs/assets/css/docs.min.css
+ 1
- 1
View file @ 35c90fe1
This diff is collapsed.
docs/assets/less/docs.less
+ 4
- 0
View file @ 35c90fe1
...@@ -709,6 +709,10 @@ body { ...@@ -709,6 +709,10 @@ body {
padding-top: 2rem; padding-top: 2rem;
margin-top: 3rem; margin-top: 3rem;
&:first-child {
margin-top: 0;
}
+ p { + p {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 300; font-weight: 300;
......
docs/getting-started.html
+ 5
- 2
View file @ 35c90fe1
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
layout: default layout: default
title: Getting started title: Getting started
slug: getting-started slug: getting-started
lead: "An overview of Bootstrap, how to download and use, basic templates and examples, and more." lead: "Learn how to quickly start a new project with Bootstrap with downloads, basic templates and examples, and more."
--- ---
{% include getting-started/download.html %} {% markdown %}
{% include getting-started/download.md %}
{% endmarkdown %}
{% include getting-started/whats-included.html %} {% include getting-started/whats-included.html %}
{% include getting-started/grunt.html %} {% include getting-started/grunt.html %}
{% include getting-started/template.html %} {% include getting-started/template.html %}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment