Skip to content
GitLab
Commit de7cc0c1 authored by Mark Otto's avatar Mark Otto
Browse files

don't repeat ourselves in the disabled responsiveness stuff

parent 2275277b
Hide whitespace changes
Inline Side-by-side
Showing
with 6 additions and 43 deletions
+6 -43
getting-started.html
+ 6
- 43
View file @ de7cc0c1
...@@ -277,53 +277,16 @@ bootstrap/ ...@@ -277,53 +277,16 @@ bootstrap/
<ol> <ol>
<li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li> <li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</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>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> <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> </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> <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>&lt;-- 1. --&gt;</code>.</p> <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>
{% highlight html %} <p>
<!DOCTYPE html> <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
<html> </p>
<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 %}
</div> </div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment