update static assets section of extend page, copy changes elsewhere

diff --git a/docs/base-css.html b/docs/base-css.html
index 2897453978843135d2fbe4b6cbc8011e4b073264..d01d5350c9d616ad1eb4a08de7a25d37662ebfcb 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -123,12 +123,14 @@
           <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
           <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
         </div>
+        <pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>
 
         <h3>Lead body copy</h3>
         <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
         <div class="bs-docs-example">
           <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
         </div>
+        <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
         <h2>Built with Less</h2>
         <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
@@ -145,18 +147,14 @@
         <div class="bs-docs-example">
           <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
         </div>
-<pre class="prettyprint">
-&lt;strong&gt;rendered as bold text&lt;/strong&gt;
-</pre>
+        <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
 
         <h3><code>&lt;em&gt;</code></h3>
         <p>For emphasizing a snippet of text with <em>stress</em></p>
         <div class="bs-docs-example">
           <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
         </div>
-<pre class="prettyprint">
-&lt;em&gt;rendered as italicized text&lt;/em&gt;
-</pre>
+        <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
 
         <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
 
@@ -172,18 +170,14 @@
         <div class="bs-docs-example">
           <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
         </div>
-<pre class="prettyprint">
-&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;
-</pre>
+        <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>
 
         <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
         <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
         <div class="bs-docs-example">
           <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
         </div>
-<pre class="prettyprint">
-&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;
-</pre>
+        <pre class="prettyprint">&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;</pre>
 
 
         <hr class="bs-docs-separator">

diff --git a/docs/extend.html b/docs/extend.html
index 1e1c753ea587b16782add5c3197458ffa6b29f27..8e9b79b6b0c25ecca2eec4f91ecb4cff89fa4198 100644 (file)
--- a/docs/extend.html
+++ b/docs/extend.html
@@ -177,8 +177,59 @@
         <div class="page-header">
           <h1>Use as static assets</h1>
         </div>
-        <p class="lead">Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
-        <p>...</p>
+        <p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
+
+        <h3>Setup file structure</h3>
+        <p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
+<pre class="prettyprint">
+  app/
+  ├── layouts/
+  └── templates/
+  public/
+  ├── css/
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+</pre>
+
+        <h3>Utilize starter template</h3>
+        <p>Copy the following base HTML to get started.</p>
+<pre class="prettyprint linenums">
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
+    &lt;!-- Bootstrap --&gt;
+    &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
+    &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Hello, world!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+        <h3>Layer on custom code</h3>
+        <p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p>
+<pre class="prettyprint linenums">
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
+    &lt;!-- Bootstrap --&gt;
+    &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
+    &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
+    &lt;!-- Project --&gt;
+    &lt;link href="public/css/application.css" rel="stylesheet"&gt;
+    &lt;script src="public/js/application.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Hello, world!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
       </section>
 
 

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 456ea059bc00586a19ce63bcf572e09ca5fbfd4e..7e7106fb6e31a73a4517e963f92e74c2885d374a 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -54,6 +54,7 @@
           <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
           <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
         </div>
+        <pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>
 
         {{! Body copy .lead }}
         <h3>{{_i}}Lead body copy{{/i}}</h3>
@@ -61,6 +62,7 @@
         <div class="bs-docs-example">
           <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
         </div>
+        <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
         {{! Using LESS }}
         <h2>{{_i}}Built with Less{{/i}}</h2>
@@ -79,18 +81,14 @@
         <div class="bs-docs-example">
           <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
         </div>
-<pre class="prettyprint">
-&lt;strong&gt;rendered as bold text&lt;/strong&gt;
-</pre>
+        <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
 
         <h3><code>&lt;em&gt;</code></h3>
         <p>{{_i}}For emphasizing a snippet of text with <em>stress</em>{{/i}}</p>
         <div class="bs-docs-example">
           <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
         </div>
-<pre class="prettyprint">
-&lt;em&gt;rendered as italicized text&lt;/em&gt;
-</pre>
+        <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
 
         <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p>
 
@@ -107,18 +105,14 @@
         <div class="bs-docs-example">
           <p>{{_i}}An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.{{/i}}</p>
         </div>
-<pre class="prettyprint">
-&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;
-</pre>
+        <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>
 
         <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
         <p>{{_i}}Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.{{/i}}</p>
         <div class="bs-docs-example">
           <p>{{_i}}<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
         </div>
-<pre class="prettyprint">
-&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;
-</pre>
+        <pre class="prettyprint">&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;</pre>
 
 
         <hr class="bs-docs-separator">

diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache
index 56b114b446b27bbff34617e75f697ddefe15ce5b..d7384d58ad7d3656a4479cb8e349fa8ba0001240 100644 (file)
--- a/docs/templates/pages/extend.mustache
+++ b/docs/templates/pages/extend.mustache
@@ -106,8 +106,59 @@
         <div class="page-header">
           <h1>{{_i}}Use as static assets{{/i}}</h1>
         </div>
-        <p class="lead">Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
-        <p>...</p>
+        <p class="lead">{{_i}}<a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}</p>
+
+        <h3>{{_i}}Setup file structure{{/i}}</h3>
+        <p>{{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}</p>
+<pre class="prettyprint">
+  app/
+  ├── layouts/
+  └── templates/
+  public/
+  ├── css/
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+</pre>
+
+        <h3>{{_i}}Utilize starter template{{/i}}</h3>
+        <p>{{_i}}Copy the following base HTML to get started.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
+    &lt;!-- Bootstrap --&gt;
+    &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
+    &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Hello, world!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+        <h3>{{_i}}Layer on custom code{{/i}}</h3>
+        <p>{{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
+    &lt;!-- Bootstrap --&gt;
+    &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
+    &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
+    &lt;!-- Project --&gt;
+    &lt;link href="public/css/application.css" rel="stylesheet"&gt;
+    &lt;script src="public/js/application.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Hello, world!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
       </section>