diff options
Diffstat (limited to 'docs/_includes/getting-started')
| -rw-r--r-- | docs/_includes/getting-started/browser-device-support.html | 25 | ||||
| -rw-r--r-- | docs/_includes/getting-started/download.html | 8 | ||||
| -rw-r--r-- | docs/_includes/getting-started/examples.html | 4 | ||||
| -rw-r--r-- | docs/_includes/getting-started/grunt.html | 32 | ||||
| -rw-r--r-- | docs/_includes/getting-started/template.html | 6 | ||||
| -rw-r--r-- | docs/_includes/getting-started/translations.html | 10 |
6 files changed, 59 insertions, 26 deletions
diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html index 3e1dd3e66..0c7c1a4a9 100644 --- a/docs/_includes/getting-started/browser-device-support.html +++ b/docs/_includes/getting-started/browser-device-support.html @@ -20,7 +20,7 @@ <tr> <th>Android</th> <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> + <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td> <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> <td class="text-muted">N/A</td> @@ -106,13 +106,16 @@ <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3> <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p> + <h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3> + <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p> + <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3> <p>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 <code><meta></code> tag in your pages:</p> {% highlight html %} <meta http-equiv="X-UA-Compatible" content="IE=edge"> {% endhighlight %} <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p> - <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> + <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> <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 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3> @@ -141,7 +144,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { } {% 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> - <p>As a heads up, we include this in the Bootstrap docs as an example.</p> + <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p> <h3 id="support-safari-percentages">Safari percent rounding</h3> <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> @@ -155,7 +158,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h4>Overflow and scrolling</h4> <p>Support for <code>overflow: hidden</code> on the <code><body></code> 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 <code><body></code> content will begin to scroll.</p> <h4>Virtual keyboards</h4> - <p>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 <code>position: absolute</code> 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.</p> + <p>Also, note that if you're using a fixed navbar or using inputs within a 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 <code>position: absolute</code> 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.</p> <h4>Navbar Dropdowns</h4> <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p> @@ -173,14 +176,16 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h3 id="support-android-stock-browser">Android stock browser</h3> <p>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.</p> <h4>Select menus</h4> - <p>On <code><select></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><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p> + <p>On <code><select></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. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code><select></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) -if (isAndroid) { - $('select.form-control').removeClass('form-control').css('width', '100%') -} +$(function () { + 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%') + } +}) </script> {% endhighlight %} <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p> diff --git a/docs/_includes/getting-started/download.html b/docs/_includes/getting-started/download.html index e3adffd8b..bb0537796 100644 --- a/docs/_includes/getting-started/download.html +++ b/docs/_includes/getting-started/download.html @@ -8,21 +8,21 @@ <h3 id="download-bootstrap">Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> - <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a> + <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a> </p> </div> <div class="col-sm-4"> <h3 id="download-source">Source code</h3> - <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p> + <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p> <p> - <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a> + <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> </p> </div> <div class="col-sm-4"> <h3 id="download-sass">Sass</h3> <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> - <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> + <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a> </p> </div> </div> diff --git a/docs/_includes/getting-started/examples.html b/docs/_includes/getting-started/examples.html index e6aed9bee..b1739f1d7 100644 --- a/docs/_includes/getting-started/examples.html +++ b/docs/_includes/getting-started/examples.html @@ -1,7 +1,7 @@ <div class="bs-docs-section"> <h1 id="examples" class="page-header">Examples</h1> - <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p> + <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p> <h3 id="examples-framework">Using the framework</h3> <div class="row bs-examples"> @@ -119,7 +119,7 @@ <img src="../examples/screenshots/justified-nav.jpg" alt=""> </a> <h4>Justified nav</h4> - <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p> + <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p> </div> <div class="clearfix visible-xs"></div> diff --git a/docs/_includes/getting-started/grunt.html b/docs/_includes/getting-started/grunt.html new file mode 100644 index 000000000..93fa44a70 --- /dev/null +++ b/docs/_includes/getting-started/grunt.html @@ -0,0 +1,32 @@ +<div class="bs-docs-section"> + <h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1> + + <p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p> + + <h2 id="grunt-installing">Installing Grunt</h2> + <p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p> + + Then, from the command line: + <ol> + <li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li> + <li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li> + </ol> + + <p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p> + + <h2 id="grunt-commands">Available Grunt commands</h2> + <h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3> + <p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p> + + <h3><code>grunt watch</code> (Watch)</h3> + <p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p> + + <h3><code>grunt test</code> (Run tests)</h3> + <p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</p> + + <h3><code>grunt</code> (Build absolutely everything and run tests)</h3> + <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.</p> + + <h2 id="grunt-troubleshooting">Troubleshooting</h2> + <p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p> +</div> diff --git a/docs/_includes/getting-started/template.html b/docs/_includes/getting-started/template.html index c6a1646d6..3952621a6 100644 --- a/docs/_includes/getting-started/template.html +++ b/docs/_includes/getting-started/template.html @@ -19,15 +19,15 @@ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> - <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> diff --git a/docs/_includes/getting-started/translations.html b/docs/_includes/getting-started/translations.html index dc46f5d90..215f790de 100644 --- a/docs/_includes/getting-started/translations.html +++ b/docs/_includes/getting-started/translations.html @@ -3,13 +3,9 @@ <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.</p> <ul> - <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> + {% for language in site.data.translations %} + <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li> + {% endfor %} </ul> <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> |