aboutsummaryrefslogtreecommitdiff
path: root/getting-started.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-08-06 18:29:54 -0700
committerMark Otto <[email protected]>2013-08-06 18:29:54 -0700
commit402dbfb6171e18aa44e19429e796169f02b0adf7 (patch)
treeaeb0cef7cc1b04988307a0ef79b07fbe2d7d197c /getting-started.html
parent7e19b6b02ccd5417a6c2d3d418c08219773f1112 (diff)
parent41bdd1a4823feb8b46b2fccfeec3e9c5057a0665 (diff)
downloadbootstrap-402dbfb6171e18aa44e19429e796169f02b0adf7.tar.xz
bootstrap-402dbfb6171e18aa44e19429e796169f02b0adf7.zip
Merge branch '3.0.0-wip' into bs3_theme
Conflicts: dist/css/bootstrap.min.css
Diffstat (limited to 'getting-started.html')
-rw-r--r--getting-started.html68
1 files changed, 59 insertions, 9 deletions
diff --git a/getting-started.html b/getting-started.html
index 0b4f6a959..38b6f4ed4 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -17,9 +17,7 @@ base_url: "../"
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
- <p><a class="btn btn-large btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-
- <hr>
+ <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<h3 id="download-options">More download options</h3>
<div class="bs-docs-dl-options">
@@ -38,8 +36,6 @@ base_url: "../"
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>
- <hr>
-
<h3 id="download-cdn">Use the Bootstrap CDN</h3>
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %}
@@ -77,7 +73,7 @@ bootstrap/
│ ├── bootstrap.min.js
{% endhighlight %}
- <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
+ <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>).</p>
<div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
@@ -112,7 +108,7 @@ bootstrap/
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
- <!-- Optionally enable responsive features in IE8 -->
+ <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
@@ -124,11 +120,11 @@ bootstrap/
- <!-- Browser compatibility
+ <!-- Browser support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
- <h1 id="browsers">Browser compatibility</h1>
+ <h1 id="browsers">Browser support</h1>
</div>
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
@@ -153,10 +149,64 @@ bootstrap/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
+
+ <h3>Windows Phone 8 and Internet Explorer 10</h3>
+ <p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
+{% highlight css %}
+@-webkit-viewport { width: device-width; }
+@-moz-viewport { width: device-width; }
+@-ms-viewport { width: device-width; }
+@-o-viewport { width: device-width; }
+@viewport { width: device-width; }
+{% endhighlight %}
+
+{% highlight js %}
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+ var msViewportStyle = document.createElement("style");
+ msViewportStyle.appendChild(
+ document.createTextNode(
+ "@-ms-viewport{width:auto!important}"
+ )
+ );
+ document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
+}
+{% endhighlight %}
+ <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
+ </div>
+
+
+
+ <!-- Third party support
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="third-parties">Third party support</h1>
+ </div>
+ <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid potential issues in your projects.</p>
+
+ <h3>Google Maps</h3>
+ <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
+{% highlight css %}
+/* Fix Google Maps canvas
+ *
+ * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
+ * global `box-sizing` changes. You may optionally need to reset the `max-width`
+ * on images in case you've applied that anywhere else. (That shouldn't be as
+ * necessary with Bootstrap 3 though as that behavior is relegated to the
+ * `.img-responsive` class.)
+ */
+
+.google-map-canvas,
+.google-map-canvas * { .box-sizing(content-box); }
+
+/* Optional responsive image override */
+img { max-width: none; }
+{% endhighlight %}
</div>
+
<!-- License FAQs
================================================== -->
<div class="bs-docs-section">