]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
finish off the static stuff for build and download page
authorMark Otto <markdotto@gmail.com>
Wed, 25 Jan 2012 21:33:55 +0000 (13:33 -0800)
committerMark Otto <markdotto@gmail.com>
Wed, 25 Jan 2012 21:33:55 +0000 (13:33 -0800)
docs/assets/css/docs.css
docs/assets/img/twitter-logo-no-bird.png [deleted file]
docs/base-css.html
docs/download.html
docs/templates/pages/base-css.mustache
docs/templates/pages/download.mustache

index 600894f3866c20d1f655dae566455086a4208f2c..739ae1fc4d50ce6eba8c9da6daa2665e63a1f2e7 100644 (file)
@@ -125,7 +125,7 @@ section {
   margin-right: 0;
 }
 .subhead h1 {
-  font-size: 45px;
+  font-size: 54px;
 }
 
 /* Subnav */
@@ -168,10 +168,17 @@ section {
   color: #333;
 }
 .subnav .nav .active a {
-  background-color: #e5e5e5;
+  background-color: #e9e9e9;
+  border-right-color: #ddd;
+  border-left: 0;
+  padding-left: 13px;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.075);
+     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.075);
+          box-shadow: inset 0 3px 5px rgba(0,0,0,.075);
 }
 .subnav .nav li:first-child a {
   border-left: 0;
+  padding-left: 12px;
 }
 .subnav .nav li:last-child a {
   border-right: 0;
@@ -464,7 +471,6 @@ section {
   font-family: Menlo, Monaco, "Courier New", monospace;
   font-size: 12px;
   color: #d14;
-  background-color: #f7f7f9;
 }
 .download-builder input[type=text]:focus {
   background-color: #fff;
@@ -473,7 +479,6 @@ section {
 /* Custom, larger checkbox labels */
 .download .checkbox {
   padding: 6px 10px 6px 25px;
-  font-size: 14px;
   color: #555;
   background-color: #f9f9f9;
   -webkit-border-radius: 3px;
@@ -485,10 +490,6 @@ section {
   color: #333;
   background-color: #f5f5f5;
 }
-.download .checkbox input[type=checkbox] {
-  position: relative;
-  top: 1px;
-}
 .download .checkbox small {
   font-size: 12px;
   color: #777;
@@ -496,17 +497,23 @@ section {
 
 /* Giant download button */
 .download-btn {
-  pading: 18px 20px;
-  margin: 45px 0;
+  margin: 36px 0 108px;
+}
+.download p,
+.download h4 {
+  max-width: 50%;
+  margin: 0 auto 18px;
+  color: #999;
   text-align: center;
-  border: 1px solid #eee;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+}
+.download-btn h4 {
+  margin-bottom: 0;
 }
 .btn.xlarge {
-  margin: 36px auto;
-  padding: 14px 24px;
+  display: block;
+  width: auto;
+  padding: 19px 24px;
+  margin-bottom: 27px;
   font-size: 30px;
   text-align: center;
   -webkit-border-radius: 6px;
diff --git a/docs/assets/img/twitter-logo-no-bird.png b/docs/assets/img/twitter-logo-no-bird.png
deleted file mode 100644 (file)
index 70b6573..0000000
Binary files a/docs/assets/img/twitter-logo-no-bird.png and /dev/null differ
index 60b5640dff2bf5014cd580472d25443029d26c6d..8340e0f60e87d0cc39667c27014eebe0b9df17ee 100644 (file)
   <div class="row">
     <div class="span8">
       <form class="form-horizontal">
-        <legend>Form control states</legend>
-        <div class="control-group">
-          <label class="control-label" for="focusedInput">Focused input</label>
-          <div class="controls">
-            <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused…">
+        <fieldset>
+          <legend>Form control states</legend>
+          <div class="control-group">
+            <label class="control-label" for="focusedInput">Focused input</label>
+            <div class="controls">
+              <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused…">
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="disabledInput">Disabled input</label>
-          <div class="controls">
-            <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+          <div class="control-group">
+            <label class="control-label" for="disabledInput">Disabled input</label>
+            <div class="controls">
+              <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsCheckbox">Disabled checkbox</label>
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckbox" value="option1" disabled>
-              This is a disabled checkbox
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="optionsCheckbox">Disabled checkbox</label>
+            <div class="controls">
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckbox" value="option1" disabled>
+                This is a disabled checkbox
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="control-group warning">
-          <label class="control-label" for="inputError">Input with warning</label>
-          <div class="controls">
-            <input type="text" name="inputError">
-            <span class="help-inline">Something may have gone wrong</span>
+          <div class="control-group warning">
+            <label class="control-label" for="inputError">Input with warning</label>
+            <div class="controls">
+              <input type="text" name="inputError">
+              <span class="help-inline">Something may have gone wrong</span>
+            </div>
           </div>
-        </div>
-        <div class="control-group error">
-          <label class="control-label" for="inputError">Input with error</label>
-          <div class="controls">
-            <input type="text" name="inputError">
-            <span class="help-inline">Please correct the error</span>
+          <div class="control-group error">
+            <label class="control-label" for="inputError">Input with error</label>
+            <div class="controls">
+              <input type="text" name="inputError">
+              <span class="help-inline">Please correct the error</span>
+            </div>
           </div>
-        </div>
-        <div class="control-group success">
-          <label class="control-label" for="inputError">Input with success</label>
-          <div class="controls">
-            <input type="text" name="inputError">
-            <span class="help-inline">Woohoo!</span>
+          <div class="control-group success">
+            <label class="control-label" for="inputError">Input with success</label>
+            <div class="controls">
+              <input type="text" name="inputError">
+              <span class="help-inline">Woohoo!</span>
+            </div>
           </div>
-        </div>
-        <div class="control-group success">
-          <label class="control-label" for="selectError">Select with success</label>
-          <div class="controls">
-            <select name="selectError">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-            <span class="help-inline">Woohoo!</span>
+          <div class="control-group success">
+            <label class="control-label" for="selectError">Select with success</label>
+            <div class="controls">
+              <select name="selectError">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <span class="help-inline">Woohoo!</span>
+            </div>
           </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn primary">Save changes</button>
-          <button type="reset" class="btn">Cancel</button>
-        </div>
+          <div class="form-actions">
+            <button type="submit" class="btn primary">Save changes</button>
+            <button type="reset" class="btn">Cancel</button>
+          </div>
+        </fieldset>
       </form>
     </div>
     <div class="span4">
   <div class="row">
     <div class="span8">
       <form class="form-horizontal">
-        <legend>Extending form controls</legend>
-        <div class="control-group">
-          <label class="control-label">Form sizes</label>
-          <div class="controls docs-input-sizes">
-            <input class="span2" type="text" name="" placeholder=".span2">
-            <input class="span3" type="text" name="" placeholder=".span3">
-            <input class="span4" type="text" name="" placeholder=".span4">
-            <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
+        <fieldset>
+          <legend>Extending form controls</legend>
+          <div class="control-group">
+            <label class="control-label">Form sizes</label>
+            <div class="controls docs-input-sizes">
+              <input class="span2" type="text" name="" placeholder=".span2">
+              <input class="span3" type="text" name="" placeholder=".span3">
+              <input class="span4" type="text" name="" placeholder=".span4">
+              <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="prependedInput">Prepended text</label>
-          <div class="controls">
-            <div class="input-prepend">
-              <span class="add-on">@</span>
-              <input class="span2" id="prependedInput" name="prependedInput" size="16" type="text">
+          <div class="control-group">
+            <label class="control-label" for="prependedInput">Prepended text</label>
+            <div class="controls">
+              <div class="input-prepend">
+                <span class="add-on">@</span>
+                <input class="span2" id="prependedInput" name="prependedInput" size="16" type="text">
+              </div>
+              <p class="help-block">Here's some help text</p>
             </div>
-            <p class="help-block">Here's some help text</p>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="appendedInput">Appended text</label>
-          <div class="controls">
-            <div class="input-append">
-              <input class="span2" id="appendedInput" name="appendedInput" size="16" type="text">
-              <span class="add-on">.00</span>
+          <div class="control-group">
+            <label class="control-label" for="appendedInput">Appended text</label>
+            <div class="controls">
+              <div class="input-append">
+                <input class="span2" id="appendedInput" name="appendedInput" size="16" type="text">
+                <span class="add-on">.00</span>
+              </div>
+              <p class="help-block">Here's more help text</p>
             </div>
-            <p class="help-block">Here's more help text</p>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
-          <div class="controls">
-            <label class="checkbox inline">
-              <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
-            </label>
-            <label class="checkbox inline">
-              <input type="checkbox" name="inlineCheckbox1" value="option1"> 2
-            </label>
-            <label class="checkbox inline">
-              <input type="checkbox" name="inlineCheckbox1" value="option1"> 3
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
+            <div class="controls">
+              <label class="checkbox inline">
+                <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
+              </label>
+              <label class="checkbox inline">
+                <input type="checkbox" name="inlineCheckbox1" value="option1"> 2
+              </label>
+              <label class="checkbox inline">
+                <input type="checkbox" name="inlineCheckbox1" value="option1"> 3
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckboxes" value="option1">
-              Option one is this and that&mdash;be sure to include why it’s great
-            </label>
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckboxes" value="option2">
-              Option two can also be checked and included in form results
-            </label>
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckboxes" value="option3">
-              Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
-            </label>
-            <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+          <div class="control-group">
+            <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
+            <div class="controls">
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckboxes" value="option1">
+                Option one is this and that&mdash;be sure to include why it’s great
+              </label>
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckboxes" value="option2">
+                Option two can also be checked and included in form results
+              </label>
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckboxes" value="option3">
+                Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
+              </label>
+              <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsRadios">Radio buttons</label>
-          <div class="controls">
-            <label class="radio">
-              <input type="radio" checked name="optionsRadios" value="option1">
-              Option one is this and that&mdash;be sure to include why it’s great
-            </label>
-            <label class="radio">
-              <input type="radio" name="optionsRadios" value="option2">
-              Option two can is something else and selecting it will deselect option one
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="optionsRadios">Radio buttons</label>
+            <div class="controls">
+              <label class="radio">
+                <input type="radio" checked name="optionsRadios" value="option1">
+                Option one is this and that&mdash;be sure to include why it’s great
+              </label>
+              <label class="radio">
+                <input type="radio" name="optionsRadios" value="option2">
+                Option two can is something else and selecting it will deselect option one
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn primary">Save changes</button>
-          <button type="reset" class="btn">Cancel</button>
-        </div>
+          <div class="form-actions">
+            <button type="submit" class="btn primary">Save changes</button>
+            <button type="reset" class="btn">Cancel</button>
+          </div>
+        </fieldset>
       </form>
     </div>
     <div class="span4">
index e873b5e740445e9512f0b222c6e32f362e018bc0..d4c31ed4dfbb3448c389a5f31617d96bd511be34 100644 (file)
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
-  <h1>Download and customize Bootstrap</h1>
+  <h1>Download and customize</h1>
   <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
+  <div class="subnav">
+    <ul class="nav pills">
+      <li><a href="#components">1. Select components</a></li>
+      <li><a href="#variables">2. Modify variables</a></li>
+      <li><a href="#plugins">3. Select jQuery plugins</a></li>
+      <li><a href="#download">4. Build and download</a></li>
+    </ul>
+  </div>
 </header>
 
-<div class="download">
+<section class="download" id="components">
   <div class="page-header">
     <a class="pull-right toggle-all" href="#">Toggle all</a>
     <h1>
       <label class="checkbox"><input type="checkbox" value=""> Max-width 1210px</label>
     </div><!-- /span -->
   </div><!-- /row -->
+</section>
 
+<section class="download" id="variables">
   <div class="page-header">
     <a class="pull-right toggle-all" href="#">Reset to defaults</a>
     <h1>
       <input type="text" class="span3" value="#bfe1f2">
     </div><!-- /span -->
   </div><!-- /row -->
+</section>
 
+<section class="download" id="plugins">
   <div class="page-header">
     <a class="pull-right toggle-all" href="#">Toggle all</a>
     <h1>
       <p class="muted">All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
     </div><!-- /span -->
   </div><!-- /row -->
+</section>
 
+<section class="download" id="download">
+  <div class="page-header">
+    <h1>
+      4. Download
+      <small></small>
+    </h1>
+  </div>
   <div class="download-btn">
     <a class="btn xlarge primary" href="#">Build and Download</a>
+    <h4>What's included?</h4>
+    <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
   </div>
-</div><!-- /download -->
+</section><!-- /download -->
 
      <!-- Footer
       ================================================== -->
index 7a85d1138e7482555052de4ae4fa23d94424d54b..cbc0519e5a110e9b9166e2a5264d92512c5fa8da 100644 (file)
   <div class="row">
     <div class="span8">
       <form class="form-horizontal">
-        <legend>{{_i}}Form control states{{/i}}</legend>
-        <div class="control-group">
-          <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
-          <div class="controls">
-            <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
+        <fieldset>
+          <legend>{{_i}}Form control states{{/i}}</legend>
+          <div class="control-group">
+            <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
+            <div class="controls">
+              <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label>
-          <div class="controls">
-            <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
+          <div class="control-group">
+            <label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label>
+            <div class="controls">
+              <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsCheckbox">{{_i}}Disabled checkbox{{/i}}</label>
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckbox" value="option1" disabled>
-              {{_i}}This is a disabled checkbox{{/i}}
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="optionsCheckbox">{{_i}}Disabled checkbox{{/i}}</label>
+            <div class="controls">
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckbox" value="option1" disabled>
+                {{_i}}This is a disabled checkbox{{/i}}
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="control-group warning">
-          <label class="control-label" for="inputError">{{_i}}Input with warning{{/i}}</label>
-          <div class="controls">
-            <input type="text" name="inputError">
-            <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
+          <div class="control-group warning">
+            <label class="control-label" for="inputError">{{_i}}Input with warning{{/i}}</label>
+            <div class="controls">
+              <input type="text" name="inputError">
+              <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
+            </div>
           </div>
-        </div>
-        <div class="control-group error">
-          <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
-          <div class="controls">
-            <input type="text" name="inputError">
-            <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
+          <div class="control-group error">
+            <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
+            <div class="controls">
+              <input type="text" name="inputError">
+              <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
+            </div>
           </div>
-        </div>
-        <div class="control-group success">
-          <label class="control-label" for="inputError">{{_i}}Input with success{{/i}}</label>
-          <div class="controls">
-            <input type="text" name="inputError">
-            <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+          <div class="control-group success">
+            <label class="control-label" for="inputError">{{_i}}Input with success{{/i}}</label>
+            <div class="controls">
+              <input type="text" name="inputError">
+              <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+            </div>
           </div>
-        </div>
-        <div class="control-group success">
-          <label class="control-label" for="selectError">{{_i}}Select with success{{/i}}</label>
-          <div class="controls">
-            <select name="selectError">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-            <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+          <div class="control-group success">
+            <label class="control-label" for="selectError">{{_i}}Select with success{{/i}}</label>
+            <div class="controls">
+              <select name="selectError">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+            </div>
           </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
-          <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
-        </div>
+          <div class="form-actions">
+            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+          </div>
+        </fieldset>
       </form>
     </div>
     <div class="span4">
   <div class="row">
     <div class="span8">
       <form class="form-horizontal">
-        <legend>{{_i}}Extending form controls{{/i}}</legend>
-        <div class="control-group">
-          <label class="control-label">{{_i}}Form sizes{{/i}}</label>
-          <div class="controls docs-input-sizes">
-            <input class="span2" type="text" name="" placeholder=".span2">
-            <input class="span3" type="text" name="" placeholder=".span3">
-            <input class="span4" type="text" name="" placeholder=".span4">
-            <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
+        <fieldset>
+          <legend>{{_i}}Extending form controls{{/i}}</legend>
+          <div class="control-group">
+            <label class="control-label">{{_i}}Form sizes{{/i}}</label>
+            <div class="controls docs-input-sizes">
+              <input class="span2" type="text" name="" placeholder=".span2">
+              <input class="span3" type="text" name="" placeholder=".span3">
+              <input class="span4" type="text" name="" placeholder=".span4">
+              <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
-          <div class="controls">
-            <div class="input-prepend">
-              <span class="add-on">@</span>
-              <input class="span2" id="prependedInput" name="prependedInput" size="16" type="text">
+          <div class="control-group">
+            <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
+            <div class="controls">
+              <div class="input-prepend">
+                <span class="add-on">@</span>
+                <input class="span2" id="prependedInput" name="prependedInput" size="16" type="text">
+              </div>
+              <p class="help-block">{{_i}}Here's some help text{{/i}}</p>
             </div>
-            <p class="help-block">{{_i}}Here's some help text{{/i}}</p>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
-          <div class="controls">
-            <div class="input-append">
-              <input class="span2" id="appendedInput" name="appendedInput" size="16" type="text">
-              <span class="add-on">.00</span>
+          <div class="control-group">
+            <label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
+            <div class="controls">
+              <div class="input-append">
+                <input class="span2" id="appendedInput" name="appendedInput" size="16" type="text">
+                <span class="add-on">.00</span>
+              </div>
+              <p class="help-block">{{_i}}Here's more help text{{/i}}</p>
             </div>
-            <p class="help-block">{{_i}}Here's more help text{{/i}}</p>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</label>
-          <div class="controls">
-            <label class="checkbox inline">
-              <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
-            </label>
-            <label class="checkbox inline">
-              <input type="checkbox" name="inlineCheckbox1" value="option1"> 2
-            </label>
-            <label class="checkbox inline">
-              <input type="checkbox" name="inlineCheckbox1" value="option1"> 3
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</label>
+            <div class="controls">
+              <label class="checkbox inline">
+                <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
+              </label>
+              <label class="checkbox inline">
+                <input type="checkbox" name="inlineCheckbox1" value="option1"> 2
+              </label>
+              <label class="checkbox inline">
+                <input type="checkbox" name="inlineCheckbox1" value="option1"> 3
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsCheckboxes">{{_i}}Checkboxes{{/i}}</label>
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckboxes" value="option1">
-              {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
-            </label>
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckboxes" value="option2">
-              {{_i}}Option two can also be checked and included in form results{{/i}}
-            </label>
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckboxes" value="option3">
-              {{_i}}Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results{{/i}}
-            </label>
-            <p class="help-text">{{_i}}<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.{{/i}}</p>
+          <div class="control-group">
+            <label class="control-label" for="optionsCheckboxes">{{_i}}Checkboxes{{/i}}</label>
+            <div class="controls">
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckboxes" value="option1">
+                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
+              </label>
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckboxes" value="option2">
+                {{_i}}Option two can also be checked and included in form results{{/i}}
+              </label>
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckboxes" value="option3">
+                {{_i}}Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results{{/i}}
+              </label>
+              <p class="help-text">{{_i}}<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.{{/i}}</p>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsRadios">{{_i}}Radio buttons{{/i}}</label>
-          <div class="controls">
-            <label class="radio">
-              <input type="radio" checked name="optionsRadios" value="option1">
-              {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
-            </label>
-            <label class="radio">
-              <input type="radio" name="optionsRadios" value="option2">
-              {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="optionsRadios">{{_i}}Radio buttons{{/i}}</label>
+            <div class="controls">
+              <label class="radio">
+                <input type="radio" checked name="optionsRadios" value="option1">
+                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
+              </label>
+              <label class="radio">
+                <input type="radio" name="optionsRadios" value="option2">
+                {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
-          <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
-        </div>
+          <div class="form-actions">
+            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+          </div>
+        </fieldset>
       </form>
     </div>
     <div class="span4">
index 453bf11418bc0210b9f9f2b3e6b9b578809caea4..216098bad049a439a9b34987ede619f517280fce 100644 (file)
@@ -5,11 +5,19 @@
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
-  <h1>{{_i}}Download and customize Bootstrap{{/i}}</h1>
+  <h1>{{_i}}Download and customize{{/i}}</h1>
   <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
+  <div class="subnav">
+    <ul class="nav pills">
+      <li><a href="#components">{{_i}}1. Select components{{/i}}</a></li>
+      <li><a href="#variables">{{_i}}2. Modify variables{{/i}}</a></li>
+      <li><a href="#plugins">{{_i}}3. Select jQuery plugins{{/i}}</a></li>
+      <li><a href="#download">{{_i}}4. Build and download{{/i}}</a></li>
+    </ul>
+  </div>
 </header>
 
-<div class="download">
+<section class="download" id="components">
   <div class="page-header">
     <a class="pull-right toggle-all" href="#">Toggle all</a>
     <h1>
@@ -67,7 +75,9 @@
       <label class="checkbox"><input type="checkbox" value=""> Max-width 1210px</label>
     </div><!-- /span -->
   </div><!-- /row -->
+</section>
 
+<section class="download" id="variables">
   <div class="page-header">
     <a class="pull-right toggle-all" href="#">Reset to defaults</a>
     <h1>
       <input type="text" class="span3" value="#bfe1f2">
     </div><!-- /span -->
   </div><!-- /row -->
+</section>
 
+<section class="download" id="plugins">
   <div class="page-header">
     <a class="pull-right toggle-all" href="#">Toggle all</a>
     <h1>
       <p class="muted">{{_i}}All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
     </div><!-- /span -->
   </div><!-- /row -->
+</section>
 
+<section class="download" id="download">
+  <div class="page-header">
+    <h1>
+      4. Download
+      <small></small>
+    </h1>
+  </div>
   <div class="download-btn">
     <a class="btn xlarge primary" href="#">Build and Download</a>
+    <h4>What's included?</h4>
+    <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
   </div>
-</div><!-- /download -->
+</section><!-- /download -->