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:
37
docs/getting-started/compiling.md
Normal file
37
docs/getting-started/compiling.md
Normal 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`.
|
48
docs/getting-started/contents.md
Normal file
48
docs/getting-started/contents.md
Normal 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.
|
30
docs/getting-started/download.md
Normal file
30
docs/getting-started/download.md
Normal 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 %}
|
44
docs/getting-started/quick-start.md
Normal file
44
docs/getting-started/quick-start.md
Normal 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!
|
Reference in New Issue
Block a user