diff options
| author | Gijs Boddeus <[email protected]> | 2017-10-04 08:46:03 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-10-04 08:46:03 +0200 |
| commit | 263190305e1208b183611fe511ea8f983932a00d (patch) | |
| tree | 8cc874b98d5d9e7d9db66b078d94e5dc1db2c4e8 /docs/4.0/content | |
| parent | cc092272eefa0e89bebfc716c8df8214d2804c77 (diff) | |
| parent | 682ad1fff58fb6586dceaf31d490aaa522110e59 (diff) | |
| download | bootstrap-263190305e1208b183611fe511ea8f983932a00d.tar.xz bootstrap-263190305e1208b183611fe511ea8f983932a00d.zip | |
Merge branch 'v4-dev' into yiq-function-update
Diffstat (limited to 'docs/4.0/content')
| -rw-r--r-- | docs/4.0/content/images.md | 12 | ||||
| -rw-r--r-- | docs/4.0/content/reboot.md | 2 | ||||
| -rw-r--r-- | docs/4.0/content/typography.md | 10 |
3 files changed, 18 insertions, 6 deletions
diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md index 0bcbe3a03..4601dcc6d 100644 --- a/docs/4.0/content/images.md +++ b/docs/4.0/content/images.md @@ -69,3 +69,15 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc <img src="..." class="rounded" alt="..."> </div> {% endhighlight %} + + +## Picture + +If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag. + +{% highlight html %} +<picture> + <source srcset="..." type="image/svg+xml"> + <img src="..." class="img-fluid img-thumbnail" alt="..."> +</picture> +{% endhighlight %} diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index f69d2519e..58d6b201b 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -330,7 +330,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra ## HTML5 `[hidden]` attribute -HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. +HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. {% highlight html %} <input type="text" hidden> diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md index 74ecbe614..d76070889 100644 --- a/docs/4.0/content/typography.md +++ b/docs/4.0/content/typography.md @@ -16,7 +16,7 @@ Bootstrap sets basic global display, typography, and link styles. When more cont - Set the global link color via `$link-color` and apply link underlines only on `:hover`. - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default). -These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. ## Headings @@ -297,24 +297,24 @@ Here's an example of it in practice. Choose whatever `font-size`s and media quer {% highlight scss %} html { - font-size: 14px; + font-size: 1rem; } @include media-breakpoint-up(sm) { html { - font-size: 16px; + font-size: 1.2rem; } } @include media-breakpoint-up(md) { html { - font-size: 20px; + font-size: 1.4rem; } } @include media-breakpoint-up(lg) { html { - font-size: 28px; + font-size: 1.6rem; } } {% endhighlight %} |