<pclass="lead">Before downloading, be sure to have a code editor (we recommend <ahref="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.</p>
<divclass="row">
<divclass="span4">
<h3>Download compiled</h3>
<p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
<p>Before getting started, you need the following:</p>
<ul>
<li>An unzipped copy of the <ahref="https://github.com/twitter/bootstrap/zipball/master">latest version of Bootstrap</a> (which includes all CSS, JavaScript, and images).</li>
<li>An editor of your choice for writing code (I recommend <ahref="http://sublimetext.com/2">Sublime Text 2</a>).</li>
<li>Some working knowledge of HTML and CSS.</li>
</ul>
<p>When ready, proceed to the next section, <ahref="#file-structure">File structure</a>.</p>
<p>Once unzipped, the structure of Bootstrap’s files looks like this:</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
<ul>
<preclass="prettyprint">
<li>bootstrap/
bootstrap/
<ul>
├── css/
<li>css/
│ ├── bootstrap.css
<ul>
│ ├── bootstrap.min.css
<li>bootstrap.css</li>
├── js/
<li>bootstrap.min.css</li>
│ ├── bootstrap.js
</ul>
│ ├── bootstrap.min.js
</li>
├── img/
<li>js/
│ ├── glyphicons-halflings.png
<ul>
│ ├── glyphicons-halflings-white.png
<li>bootstrap.js</li>
└── README.md
<li>bootstrap.min.js</li>
</pre>
</ul>
</li>
<li>img/
<ul>
<li>glyphicons-halflings.png</li>
<li>glyphicons-halflings-white.png</li>
</ul>
</li>
<li>README.md</li>
</ul>
</li>
</ul>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>Bootstrap comes equipped with CSS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <ahref="http://getbootstrap.com">Bootstrap documentation</a>:</p>
<p>Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <ahref="http://getbootstrap.com">Bootstrap documentation</a>.</p>
<ul>
<li><strong><ahref="http://twitter.github.com/bootstrap/scaffolding.html">Scaffolding:</a></strong> Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.</li>
<li><strong><ahref="http://twitter.github.com/bootstrap/base-css.html">Base CSS:</a></strong> Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.</li>
<p>Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.</p>
<li><strong><ahref="http://twitter.github.com/bootstrap/components.html">Components:</a></strong> Basic styles for common interface components like tabs and pills, navbar, page headers, and more.</li>
<li><strong><ahref="http://twitter.github.com/bootstrap/javascript.html">Javascript plugins:</a></strong> Similar to the Components section, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.</li>
<p>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
<p>Now that we’ve got the basic information on Bootstrap out of the way, we can focus on getting started. To do that, we’ll utilize a basic HTML template that includes everything we’ve mentioned in the <ahref="#file-structure">File structure</a>.</p>
<p>With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <ahref="#file-structure">File structure</a>.</p>
<p>As previously mentioned, we won’t cover the basics of writing HTML and CSS here. Instead, we’ll leapfrog through various points in web development complexity to give you the broadest and most complete overview.</p>
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
<p>Now, here’s a look at a <strong>typical HTML file</strong>:</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<html>
<html>
<head>
<head>
...
@@ -206,15 +223,25 @@
...
@@ -206,15 +223,25 @@
</body>
</body>
</html>
</html>
</pre>
</pre>
<p>And you’re set. With those two files added, you can begin to write Bootstrap-friendly HTML, CSS, and JS to build any site or application you like. Head to the Bootstrap docs for information, examples, and even code snippets for the Bootstrap grid system, base HTML styles, components, and even responsive features.</p>
<p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
<hr>
<h2>What next?</h2>
<pclass="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
<aclass="btn btn-large"href="./scaffolding.html">Visit the Bootstrap docs</a>
<pclass="lead">{{_i}}Before downloading, be sure to have a code editor (we recommend <ahref="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}</p>
<divclass="row">
<divclass="span4">
<h3>Download compiled</h3>
<p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
<p>{{_i}}Before getting started, you need the following:{{/i}}</p>
<ul>
<li>{{_i}}An unzipped copy of the <ahref="https://github.com/twitter/bootstrap/zipball/master">latest version of Bootstrap</a> (which includes all CSS, JavaScript, and images).{{/i}}</li>
<li>{{_i}}An editor of your choice for writing code (I recommend <ahref="http://sublimetext.com/2">Sublime Text 2</a>).{{/i}}</li>
<li>{{_i}}Some working knowledge of HTML and CSS.{{/i}}</li>
</ul>
<p>{{_i}}When ready, proceed to the next section, <ahref="#file-structure">File structure</a>.{{/i}}</p>
<p>{{_i}}Once unzipped, the structure of Bootstrap’s files looks like this:{{/i}}</p>
<p>{{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}</p>
<ul>
<preclass="prettyprint">
<li>bootstrap/
bootstrap/
<ul>
├── css/
<li>css/
│ ├── bootstrap.css
<ul>
│ ├── bootstrap.min.css
<li>bootstrap.css</li>
├── js/
<li>bootstrap.min.css</li>
│ ├── bootstrap.js
</ul>
│ ├── bootstrap.min.js
</li>
├── img/
<li>js/
│ ├── glyphicons-halflings.png
<ul>
│ ├── glyphicons-halflings-white.png
<li>bootstrap.js</li>
└── README.md
<li>bootstrap.min.js</li>
</pre>
</ul>
</li>
<li>img/
<ul>
<li>glyphicons-halflings.png</li>
<li>glyphicons-halflings-white.png</li>
</ul>
</li>
<li>README.md</li>
</ul>
</li>
</ul>
<p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p>
<p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <ahref="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p>
<p>{{_i}}Bootstrap comes equipped with CSS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <ahref="http://getbootstrap.com">Bootstrap documentation</a>:{{/i}}</p>
<p>{{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <ahref="http://getbootstrap.com">Bootstrap documentation</a>.{{/i}}</p>
<ul>
<li><strong><ahref="http://twitter.github.com/bootstrap/scaffolding.html">Scaffolding:</a></strong> Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.</li>
<li><strong><ahref="http://twitter.github.com/bootstrap/base-css.html">Base CSS:</a></strong> Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.</li>
<p>Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.</p>
<li><strong><ahref="http://twitter.github.com/bootstrap/components.html">Components:</a></strong> Basic styles for common interface components like tabs and pills, navbar, page headers, and more.</li>
<li><strong><ahref="http://twitter.github.com/bootstrap/javascript.html">Javascript plugins:</a></strong> Similar to the Components section, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.</li>
<p>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <ahref="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
<p>{{_i}}Now that we’ve got the basic information on Bootstrap out of the way, we can focus on getting started. To do that, we’ll utilize a basic HTML template that includes everything we’ve mentioned in the <ahref="#file-structure">File structure</a>.{{/i}}</p>
<p>{{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <ahref="#file-structure">File structure</a>.{{/i}}</p>
<p>{{_i}}As previously mentioned, we won’t cover the basics of writing HTML and CSS here. Instead, we’ll leapfrog through various points in web development complexity to give you the broadest and most complete overview.{{/i}}</p>
<p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p>
<p>{{_i}}Now, here’s a look at a <strong>typical HTML file</strong>:{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<html>
<html>
<head>
<head>
...
@@ -138,10 +152,19 @@
...
@@ -138,10 +152,19 @@
</body>
</body>
</html>
</html>
</pre>
</pre>
<p>{{_i}}And you’re set. With those two files added, you can begin to write Bootstrap-friendly HTML, CSS, and JS to build any site or application you like. Head to the Bootstrap docs for information, examples, and even code snippets for the Bootstrap grid system, base HTML styles, components, and even responsive features.{{/i}}</p>
<p>{{_i}}<strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}</p>
<hr>
<h2>What next?</h2>
<pclass="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
<aclass="btn btn-large"href="./scaffolding.html">Visit the Bootstrap docs</a>
