diff options
| author | Mark Otto <[email protected]> | 2013-08-18 23:58:31 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-18 23:58:31 -0700 |
| commit | de7cc0c17f2b4c01c05d2add7d55e20575605629 (patch) | |
| tree | 346e4683cc70424a28f68b4c280466d5b8be1af9 | |
| parent | 2275277be405bf112424cc061f76a940127fd0a5 (diff) | |
| download | bootstrap-de7cc0c17f2b4c01c05d2add7d55e20575605629.tar.xz bootstrap-de7cc0c17f2b4c01c05d2add7d55e20575605629.zip | |
don't repeat ourselves in the disabled responsiveness stuff
| -rw-r--r-- | getting-started.html | 49 |
1 files changed, 6 insertions, 43 deletions
diff --git a/getting-started.html b/getting-started.html index 39377dd2d..1bc23d339 100644 --- a/getting-started.html +++ b/getting-started.html @@ -277,53 +277,16 @@ bootstrap/ <ol> <li>Remove (or just don't add) the viewport <code><meta></code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li> <li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>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>If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).</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> + <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> <h3>Bootstrap template with disabled responsive</h3> - <p>We've taken the above steps and applied them to a basic template here. Note the steps above are called out in comments here, e.g. <code><-- 1. --></code>.</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: none !important; - width: 970px; - } - </style> - </head> - <body> - - <h1>Hello, world!</h1> - - <!-- 3. When using grid columns, use the `.col-xs-*` classes --> - <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> - - <!-- 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 %} + <p>We've taken the above steps and applied them to an example. Read it's source code to see the specific changes called out.</p> + <p> + <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a> + </p> </div> |