diff options
| author | Mark Otto <[email protected]> | 2013-08-15 10:50:58 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-15 10:50:58 -0700 |
| commit | e550e113a03d66b13fdf1a352813e78eb27ad408 (patch) | |
| tree | 1df4feece6593973b43b53fdb779e0c79c96511e /getting-started.html | |
| parent | f681c9712d9863a2e94da747725e49b0ff44922f (diff) | |
| download | bootstrap-e550e113a03d66b13fdf1a352813e78eb27ad408.tar.xz bootstrap-e550e113a03d66b13fdf1a352813e78eb27ad408.zip | |
fixes #9586: add documentaton on how to disable the responsiveness of BS3
Diffstat (limited to 'getting-started.html')
| -rw-r--r-- | getting-started.html | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/getting-started.html b/getting-started.html index d0d6a2f28..85d40b387 100644 --- a/getting-started.html +++ b/getting-started.html @@ -125,6 +125,57 @@ bootstrap/ + <!-- Template + ================================================== --> + <div class="bs-docs-section"> + <div class="page-header"> + <h1 id="disable-responsive">Disabling responsiveness</h1> + </div> + <p class="lead">Don't want your site or application to be scale on different device? With a little bit of work you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.</p> + + <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 meta viewport 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 this comes after the default Bootstrap CSS otherwise you'll need <code>!important</code>.</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> + +{% highlight html %} +<!DOCTYPE html> +<html> + <head> + <title>Disabling responsiveness in Bootstrap</title> + + <!-- 1. Note there is no meta tag here --> + + <!-- Load default Bootstrap --> + <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> + + <!-- 2. Add our custom CSS to set the container's fixed width --> + <style> + .container { max-width: 940px; } + </style> + </head> + <body> + + <h1>Hello, world!</h1> + + <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> + <script src="//code.jquery.com/jquery.js"></script> + + <!-- Include all compiled plugins (below), or include individual files as needed --> + <script src="js/bootstrap.min.js"></script> + + <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) --> + <script src="js/respond.js"></script> + </body> +</html> +{% endhighlight %} + </div> + + + <!-- Browser support ================================================== --> <div class="bs-docs-section"> |