aboutsummaryrefslogtreecommitdiff
path: root/docs/getting-started.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-03-06 21:32:52 -0800
committerMark Otto <[email protected]>2014-03-06 21:32:52 -0800
commitc8614c0f15f0ce78426c6403e57aff22c3ce2beb (patch)
tree673d1a347374a8bf53a127c050dbc57762af3782 /docs/getting-started.html
parentd1a7271ea1272e0f9775d49e6a84ee49819e0094 (diff)
parentfab10b643eb1a2038fb31305f0b038b7a9a8554d (diff)
downloadbootstrap-c8614c0f15f0ce78426c6403e57aff22c3ce2beb.tar.xz
bootstrap-c8614c0f15f0ce78426c6403e57aff22c3ce2beb.zip
Merge branch 'master' into pr/12490
Conflicts: less/list-group.less
Diffstat (limited to 'docs/getting-started.html')
-rw-r--r--docs/getting-started.html29
1 files changed, 16 insertions, 13 deletions
diff --git a/docs/getting-started.html b/docs/getting-started.html
index ec677b15e..163a7ffa6 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -30,6 +30,7 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
</div>
</div>
+ <p class="muted">Currently v{{ site.current_version }}.</p>
<h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
@@ -136,7 +137,7 @@ bootstrap/
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://code.jquery.com/jquery.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
@@ -319,6 +320,7 @@ bootstrap/
<ul>
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
+ <li>For help using Bootstrap, ask on <a href="http://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
</ul>
<p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
@@ -368,7 +370,7 @@ bootstrap/
<p class="lead">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.</p>
<h3 id="support-browsers">Supported browsers</h3>
- <p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms:</p>
+ <p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms. On Windows, <strong>we support Internet Explorer 8-11</strong>. More specific support information is provided below.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
@@ -416,6 +418,7 @@ bootstrap/
</table>
</div>
<p>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.</p>
+ <p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="../browser-bugs/">Wall of browser bugs</a>.</p>
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
<p>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, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
@@ -448,8 +451,6 @@ bootstrap/
<th scope="row"><code>transition</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
</tr>
- </tbody>
- <tbody>
<tr>
<th scope="row"><code>placeholder</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
@@ -483,11 +484,11 @@ bootstrap/
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, 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:</p>
-{% highlight css %}
+{% highlight scss %}
@-ms-viewport { width: device-width; }
{% endhighlight %}
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
-{% highlight css %}
+{% highlight scss %}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@@ -510,7 +511,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<p>As a heads up, we include this in the Bootstrap docs as an example.</p>
<h3 id="support-safari-percentages">Safari percent rounding</h3>
- <p>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 <code>.col-*-1</code> 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 (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
+ <p>As of Safari v7.0.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 <code>.col-*-1</code> 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 (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
<ul>
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
@@ -542,10 +543,10 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
{% highlight html %}
<script>
-var nua = navigator.userAgent;
-var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1);
+var nua = navigator.userAgent
+var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
- $('select.form-control').removeClass('form-control').css('width', '100%');
+ $('select.form-control').removeClass('form-control').css('width', '100%')
}
</script>
{% endhighlight %}
@@ -563,7 +564,7 @@ if (isAndroid) {
<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 css %}
+{% highlight scss %}
/* Box-sizing resets
*
* Reset individual elements or override regions to avoid conflicts due to
@@ -704,7 +705,7 @@ if (isAndroid) {
<p>To implement this, in the custom stylesheet, add the following CSS:</p>
-{% highlight css %}
+{% highlight scss %}
/* Custom button
-------------------------------------------------- */
@@ -765,9 +766,11 @@ if (isAndroid) {
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
<li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li>
+ <li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
<li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
</ul>
- <p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
+ <p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
+ <p>Finished a new or better translation? Open a pull request to add it to our list.</p>
</div>