From 9361ebe4fdcb8a27468779bf36d6171bae549ecf Mon Sep 17 00:00:00 2001 From: Steven Black Date: Mon, 2 Sep 2013 20:01:36 -0400 Subject: [PATCH] Getting Started page: Simplified and focused the text of the 'Disabling responsiveness' section. --- getting-started.html | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/getting-started.html b/getting-started.html index e8c20e4984..6b85360c5f 100644 --- a/getting-started.html +++ b/getting-started.html @@ -269,20 +269,24 @@ bootstrap/ -

Don't want your site or application to be scaled on different devices? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site. Read below or check out the non-responsive example.

+

Bootstrap automatically adapts your pages for various screen sizes. + Here's how to disable this feature so your page works like in this non-responsive example.

-

Steps to disable responsive views

-

To disable responsive features, follow these steps. See it in action in the modified template below.

+

Steps to disable page responsiveness

    -
  1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
  2. -
  3. Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  4. -
  5. If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).
  6. -
  7. For grid layouts, make use of .col-xs-* 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.
  8. +
  9. Omit the viewport <meta> mentioned in the CSS docs
  10. +
  11. Remove the max-width on the .container for all grids with max-width: none !important; and set a regular + width, for example width: 970px;. Be sure that this comes after the default Bootstrap CSS. + You can optionally avoid the !important with media queries or some selector-fu.
  12. +
  13. If using navbars, remove all navbar collapsing and expanding behavior.
  14. +
  15. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. + Don't worry, the extra-small device grid scales to all resolutions.
-

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.

+

You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). + This disables the "mobile site" aspects of Bootstrap.

-

Bootstrap template with disabled responsive

-

We've taken the above steps and applied them to an example. Read it's source code to see the specific changes called out.

+

Bootstrap template with responsiveness disabled

+

We've applied these steps to an example. Read its source code to see the specific changes implemented.

View non-responsive example