diff options
| author | Mark Otto <[email protected]> | 2017-05-27 15:26:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-27 15:26:48 -0700 |
| commit | 8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910 (patch) | |
| tree | d5a2aba4e2e762b283e7cfe60f00e1f239105bbe /docs/getting-started/introduction.md | |
| parent | 6c3f833076a9fa68601741e3e21bd07ad79b7d8a (diff) | |
| parent | db44e4b311317ef760f8412cc33c84146959b248 (diff) | |
| download | bootstrap-8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910.tar.xz bootstrap-8f67ac19a761b8d3ecc80485c3f54aa6ba4fa910.zip | |
Merge branch 'v4-dev' into v4-docs-streamlined
Diffstat (limited to 'docs/getting-started/introduction.md')
| -rw-r--r-- | docs/getting-started/introduction.md | 27 |
1 files changed, 9 insertions, 18 deletions
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index 43429db07..c69adb599 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -28,11 +28,11 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> {% endhighlight %} -Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Tether first, as our code depends on them. +Add our JavaScript plugins, jQuery, and Popper.js near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js first, as our code depends on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported. {% highlight html %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> -<script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} @@ -40,22 +40,15 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al ## Starter template -Be sure to have your pages set up with the latest design and development standards. That means: - -* Using an HTML5 doctype -* Forcing Internet Explorer to use its latest rendering mode ([read more](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do)) -* And, utilizing the viewport meta tag. - -Put it all together and your pages should look like this: +Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this: {% highlight html %} <!DOCTYPE html> <html lang="en"> <head> - <!-- Required meta tags always come first --> + <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> @@ -63,9 +56,9 @@ Put it all together and your pages should look like this: <body> <h1>Hello, world!</h1> - <!-- jQuery first, then Tether, then Bootstrap JS. --> + <!-- jQuery first, then Popper.js, then Bootstrap JS. --> <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> - <script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script> + <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> </body> </html> @@ -106,9 +99,7 @@ On the rare occasion you need to override it, use something like the following: {% highlight scss %} .selector-for-some-widget { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + box-sizing: content-box; } {% endhighlight %} @@ -116,9 +107,9 @@ With the above snippet, nested elements—including generated content via `:befo Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/). -### Normalize.css +### Reboot -For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/). +For improved cross-browser rendering, we use [Reboot]({{ site.baseurl }}/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements. ## Community |