1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 21:09:06 +02:00

start markdowning getting started and moving things to separate pages

This commit is contained in:
Mark Otto
2014-07-10 17:54:06 -07:00
parent 57c709becd
commit 4993ab6e00
18 changed files with 290 additions and 201 deletions

View File

@@ -0,0 +1,37 @@
---
layout: page
title: Compiling with Grunt
---
Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.
### Install Grunt
**To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js.
From the command line:
1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) and automatically install the necessary local dependencies listed there.
When completed, you'll be able to run the various Grunt commands provided from the command line.
**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
#### Tests - `grunt test`
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
### Troubleshooting dependencies
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.

View File

@@ -0,0 +1,48 @@
---
layout: page
title: Contents
---
Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
<div class="bs-callout bs-callout-warning" id="jquery-required">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
</div>
### Precompiled Bootstrap
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
{% highlight bash %}
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
└── js/
├── bootstrap.js
└── bootstrap.min.js
{% endhighlight %}
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (1bootstrap.min.*1). Also included is the optional Bootstrap theme.
### Bootstrap source code
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:
{% highlight bash %}
bootstrap/
├── less/
├── js/
├── dist/
│ ├── css/
│ └── js/
└── docs/
└── examples/
{% endhighlight %}
The `less/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.

View File

@@ -0,0 +1,30 @@
---
layout: page
title: Download
---
Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.
### 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>
### Download source 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>
### Bower
Install and manage Bootstrap's Less, CSS, and JavaScript using [Bower](http://bower.io).
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
### 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 %}

View File

@@ -0,0 +1,44 @@
---
layout: page
title: 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 pages. It's best placed right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
{% highlight html %}
<script src="{{ site.cdn.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="{{ site.cdn.jquery }}"></script>
<script src="{{ site.cdn.js }}"></script>
</body>
</html>
{% endhighlight %}
And that's it. Happy Bootstrapping!