diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 345064d4fc13c13c83180306a9b53be4ad39de29..6f9d92ecce90b450ed8bad9fc27482a0ac4d6b2c 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -204,16 +204,14 @@ table {
html {
font-size: 62.5%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (max-device-width: 480px) {
html {
- -webkit-text-size-adjust: none;
- -ms-text-size-adjust: none;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
}
}
@@ -726,6 +724,94 @@ pre code {
box-sizing: border-box;
}
+@media screen and (min-width: 768px) {
+ [class^="span"] {
+ float: left;
+ }
+ .span1 {
+ width: 8.3333333%;
+ }
+ .span2 {
+ width: 16.6666667%;
+ }
+ .span3 {
+ width: 25%;
+ }
+ .span4 {
+ width: 33.3333333%;
+ }
+ .span5 {
+ width: 41.666666667%;
+ }
+ .span6 {
+ width: 50%;
+ }
+ .span7 {
+ width: 58.333333333%;
+ }
+ .span8 {
+ width: 66.666666667%;
+ }
+ .span9 {
+ width: 75%;
+ }
+ .span10 {
+ width: 83.333333333%;
+ }
+ .span11 {
+ width: 91.666666667%;
+ }
+ .offset1 {
+ margin-left: 8.3333333%;
+ }
+ .offset2 {
+ margin-left: 16.6666667%;
+ }
+ .offset3 {
+ margin-left: 25%;
+ }
+ .offset4 {
+ margin-left: 33.3333333%;
+ }
+ .offset5 {
+ margin-left: 41.666666667%;
+ }
+ .offset6 {
+ margin-left: 50%;
+ }
+ .offset7 {
+ margin-left: 58.333333333%;
+ }
+ .offset8 {
+ margin-left: 66.666666667%;
+ }
+ .offset9 {
+ margin-left: 75%;
+ }
+ .offset10 {
+ margin-left: 83.333333333%;
+ }
+ .offset11 {
+ margin-left: 91.666666667%;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .container {
+ max-width: 940px;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .container {
+ max-width: 1170px;
+ }
+ [class^="span"] {
+ padding-right: 15px;
+ padding-left: 15px;
+ }
+}
+
[class*="span"].pull-right {
float: right;
}
@@ -4544,69 +4630,6 @@ a.badge:hover {
position: fixed;
}
-@media screen and (min-width: 768px) {
- [class^="span"] {
- float: left;
- }
- .span1 {
- width: 8.3333333%;
- }
- .span2 {
- width: 16.6666667%;
- }
- .span3 {
- width: 25%;
- }
- .span4 {
- width: 33.3333333%;
- }
- .span5 {
- width: 41.666666667%;
- }
- .span6 {
- width: 50%;
- }
- .span7 {
- width: 58.333333333%;
- }
- .span8 {
- width: 66.666666667%;
- }
- .span9 {
- width: 75%;
- }
- .span10 {
- width: 83.333333333%;
- }
- .span11 {
- width: 91.666666667%;
- }
-}
-
-@media screen and (min-width: 992px) {
- {
- /* body {
- font-size: 1.6rem;
- font-size: 16px;
- }
- */
-
- }
- .container {
- max-width: 940px;
- }
-}
-
-@media screen and (min-width: 1200px) {
- .container {
- max-width: 1170px;
- }
- [class^="span"] {
- padding-right: 15px;
- padding-left: 15px;
- }
-}
-
/*
// Responsive
// -------------------------------------------------------------
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a2ba1776958dd8886b8b5ee526af430fa9750ce2..27744e96d85c6b800e10aad66996b0ae1d50435b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -139,6 +139,9 @@ section > ul li {
/* Special grid styles
-------------------------------------------------- */
+.show-grid {
+ margin-bottom: 15px;
+}
.show-grid [class^="span"] {
padding-top: 10px;
padding-bottom: 10px;
diff --git a/docs/css.html b/docs/css.html
index ac6d98141582a04b2828342a3dc461221634d64e..fe0ab54667da7d2d27b1cc37dbef408798d01c24 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -83,7 +83,7 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
- <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
+ <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global settings</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
@@ -105,6 +105,7 @@
<div class="page-header">
<h1>Global settings</h1>
</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>Requires 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>
@@ -115,6 +116,12 @@
</html>
</pre>
+ <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>To enable proper mobile styles, <strong>add the viewport meta tag</strong> to your <code><head></code>:</p>
+ <pre class="prettyprint linenums"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
+ <p>This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.</p>
+
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
@@ -554,7 +561,7 @@
<h2>Nesting columns</h2>
- <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
+ <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 2d31dd3f64d04d9e5e50831fd5861024d4ef44d3..b2fe366743dda6502d92c0a8a0580d37d619c490 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -15,7 +15,7 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
- <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
+ <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global settings</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
@@ -37,6 +37,7 @@
<div class="page-header">
<h1>Global settings</h1>
</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>Requires 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>
@@ -47,6 +48,12 @@
</html>
</pre>
+ <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>To enable proper mobile styles, <strong>add the viewport meta tag</strong> to your <code><head></code>:</p>
+ <pre class="prettyprint linenums"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
+ <p>This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.</p>
+
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
@@ -494,7 +501,7 @@
<h2>Nesting columns</h2>
- <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
+ <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 3150af6773b554c3949875578e7e37daeeb93852..d6021ae366d68b04929227f8e98c40aad639cf97 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -59,52 +59,6 @@
@import "utilities.less"; // Has to be last to override when necessary
-// Responsive: Tablets and up
-@media screen and (min-width: 768px) {
-
- [class^="span"] {
- float: left;
- }
- .span1 { width: 8.3333333%; }
- .span2 { width: 16.6666667%; }
- .span3 { width: 25%; }
- .span4 { width: 33.3333333%; }
- .span5 { width: 41.666666667%; }
- .span6 { width: 50%; }
- .span7 { width: 58.333333333%; }
- .span8 { width: 66.666666667%; }
- .span9 { width: 75%; }
- .span10 { width: 83.333333333%; }
- .span11 { width: 91.666666667%; }
-
-}
-
-// Responsive: Desktops and up
-@media screen and (min-width: 992px) {
-
-/* body {
- font-size: 1.6rem;
- font-size: 16px;
- }
-*/
- .container {
- max-width: 940px;
- }
-
-}
-
-// Responsive: Large desktops and up
-@media screen and (min-width: 1200px) {
-
- .container {
- max-width: 1170px;
- }
- [class^="span"] {
- padding-left: 15px;
- padding-right: 15px;
- }
-
-}
/*
// Responsive
diff --git a/less/grid.less b/less/grid.less
index b8c1c3beb8b749ebbb0e1c275664dff40450c41c..521e64904a7196669e810072be2a12cc2bf12c30 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -24,6 +24,56 @@
box-sizing: border-box;
}
+// Responsive: Tablets and up
+@media screen and (min-width: 768px) {
+
+ [class^="span"] {
+ float: left;
+ }
+ .span1 { width: 8.3333333%; }
+ .span2 { width: 16.6666667%; }
+ .span3 { width: 25%; }
+ .span4 { width: 33.3333333%; }
+ .span5 { width: 41.666666667%; }
+ .span6 { width: 50%; }
+ .span7 { width: 58.333333333%; }
+ .span8 { width: 66.666666667%; }
+ .span9 { width: 75%; }
+ .span10 { width: 83.333333333%; }
+ .span11 { width: 91.666666667%; }
+
+ .offset1 { margin-left: 8.3333333%; }
+ .offset2 { margin-left: 16.6666667%; }
+ .offset3 { margin-left: 25%; }
+ .offset4 { margin-left: 33.3333333%; }
+ .offset5 { margin-left: 41.666666667%; }
+ .offset6 { margin-left: 50%; }
+ .offset7 { margin-left: 58.333333333%; }
+ .offset8 { margin-left: 66.666666667%; }
+ .offset9 { margin-left: 75%; }
+ .offset10 { margin-left: 83.333333333%; }
+ .offset11 { margin-left: 91.666666667%; }
+
+}
+
+// Responsive: Desktops and up
+@media screen and (min-width: 992px) {
+ .container {
+ max-width: 940px;
+ }
+}
+
+// Responsive: Large desktops and up
+@media screen and (min-width: 1200px) {
+ .container {
+ max-width: 1170px;
+ }
+ [class^="span"] {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+
// Fixed (940px)
// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 2f0189dd6077fed964a77c86681d80accfba79df..3748b00ebfeacc1156173bc97211bdc52e214dff 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -11,15 +11,13 @@ html {
// Touch the Mobile Magicâ„¢
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
}
// Disable iOS/WinMobile font size changes
@media screen and (max-device-width: 480px) {
html {
- -ms-text-size-adjust: none;
- -webkit-text-size-adjust: none;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
}
}