From 6c765ac8211536e9701e996416b8a5296590d5fd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:02:38 -0700 Subject: add nonresponsive template to examples --- getting-started.html | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index ea5f96e61..b83ec90dd 100644 --- a/getting-started.html +++ b/getting-started.html @@ -234,6 +234,13 @@ bootstrap/

Carousel

Customize the navbar and carousel, then add some new components.

+
+ + + +

Non-responsive Bootstrap

+

Easily disable the responsiveness of Bootstrap per our docs.

+
-- cgit v1.2.3 From 4f97df8aa42d2609efd52ea21f1e84124afbe39d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:07:53 -0700 Subject: update non-responsive docs and example to really disable it --- getting-started.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index b83ec90dd..68dfedab4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -260,7 +260,7 @@ bootstrap/

To disable responsive features, follow these steps. See it in action in the modified template below.

  1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
  2. -
  3. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need !important.
  4. +
  5. Remove the max-width on the .container for all grid tiers with .container { max-width: none !important; } and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  6. For grid layouts, make use of .col-xs-* 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.

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.

@@ -280,7 +280,10 @@ bootstrap/ -- cgit v1.2.3 From 27424ee42287f5047345fc8d54c55eedcbc3c172 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 17 Aug 2013 17:26:54 -0700 Subject: improve grammar in "Alternate customization methods" docs --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 68dfedab4..5da537393 100644 --- a/getting-started.html +++ b/getting-started.html @@ -556,7 +556,7 @@ img { max-width: none; }

Alternate customization methods

-

While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither options are documented here.

+

While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither of those options are documented here.

Removing potential bloat

-- cgit v1.2.3 From 50b9c7339a25265f42130907ca33684e74126a2a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 17 Aug 2013 17:38:53 -0700 Subject: comma & in "Modals and mobile devices" docs --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 5da537393..6c3912e98 100644 --- a/getting-started.html +++ b/getting-started.html @@ -375,7 +375,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

Modals and mobile devices

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

-

Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this including transforming your elements to position absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

+

Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this, including transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

-- cgit v1.2.3 From cc3077ac17eac65837b81ec0d289c3913383c9a0 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 17 Aug 2013 17:41:47 -0700 Subject: improve grammar in "Disabling responsiveness" docs --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 6c3912e98..fda396a9e 100644 --- a/getting-started.html +++ b/getting-started.html @@ -254,7 +254,7 @@ bootstrap/ -

Don't want your site or application to be scale on different device? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

+

Don't want your site or application to be scaled on different devices? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

Steps to disable responsive views

To disable responsive features, follow these steps. See it in action in the modified template below.

-- cgit v1.2.3 From c56a749323836b7e0b7401d41de1d0c68a7cb7a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 18:59:50 -0700 Subject: Finish first pass at and docment Bootstrap v2-ish theme * Adds new "theme" example * Adds new theme.less file to provide all the overrides and additional styles for the theme * theme.less compiles, via Grunt, to two new files to `dist/css`, bootstrap-theme.css and bootstrap-theme.min.css --- getting-started.html | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 5da537393..85555ff02 100644 --- a/getting-started.html +++ b/getting-started.html @@ -241,7 +241,15 @@ bootstrap/

Non-responsive Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

+
+
+ + + +

Bootstrap theme

+

Load the optional Bootstrap theme for a visually enhanced experience.

+
-- cgit v1.2.3 From d9e38312d24dc947ef479539fe2252f29bd1090d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 20:11:18 -0700 Subject: copy edit --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 3c26f719c..31e05f41c 100644 --- a/getting-started.html +++ b/getting-started.html @@ -268,7 +268,7 @@ bootstrap/

To disable responsive features, follow these steps. See it in action in the modified template below.

  1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
  2. -
  3. Remove the max-width on the .container for all grid tiers with .container { max-width: none !important; } and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  4. +
  5. Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  6. For grid layouts, make use of .col-xs-* 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.

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.

-- cgit v1.2.3 From 8d59d8def74ddeec11278a53ce00af1de1b4d4dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 21:01:58 -0700 Subject: sub headings for modals and mobile devices on browser support --- getting-started.html | 2 ++ 1 file changed, 2 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 31e05f41c..91d80d43f 100644 --- a/getting-started.html +++ b/getting-started.html @@ -382,7 +382,9 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

We'll keep an eye on this though and update our code if we have an easy solution.

Modals and mobile devices

+

Overflow and scrolling

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

+

Virtual keyboards

Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this, including transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Browser zooming

-- cgit v1.2.3 From 3e02b0f5d0fd237cf9ccd901b1cfb66cf6f9bcd1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 22:11:21 -0700 Subject: Update docs text a bit --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 91d80d43f..9b80e266d 100644 --- a/getting-started.html +++ b/getting-started.html @@ -262,7 +262,7 @@ bootstrap/ -

Don't want your site or application to be scaled on different devices? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

+

Don't want your site or application to be scaled on different devices? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site. Read below or check out the non-responsive example.

Steps to disable responsive views

To disable responsive features, follow these steps. See it in action in the modified template below.

-- cgit v1.2.3