<pclass="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
<divid="welcome"class="bs-docs-section-header">
<h1>Welcome</h1>
<pclass="lead">Welcome to the Bootstrap documentation, the living, interactive style and code guide for all things Bootstrap. If you're new here, continue reading to learn how to get started. Otherwise, carry on you beautiful person you.</p>
<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 the compiled Bootstrap files.</p>
<pclass="lead">There are three easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<divclass="row">
<divclass="row">
<divclass="col-span-6">
<divclass="col-span-6">
<h2>Compiled</h2>
<h2>Compiled CSS and JS</h2>
<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><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
<p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <ahref="http://twitter.github.com/bower">Bower</a>.</p>
<p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <ahref="http://twitter.github.com/bower">Bower</a>.</p>
<pclass="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
<pclass="lead">Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something 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>
{% highlight bash %}
{% highlight bash %}
...
@@ -127,52 +67,17 @@ description: Overview of the project, its contents, and how to get started with
...
@@ -127,52 +67,17 @@ description: Overview of the project, its contents, and how to get started with
<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>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
<pclass="lead">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>
<h2>Docs sections</h2>
<p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
<p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
<pclass="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <ahref="./getting-started.html#file-structure">File structure</a>.</p>
<pclass="lead">Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
<!-- Optionally enable responsive features in IE8 -->
<script src="js/respond.js"></script>
</body>
</body>
</html>
</html>
{% endhighlight %}
{% endhighlight %}
<p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
<h3>Examples</h3>
<hr>
<h4>Responsive features in IE8</h4>
<p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <ahref="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
<pclass="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<pclass="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<pclass="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3>Requires HTML5 doctype</h3>
<h3>HTML5 doctype required</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
{% highlight html linenos %}
{% highlight html linenos %}
<!DOCTYPE html>
<!DOCTYPE html>
...
@@ -327,34 +215,31 @@ description: Overview of the project, its contents, and how to get started with
...
@@ -327,34 +215,31 @@ description: Overview of the project, its contents, and how to get started with
</html>
</html>
{% endhighlight %}
{% endhighlight %}
<h3>Mobile first</h3>
<h3>Mobile first</h3>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<ul>
<li>Remove <code>margin</code> on the body</li>
<li>Remove <code>margin</code> on the body</li>
<li>Set <code>background-color: white;</code> on the <code>body</code></li>
<li>Set <code>background-color: white;</code> on the <code>body</code></li>
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>
</ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<h3>Normalize reset</h3>
<p>For improved cross-browser rendering, we use <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> and <ahref="http://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>.</p>
</section>
<h3>Normalize reset</h3>
<p>For improved cross-browser rendering, we use <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> and <ahref="http://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>.</p>
@@ -596,15 +481,6 @@ description: Overview of the project, its contents, and how to get started with
...
@@ -596,15 +481,6 @@ description: Overview of the project, its contents, and how to get started with
</table>
</table>
</div>
</div>
<!-- <div class="bs-docs-example">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
-->
<!-- Body copy -->
<!-- Body copy -->
<h2id="body-copy">Body copy</h2>
<h2id="body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
...
@@ -936,7 +812,7 @@ description: Overview of the project, its contents, and how to get started with
...
@@ -936,7 +812,7 @@ description: Overview of the project, its contents, and how to get started with
<p>
<p>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p>
</p>
</section>
</div>
...
@@ -944,7 +820,7 @@ description: Overview of the project, its contents, and how to get started with
...
@@ -944,7 +820,7 @@ description: Overview of the project, its contents, and how to get started with
@@ -2253,13 +2129,13 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -2253,13 +2129,13 @@ For example, <code><section></code> should be wrapped as inline.
{% endhighlight %}
{% endhighlight %}
<p>As a best practice, <strong>we highly recommend matching using the <code><button<</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>As a best practice, <strong>we highly recommend matching using the <code><button<</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
