<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>
projects / thirdparty / bootstrap.git / commitdiff
