diff options
| author | Mark Otto <[email protected]> | 2014-07-12 01:52:44 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-12 01:52:44 -0700 |
| commit | 7c0c51c9d66d20da3c8d607ff94fd27c5f8e0ec0 (patch) | |
| tree | 5424e5d5f9f5dcacd3e1de3444993f1b7bbe9fc6 /docs/getting-started | |
| parent | a2c5febdb21f254d09c6eb33c84536b830adb054 (diff) | |
| download | bootstrap-7c0c51c9d66d20da3c8d607ff94fd27c5f8e0ec0.tar.xz bootstrap-7c0c51c9d66d20da3c8d607ff94fd27c5f8e0ec0.zip | |
move remaining getting started files to new folder
Diffstat (limited to 'docs/getting-started')
| -rw-r--r-- | docs/getting-started/disable-responsive.md | 22 | ||||
| -rw-r--r-- | docs/getting-started/template.md | 36 | ||||
| -rw-r--r-- | docs/getting-started/third-party-support.md | 51 |
3 files changed, 109 insertions, 0 deletions
diff --git a/docs/getting-started/disable-responsive.md b/docs/getting-started/disable-responsive.md new file mode 100644 index 000000000..d154e204d --- /dev/null +++ b/docs/getting-started/disable-responsive.md @@ -0,0 +1,22 @@ +<div class="bs-docs-section"> + <h1 id="disable-responsive" class="page-header">Disabling responsiveness</h1> + + <p class="lead">Bootstrap automatically adapts your pages for various screen sizes. + Here's how to disable this feature so your page works like in <a href="../examples/non-responsive/">this non-responsive example</a>.</p> + + <h3>Steps to disable page responsiveness</h3> + <ol> + <li>Omit the viewport <code><meta></code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li> + <li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</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, remove all navbar collapsing and expanding behavior.</li> + <li>For grid layouts, use <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 to all resolutions.</li> + </ol> + <p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). + This disables the "mobile site" aspects of Bootstrap.</p> + + <h3>Bootstrap template with responsiveness disabled</h3> + <p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p> + <p> + <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a> + </p> +</div> diff --git a/docs/getting-started/template.md b/docs/getting-started/template.md new file mode 100644 index 000000000..3952621a6 --- /dev/null +++ b/docs/getting-started/template.md @@ -0,0 +1,36 @@ +<div class="bs-docs-section"> + <h1 id="template" class="page-header">Basic template</h1> + + <p class="lead">Start with this basic HTML template, or modify <a href="#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p> + + <p>Copy the HTML below to begin working with a minimal Bootstrap document.</p> +{% highlight html %} +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Bootstrap 101 Template</title> + + <!-- Bootstrap --> + <link href="css/bootstrap.min.css" rel="stylesheet"> + + <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + </head> + <body> + <h1>Hello, world!</h1> + + <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <!-- Include all compiled plugins (below), or include individual files as needed --> + <script src="js/bootstrap.min.js"></script> + </body> +</html> +{% endhighlight %} +</div> diff --git a/docs/getting-started/third-party-support.md b/docs/getting-started/third-party-support.md new file mode 100644 index 000000000..77d869c53 --- /dev/null +++ b/docs/getting-started/third-party-support.md @@ -0,0 +1,51 @@ +<div class="bs-docs-section"> + <h1 id="third-parties" class="page-header">Third party support</h1> + <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p> + + <h3 id="third-box-sizing">Box-sizing</h3> + <p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p> + <p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p> +{% highlight scss %} +/* Box-sizing resets + * + * Reset individual elements or override regions to avoid conflicts due to + * global box model settings of Bootstrap. Two options, individual overrides and + * region resets, are available as plain CSS and uncompiled Less formats. + */ + +/* Option 1A: Override a single element's box model via CSS */ +.element { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */ +.element { + .box-sizing(content-box); +} + +/* Option 2A: Reset an entire region via CSS */ +.reset-box-sizing, +.reset-box-sizing *, +.reset-box-sizing *:before, +.reset-box-sizing *:after { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +/* Option 2B: Reset an entire region with a custom Less mixin */ +.reset-box-sizing { + &, + *, + *:before, + *:after { + .box-sizing(content-box); + } +} +.element { + .reset-box-sizing(); +} +{% endhighlight %} +</div> |