rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

don't repeat ourselves in the disabled responsiveness stuff

Browse Source
This commit is contained in:
Mark Otto 2013-08-18 23:58:31 -07:00
parent 2275277be4
commit de7cc0c17f
1 changed files with 6 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
getting-started.html
View File

@ -277,53 +277,16 @@ bootstrap/
<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 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>&lt;-- 1. --&gt;</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>