mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

Merge branch 'v4-dev' into v4-docs-streamlined

Browse Source
This commit is contained in:
Mark Otto
2017-05-27 15:26:48 -07:00
parent 6c3f833076 db44e4b311
commit 8f67ac19a7
290 changed files with 27475 additions and 16231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/getting-started/introduction.md
+9 -18
View File
@@ -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