From 7c0c51c9d66d20da3c8d607ff94fd27c5f8e0ec0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jul 2014 01:52:44 -0700 Subject: move remaining getting started files to new folder --- docs/getting-started/disable-responsive.md | 22 +++++++++++++ docs/getting-started/template.md | 36 ++++++++++++++++++++ docs/getting-started/third-party-support.md | 51 +++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+) create mode 100644 docs/getting-started/disable-responsive.md create mode 100644 docs/getting-started/template.md create mode 100644 docs/getting-started/third-party-support.md (limited to 'docs/getting-started') 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 @@ +
+

Disabling responsiveness

+ +

Bootstrap automatically adapts your pages for various screen sizes. + Here's how to disable this feature so your page works like in this non-responsive example.

+ +

Steps to disable page responsiveness

+
    +
  1. Omit the viewport <meta> mentioned in the CSS docs
    2. +
  2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
    3. +
  3. If using navbars, remove all navbar collapsing and expanding behavior.
    4. +
  4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
    5. +
+

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.

+ +

Bootstrap template with responsiveness disabled

+

We've applied these steps to an example. Read its source code to see the specific changes implemented.

+

+ View non-responsive example +

+
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 @@ +
+

Basic template

+ +

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

+ +

Copy the HTML below to begin working with a minimal Bootstrap document.

+{% highlight html %} + + + + + + + Bootstrap 101 Template + + + + + + + + + +

Hello, world!

+ + + + + + + +{% endhighlight %} +
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 @@ +
+

Third party support

+

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.

+ +

Box-sizing

+

Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to * { box-sizing: border-box; }, a rule which makes it so padding does not affect the final computed width of an element. Learn more about box model and sizing at CSS Tricks.

+

Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).

+{% 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 %} +
-- cgit v1.2.3