clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-25 12:37:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

update non-responsive docs and example to really disable it

Browse Source
This commit is contained in:
Mark Otto 2013-08-17 15:07:53 -07:00
parent 6c765ac821
commit 4f97df8aa4
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/non-responsive/index.html
View File

@ -27,7 +27,7 @@
</div> </div>
<h3>What changes</h3> <h3>What changes</h3>
<p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are essentially good to go.</p> <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
<h3>Non-responsive grid system</h3> <h3>Non-responsive grid system</h3>
<div class="row"> <div class="row">

3
examples/non-responsive/non-responsive.css
View File

@ -1,5 +1,6 @@
.container { .container {
max-width: 970px; max-width: none !important;
width: 970px;
} }
.col-xs-4 { .col-xs-4 {

7
getting-started.html
View File

@ -260,7 +260,7 @@ bootstrap/
<p>To disable responsive features, follow these steps. See it in action in the modified template below.</p> <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
<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>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li> <li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>.container { 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>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>
@ -280,7 +280,10 @@ bootstrap/
<!-- 2. Add our custom CSS to set the container's fixed width --> <!-- 2. Add our custom CSS to set the container's fixed width -->
<style> <style>
.container { max-width: 940px; } .container {
max-width: none !important;
width: 970px;
}
</style> </style>
</head> </head>
<body> <body>