Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

README.md

@@ -22,6 +22,8 @@ Read the [Getting Started page](http://getbootstrap.com/getting-started/) for in
 
 Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
 
+You may use [this JS Bin](http://jsbin.com/aFacAf/1/edit) as a template for your bug reports.
+
 
 
 ## Documentation

customize.html

@@ -480,16 +480,16 @@ base_url: "../"
     <h3>Media queries breakpoints</h3>
     <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
     <div class="row">
-      <div class="col-lg-6">
-        <label>@screen-xsmall</label>
+      <div class="col-xs-6">
+        <label>@screen-xs</label>
         <input type="text" class="form-control" placeholder="480px">
-        <label>@screen-small</label>
+        <label>@screen-sm</label>
         <input type="text" class="form-control" placeholder="768px">
       </div>
-      <div class="col-lg-6">
-        <label>@screen-medium</label>
+      <div class="col-xs-6">
+        <label>@screen-md</label>
         <input type="text" class="form-control" placeholder="992px">
-        <label>@screen-large</label>
+        <label>@screen-lg</label>
         <input type="text" class="form-control" placeholder="1200px">
       </div>
     </div>
@@ -497,35 +497,41 @@ base_url: "../"
     <h3>Container sizes</h3>
     <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
     <div class="row">
-      <div class="col-lg-6">
+      <div class="col-xs-6 col-sm-4">
         <label>@container-tablet</label>
         <input type="text" class="form-control" placeholder="728px">
-        <p class="help-block">For <code>@screen-small</code> and up.</p>
+        <p class="help-block">For <code>@screen-sm</code> and up.</p>
+      </div>
+      <div class="col-xs-6 col-sm-4">
         <label>@container-desktop</label>
         <input type="text" class="form-control" placeholder="940px">
-        <p class="help-block">For <code>@screen-medium</code> and up.</p>
+        <p class="help-block">For <code>@screen-md</code> and up.</p>
       </div>
-      <div class="col-lg-6">
-        <label>@container-large-desktop</label>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-4">
+        <label>@container-lg-desktop</label>
         <input type="text" class="form-control" placeholder="1170px">
-        <p class="help-block">For <code>@screen-large</code> and up.</p>
+        <p class="help-block">For <code>@screen-lg</code> and up.</p>
       </div>
     </div>
 
     <h3>Grid system</h3>
     <p>Define your custom responsive grid.</p>
     <div class="row">
-      <div class="col-lg-6">
+      <div class="col-xs-6 col-sm-4">
         <label>@grid-columns</label>
         <input type="text" class="form-control" placeholder="12">
         <p class="help-block">Number of columns in the grid.</p>
+      </div>
+      <div class="col-xs-6 col-sm-4">
         <label>@grid-gutter-width</label>
         <input type="text" class="form-control" placeholder="30px">
         <p class="help-block">Padding between columns.</p>
       </div>
-      <div class="col-lg-6">
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-4">
         <label>@grid-float-breakpoint</label>
-        <input type="text" class="form-control" placeholder="@screen-tablet">
+        <input type="text" class="form-control" placeholder="@screen-sm">
         <p class="help-block">Point at which the navbar stops collapsing.</p>
       </div>
     </div>

dist/css/bootstrap.css

@@ -2701,6 +2701,26 @@ a.list-group-item:focus {
   padding: 15px;
 }
 
+.panel-body:before,
+.panel-body:after {
+  display: table;
+  content: " ";
+}
+
+.panel-body:after {
+  clear: both;
+}
+
+.panel-body:before,
+.panel-body:after {
+  display: table;
+  content: " ";
+}
+
+.panel-body:after {
+  clear: both;
+}
+
 .panel > .list-group {
   margin-bottom: 0;
 }

examples/non-responsive/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Note there is no responsive meta tag here -->
+
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
+
+    <title>Non-responsive Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="non-responsive.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <div class="container">
+
+      <div class="page-header">
+        <h1>Non-responsive Bootstrap</h1>
+        <p class="lead">Disable the responsiveness of Bootstrap by fixing the width of the container and using the first grid system tier.</p>
+      </div>
+
+      <h3>What changes</h3>
+      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
+
+      <h3>Non-responsive grid system</h3>
+      <div class="row">
+        <div class="col-xs-4">One third</div>
+        <div class="col-xs-4">One third</div>
+        <div class="col-xs-4">One third</div>
+      </div>
+
+    </div> <!-- /container -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
+  </body>
+</html>

examples/non-responsive/non-responsive.css

+.container {
+  max-width: none !important;
+  width: 970px;
+}
+
+.col-xs-4 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid rgba(86,61,124,.2);
+}

getting-started.html

@@ -234,6 +234,13 @@ bootstrap/
         <h4>Carousel</h4>
         <p>Customize the navbar and carousel, then add some new components.</p>
       </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/non-responsive/">
+          <img src="../examples/screenshots/non-responsive.jpg" alt="">
+        </a>
+        <h4>Non-responsive Bootstrap</h4>
+        <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
+      </div>
 
     </div>
 
@@ -253,7 +260,7 @@ bootstrap/
     <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
     <ol>
       <li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
-      <li>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li>
+      <li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>.container { max-width: none !important; }</code> and set a regular width like <code>width: 970px;</code>. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
       <li>For grid layouts, make use of <code>.col-xs-*</code> classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.</li>
     </ol>
     <p>You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.</p>
@@ -273,7 +280,10 @@ bootstrap/
 
     <!-- 2. Add our custom CSS to set the container's fixed width -->
     <style>
-      .container { max-width: 940px; }
+      .container {
+        max-width: none !important;
+        width: 970px;
+      }
     </style>
   </head>
   <body>

less/grid.less

@@ -272,9 +272,9 @@
 // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
 // it's full-width.
 
-@media (min-width: @screen-large-desktop) {
+@media (min-width: @screen-lg-desktop) {
   .container {
-    max-width: @container-large-desktop;
+    max-width: @container-lg-desktop;
   }
 
   .col-lg-1,

less/mixins.less

@@ -558,7 +558,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -566,17 +566,17 @@
 
 // Generate the small column offsets
 .make-sm-column-offset(@columns) {
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-push(@columns) {
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-pull(@columns) {
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -591,7 +591,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -599,17 +599,17 @@
 
 // Generate the large column offsets
 .make-md-column-offset(@columns) {
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-push(@columns) {
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-pull(@columns) {
-  @media (min-width: @screen-medium) {
+  @media (min-width: @screen-md) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -624,7 +624,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -632,17 +632,17 @@
 
 // Generate the large column offsets
 .make-lg-column-offset(@columns) {
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-push(@columns) {
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-pull(@columns) {
-  @media (min-width: @screen-large) {
+  @media (min-width: @screen-lg) {
     right: percentage((@columns / @grid-columns));
   }
 }

less/navbar.less

@@ -216,7 +216,7 @@
     }
   }
 
-  @media (max-width: @screen-phone-max) {
+  @media (max-width: @screen-xs-max) {
     // Dropdowns get custom display when collapsed
     .open .dropdown-menu {
       position: static;
@@ -311,7 +311,7 @@
   .form-inline();
 
   .form-group {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       margin-bottom: 5px;
     }
   }
@@ -512,7 +512,7 @@
       }
     }
 
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {

less/navs.less

@@ -162,7 +162,7 @@
     }
   }
 
-  @media (min-width: @screen-small) {
+  @media (min-width: @screen-sm) {
     > li {
       display: table-cell;
       width: 1%;

less/panels.less

@@ -15,6 +15,7 @@
 // Panel contents
 .panel-body {
   padding: 15px;
+  .clearfix();
 }
 
 // List groups in panels

less/responsive-utilities.less

@@ -37,98 +37,98 @@
 
 .visible-xs {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
 .visible-sm {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
 .visible-md {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }
 .visible-lg {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 
 .hidden-xs {
   .responsive-invisibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 .hidden-sm {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 .hidden-md {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 .hidden-lg {
   .responsive-visibility();
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }

less/variables.less

@@ -193,26 +193,25 @@
 // --------------------------------------------------
 
 // Extra small screen / phone
-@screen-xsmall:              480px;
-@screen-phone:               @screen-xsmall;
+@screen-xs:                  480px;
+@screen-phone:               @screen-xs;
 
 // Small screen / tablet
-@screen-small:               768px;
-@screen-tablet:              @screen-small;
+@screen-sm:                  768px;
+@screen-tablet:              @screen-sm;
 
 // Medium screen / desktop
-@screen-medium:              992px;
-@screen-desktop:             @screen-medium;
+@screen-md:                  992px;
+@screen-desktop:             @screen-md;
 
 // Large screen / wide desktop
-@screen-large:               1200px;
-@screen-large-desktop:       @screen-large;
+@screen-lg:                  1200px;
+@screen-lg-desktop:          @screen-lg;
 
 // So media queries don't overlap when required, provide a maximum
-@screen-phone-max:           (@screen-small - 1);
-@screen-small-max:           (@screen-medium - 1);
-@screen-tablet-max:          (@screen-desktop - 1);
-@screen-desktop-max:         (@screen-large-desktop - 1);
+@screen-xs-max:              (@screen-sm - 1);
+@screen-sm-max:              (@screen-md - 1);
+@screen-md-max:              (@screen-lg - 1);
 
 
 // Grid system
@@ -600,10 +599,10 @@
 // --------------------------------------------------
 
 // Small screen / tablet
-@container-tablet:          ((720px + @grid-gutter-width));
+@container-tablet:            ((720px + @grid-gutter-width));
 
 // Medium screen / desktop
-@container-desktop:         ((940px + @grid-gutter-width));
+@container-desktop:           ((940px + @grid-gutter-width));
 
 // Large screen / wide desktop
-@container-large-desktop:   ((1140px + @grid-gutter-width));
+@container-lg-desktop:        ((1140px + @grid-gutter-width));