From 149e7efb51a4b8c9e5eb140e3fdf5fc719cde9e4 Mon Sep 17 00:00:00 2001 From: Cyrus Stoller Date: Wed, 4 Dec 2013 00:34:38 -0800 Subject: Add a migration tip for .label to .label-default --- getting-started.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index b65fc497f..bf9ec6cf4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -456,6 +456,10 @@ bootstrap/ .muted .text-muted + + .label + .label .label-default + .text-error .text-danger -- cgit v1.2.3 From 4031f5ee82c2a63b6ae30320aab76083c6a488b5 Mon Sep 17 00:00:00 2001 From: Cyrus Stoller Date: Wed, 4 Dec 2013 01:16:33 -0800 Subject: Add a migration tip for .label-important to .label-danger --- getting-started.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index bf9ec6cf4..18f89adc3 100644 --- a/getting-started.html +++ b/getting-started.html @@ -460,6 +460,10 @@ bootstrap/ .label .label .label-default + + .label-important + .label-danger + .text-error .text-danger -- cgit v1.2.3 From 813a4fafb6e268479e50c8ca4d84fbe2af26adb5 Mon Sep 17 00:00:00 2001 From: Christophe Coevoet Date: Thu, 5 Dec 2013 17:45:22 +0100 Subject: Added the removal of tab-content and tab-pane in the migration guide --- getting-started.html | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 18f89adc3..29a9c6f81 100644 --- a/getting-started.html +++ b/getting-started.html @@ -687,6 +687,16 @@ bootstrap/ .tabs-left .tabs-right .tabs-below N/A + + Pill-based tabbable area + .pill-content + .tab-content + + + Pill-based tabbable area pane + .pill-pane + .tab-pane + Nav lists .nav-list .nav-header -- cgit v1.2.3 From 9edec7ed2193b0ffdf093188b0a63231bd813c8a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 15:57:17 -0800 Subject: Fixes #11756: Mention document mode checking ability in IE comaptibility modes --- getting-started.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 29a9c6f81..4ab2fa181 100644 --- a/getting-started.html +++ b/getting-started.html @@ -805,7 +805,8 @@ bootstrap/ {% highlight html %} {% endhighlight %} -

This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.

+

Confirm the document mode by opening the debugging tools: press F12 and check the "Document Mode".

+

This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

See this StackOverflow question for more information.

Internet Explorer 10 in Windows 8 and Windows Phone 8

-- cgit v1.2.3 From 74408de61901b9bd4b7c1f6632ddebc8d21fb167 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 16:22:00 -0800 Subject: Shorter download text because narrow viewports --- 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 4ab2fa181..f924eb51a 100644 --- a/getting-started.html +++ b/getting-started.html @@ -17,7 +17,7 @@ base_url: "../"

Compiled CSS, JS, and fonts

The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.

-

Download precompiled Bootstrap

+

Download Bootstrap

Additional downloads

-- cgit v1.2.3 From 73bc7d9f12b24ac71eed830ac1c345e890bc27c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 20:51:25 -0800 Subject: Add new template, Dashboard --- getting-started.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index f924eb51a..15d415bac 100644 --- a/getting-started.html +++ b/getting-started.html @@ -261,6 +261,15 @@ bootstrap/

Carousel

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

+
+ + + +

Dashboard

+

Basic structure for a admin dashboard with fixed sidebar and navbar.

+
+
+
@@ -268,8 +277,6 @@ bootstrap/

Non-responsive Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

-
-
-- cgit v1.2.3 From 90cbfc76e48659ac657ab272df9d37f99ca57cd4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 23:23:41 -0800 Subject: Add new template, Cover --- getting-started.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 15d415bac..ba4735a31 100644 --- a/getting-started.html +++ b/getting-started.html @@ -261,6 +261,15 @@ bootstrap/

Carousel

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

+
+ + + +

Cover

+

A one-page template for building simple and beautiful home pages.

+
+
+
@@ -268,8 +277,6 @@ bootstrap/

Dashboard

Basic structure for a admin dashboard with fixed sidebar and navbar.

-
-
@@ -277,6 +284,8 @@ bootstrap/

Non-responsive Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

+
+
-- cgit v1.2.3 From f60b8169c67fd5c79fb026071f9334dcf1e9f636 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 11:33:06 -0800 Subject: finalize blog template --- getting-started.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index ba4735a31..5b88dfbe2 100644 --- a/getting-started.html +++ b/getting-started.html @@ -277,6 +277,15 @@ bootstrap/

Dashboard

Basic structure for a admin dashboard with fixed sidebar and navbar.

+
+ + + +

Blog

+

Simple two-column blog layout with custom navigation, header, and type.

+
+
+
@@ -284,8 +293,6 @@ bootstrap/

Non-responsive Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

-
-
-- cgit v1.2.3 From 61ec569211d6e7b6fc8a93737f86ad8564f163eb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 11:36:16 -0800 Subject: Fixes #11805 with docs mention of navbar --- getting-started.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 5b88dfbe2..be8bdb932 100644 --- a/getting-started.html +++ b/getting-started.html @@ -868,11 +868,11 @@ 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

+

Modals, navbars, 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 that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include 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 or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include 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 a925a0b985281ce34666c9a8a5630ba258904cb5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 12:27:46 -0800 Subject: Browser/device support docs update * Fixes #11055: add mention of select menu styling on Android stock browsers with included optional fix * Update IDs and docs nav to include bookmark links to each section * Add callout to navbar docs about fixed position, inputs, and virtual keyboard --- getting-started.html | 36 ++++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 10 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index be8bdb932..d4b3c8cc1 100644 --- a/getting-started.html +++ b/getting-started.html @@ -753,11 +753,11 @@ bootstrap/ ================================================== -->
-

Browser support

+

Browser and device support

Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

-

Supported browsers

+

Supported browsers

Specifically, we support the latest versions of the following:

  • Chrome (Mac, Windows, iOS, and Android)
    • @@ -768,7 +768,7 @@ bootstrap/

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

-

Internet Explorer 8 and 9

+

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

@@ -811,7 +811,7 @@ bootstrap/

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

-

Internet Explorer 8 and Respond.js

+

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

@@ -820,10 +820,10 @@ bootstrap/

Respond.js and @import

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

-

Internet Explorer 8 and box-sizing

+

Internet Explorer 8 and box-sizing

IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

-

IE Compatibility modes

+

IE Compatibility modes

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

{% highlight html %} @@ -832,7 +832,7 @@ bootstrap/

This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

See this StackOverflow question for more information.

-

Internet Explorer 10 in Windows 8 and Windows Phone 8

+

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

{% highlight css %} @-ms-viewport { width: device-width; } @@ -860,7 +860,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

As a heads up, we include this in the Bootstrap docs as an example.

-

Safari percent rounding

+

Safari percent rounding

As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (see #9282) but you do have some options:

  • Add .pull-right to your last grid column to get the hard-right alignment
    • @@ -868,14 +868,30 @@ 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, navbars, and mobile devices

+

Modals, navbars, and virtual keyboards

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 or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include 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

+

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.

+ +

Android stock browser

+

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

+

Select menus

+

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interfernece with Chrome, Safari, and Mozilla browsers.

+{% highlight html %} + +{% endhighlight %} +

Want to see an example? Check out this JS Bin demo.

+ -- cgit v1.2.3 From ee80b5e1d4d36f37ec0408bbe2af7e4c2e5cb0d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 13:52:56 -0800 Subject: typo --- 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 d4b3c8cc1..c43abe197 100644 --- a/getting-started.html +++ b/getting-started.html @@ -880,7 +880,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menus

-

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interfernece with Chrome, Safari, and Mozilla browsers.

+

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

{% highlight html %}