Merge branch '3.0.0-wip' into bs3_homepage

Conflicts: dist/css/bootstrap.min.css getting-started.html
author: Mark Otto <[email protected]> 2013-08-17 14:16:40 -0700
committer: Mark Otto <[email protected]> 2013-08-17 14:16:40 -0700
commit: 441e04c84a8a5dd4f55aad61c35c54aded41cc1d (patch)
tree: 19ffb09d1f884c897f2ea32c39244954eaab02ca /css.html
parent: ffbec23c982de7496743212afb8d75005e52199c (diff)
parent: 1b814ddd0a5768ff8ee85bef28f026e06fbace93 (diff)
download: bootstrap-441e04c84a8a5dd4f55aad61c35c54aded41cc1d.tar.xz
bootstrap-441e04c84a8a5dd4f55aad61c35c54aded41cc1d.zip
1 files changed, 107 insertions, 107 deletions
diff --git a/css.html b/css.html
index 305d9f78c..dd576df06 100644
--- a/css.html
+++ b/css.html
@@ -15,7 +15,7 @@ base_url: "../"
     </div>
     <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
 
-    <h3 id="overview-doctype">HTML5 doctype required</h3>
+    <h3 id="overview-doctype">HTML5 doctype</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>
 {% highlight html %}
 <!DOCTYPE html>
@@ -51,10 +51,10 @@ base_url: "../"
     </ul>
     <p>These styles can be found within <code>scaffolding.less</code>.</p>
 
-    <h3 id="overview-normalize">Normalize reset</h3>
+    <h3 id="overview-normalize">Normalize</h3>
     <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
 
-    <h3 id="overview-container">Centering with container</h3>
+    <h3 id="overview-container">Containers</h3>
     <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
 {% highlight html %}
 <div class="container">
@@ -192,102 +192,102 @@ base_url: "../"
     <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-8">8</div>
-        <div class="col-md-4">4</div>
+        <div class="col-md-8">.col-md-8</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-4">4</div>
-        <div class="col-md-4">4</div>
-        <div class="col-md-4">4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-6">6</div>
-        <div class="col-md-6">6</div>
+        <div class="col-md-6">.col-md-6</div>
+        <div class="col-md-6">.col-md-6</div>
       </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
 </div>
 <div class="row">
-  <div class="col-md-8">8</div>
-  <div class="col-md-4">4</div>
+  <div class="col-md-8">.col-md-8</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-md-4">4</div>
-  <div class="col-md-4">4</div>
-  <div class="col-md-4">4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-md-6">6</div>
-  <div class="col-md-6">6</div>
+  <div class="col-md-6">.col-md-6</div>
+  <div class="col-md-6">.col-md-6</div>
 </div>
 {% endhighlight %}
 
-    <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
+    <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
     <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-xs-12 col-md-8">8</div>
-        <div class="col-xs-6 col-md-4">4</div>
+        <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-xs-6 col-md-4">4</div>
-        <div class="col-xs-6 col-md-4">4</div>
-        <div class="col-xs-6 col-md-4">4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-xs-6 col-md-6">6</div>
-        <div class="col-xs-6 col-md-6">6</div>
+        <div class="col-xs-6">.col-xs-6</div>
+        <div class="col-xs-6">.col-xs-6</div>
       </div>
     </div>
 {% highlight html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
-  <div class="col-xs-12 col-md-8">8</div>
-  <div class="col-xs-6 col-md-4">4</div>
+  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-4">4</div>
-  <div class="col-xs-6 col-md-4">4</div>
-  <div class="col-xs-6 col-md-4">4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 
 <!-- Columns are always 50% wide, on mobile and desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-6">6</div>
-  <div class="col-xs-6 col-md-6">6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
 </div>
 {% endhighlight %}
 
-    <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
+    <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
     <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
@@ -348,28 +348,28 @@ base_url: "../"
     <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-md-4">4</div>
-        <div class="col-md-4 col-md-offset-4">4 offset 4</div>
-      </div><!-- /row -->
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+      </div>
       <div class="row show-grid">
-        <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-        <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-      </div><!-- /row -->
+        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+      </div>
       <div class="row show-grid">
-        <div class="col-md-6 col-md-offset-3">6 offset 3</div>
-      </div><!-- /row -->
+        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+      </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-4">...</div>
-  <div class="col-md-4 col-md-offset-4">...</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
 </div>
 <div class="row">
-  <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-  <div class="col-md-3 col-md-offset-3">3 offset 3</div>
+  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 </div>
 <div class="row">
-  <div class="col-md-6 col-md-offset-3">...</div>
+  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
 </div>
 {% endhighlight %}
 
@@ -378,13 +378,13 @@ base_url: "../"
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
       <div class="col-md-9">
-        Level 1: 9 columns
+        Level 1: .col-md-9
         <div class="row show-grid">
           <div class="col-md-6">
-            Level 2: 6 columns
+            Level 2: .col-md-6
           </div>
           <div class="col-md-6">
-            Level 2: 6 columns
+            Level 2: .col-md-6
           </div>
         </div>
       </div>
@@ -392,13 +392,13 @@ base_url: "../"
 {% highlight html %}
 <div class="row">
   <div class="col-md-9">
-    Level 1: 9 columns
+    Level 1: .col-md-9
     <div class="row">
       <div class="col-md-6">
-        Level 2: 6 columns
+        Level 2: .col-md-6
       </div>
       <div class="col-md-6">
-        Level 2: 6 columns
+        Level 2: .col-md-6
       </div>
     </div>
   </div>
@@ -408,14 +408,14 @@ base_url: "../"
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col-md-9 col-md-push-3">9</div>
-      <div class="col-md-3 col-md-pull-9">3</div>
+      <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+      <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
     </div>
 
 {% highlight html %}
 <div class="row">
-  <div class="col-md-9 col-md-push-3">9</div>
-  <div class="col-md-3 col-md-pull-9">3</div>
+  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
 </div>
 {% endhighlight %}
 
@@ -607,27 +607,27 @@ base_url: "../"
       <table class="table">
         <tbody>
           <tr>
-            <td><h1>Bootstrap heading</h1></td>
+            <td><h1>h1. Bootstrap heading</h1></td>
             <td>Semibold 38px</td>
           </tr>
           <tr>
-            <td><h2>Bootstrap heading</h2></td>
+            <td><h2>h2. Bootstrap heading</h2></td>
             <td>Semibold 32px</td>
           </tr>
           <tr>
-            <td><h3>Bootstrap heading</h3></td>
+            <td><h3>h3. Bootstrap heading</h3></td>
             <td>Semibold 24px</td>
           </tr>
           <tr>
-            <td><h4>Bootstrap heading</h4></td>
+            <td><h4>h4. Bootstrap heading</h4></td>
             <td>Semibold 18px</td>
           </tr>
           <tr>
-            <td><h5>Bootstrap heading</h5></td>
+            <td><h5>h5. Bootstrap heading</h5></td>
             <td>Semibold 14px</td>
           </tr>
           <tr>
-            <td><h6>Bootstrap heading</h6></td>
+            <td><h6>h6. Bootstrap heading</h6></td>
             <td>Semibold 12px</td>
           </tr>
         </tbody>
@@ -1061,10 +1061,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h2>Optional classes</h2>
-    <p>Add any of the following classes to the <code>.table</code> base class.</p>
-
-    <h3 id="tables-striped">Striped</h3>
+    <h2 id="tables-striped">Striped rows</h2>
     <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
     <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
@@ -1108,7 +1105,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-    <h3 id="tables-bordered">Bordered</h3>
+
+    <h2 id="tables-bordered">Bordered table</h2>
     <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
     <div class="bs-example">
       <table class="table table-bordered">
@@ -1152,7 +1150,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-    <h3 id="tables-hover-rows">Hover rows</h3>
+
+    <h2 id="tables-hover-rows">Hover rows</h2>
     <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
     <div class="bs-example">
       <table class="table table-hover">
@@ -1192,7 +1191,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h3 id="tables-condensed">Condensed</h3>
+    <h2 id="tables-condensed">Condensed table</h2>
     <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
     <div class="bs-example">
       <table class="table table-condensed">
@@ -1233,7 +1232,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-    <h2 id="tables-contextual-classes">Contextual table classes</h2>
+    <h2 id="tables-contextual-classes">Contextual classes</h2>
     <p>Use contextual classes to color table rows or individual cells.</p>
     <div class="bs-table-scrollable">
       <table class="table table-bordered table-striped bs-table">
@@ -1406,7 +1405,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h3 id="forms-inline">Inline form</h3>
+    <h2 id="forms-inline">Inline form</h2>
     <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
     <div class="bs-callout bs-callout-danger">
       <h4>Requires custom widths</h4>
@@ -1451,6 +1450,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
+
     <h2 id="forms-horizontal">Horizontal form</h2>
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
     <form class="bs-example form-horizontal">
@@ -1513,7 +1513,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h2 id="forms-controls">Supported form controls</h2>
+    <h2 id="forms-controls">Supported controls</h2>
     <p>Examples of standard form controls supported in an example form layout.</p>
 
     <h3>Inputs</h3>
@@ -1647,8 +1647,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h2 id="forms-controls-static">Static text in horizontal forms</h2>
-    <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
+    <h2 id="forms-controls-static">Static control</h2>
+    <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
     <form class="bs-example form-horizontal">
       <div class="form-group">
         <label class="col-lg-2 control-label">Email</label>
@@ -1681,7 +1681,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h2 id="forms-control-states">Form control states</h2>
+    <h2 id="forms-control-states">Form states</h2>
     <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
 
     <h3 id="forms-input-focus">Input focus</h3>
@@ -1873,7 +1873,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h1 id="buttons">Buttons</h1>
     </div>
 
-    <h2 id="buttons-options">Button options</h2>
+    <h2 id="buttons-options">Options</h2>
     <p>Use any of the available button classes to quickly create a styled button.</p>
     <div class="bs-example">
       <button type="button" class="btn btn-default">Default</button>
@@ -1907,7 +1907,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="btn btn-link">Link</button>
 {% endhighlight %}
 
-    <h2 id="buttons-sizes">Button sizes</h2>
+    <h2 id="buttons-sizes">Sizes</h2>
     <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
     <div class="bs-example">
       <p>
@@ -1997,7 +1997,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
 
-    <h2 id="buttons-tags">Using multiple tags</h2>
+    <h2 id="buttons-tags">Button tags</h2>
     <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
     <form class="bs-example">
       <a class="btn btn-default" href="#">Link</a>
@@ -2070,29 +2070,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3>.pull-left</h3>
-    <p>Float an element left</p>
+    <p>Float an element left with a class. Can also be used as a mixin.</p>
 {% highlight html %}
 <div class="pull-left">...</div>
 {% endhighlight %}
 {% highlight css %}
 .pull-left {
-  float: left;
+  float: left !important;
 }
 {% endhighlight %}
 
     <h3>.pull-right</h3>
-    <p>Float an element right</p>
+    <p>Float an element right with a class. Can also be used as a mixin.</p>
 {% highlight html %}
 <div class="pull-right">...</div>
 {% endhighlight %}
 {% highlight css %}
 .pull-right {
-  float: right;
+  float: right !important;
 }
 {% endhighlight %}
 
     <h3>.clearfix</h3>
-    <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+    <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
 {% highlight html %}
 <div class="clearfix">...</div>
 {% endhighlight %}
author	Mark Otto <[email protected]>	2013-08-17 14:16:40 -0700
committer	Mark Otto <[email protected]>	2013-08-17 14:16:40 -0700
commit	441e04c84a8a5dd4f55aad61c35c54aded41cc1d (patch)
tree	19ffb09d1f884c897f2ea32c39244954eaab02ca /css.html
parent	ffbec23c982de7496743212afb8d75005e52199c (diff)
parent	1b814ddd0a5768ff8ee85bef28f026e06fbace93 (diff)
download	bootstrap-441e04c84a8a5dd4f55aad61c35c54aded41cc1d.tar.xz bootstrap-441e04c84a8a5dd4f55aad61c35c54aded41cc1d.zip