diff --git a/Gruntfile.js b/Gruntfile.js
index 47140704..1841f693 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -337,6 +337,14 @@ module.exports = function (grunt) {
'**/*'
],
dest: 'docs/components/'
+ },
+ 'bs-docs-content': {
+ expand: true,
+ cwd: '../bootstrap/docs/content',
+ src: [
+ '**/*'
+ ],
+ dest: 'docs/content/'
}
},
@@ -549,7 +557,7 @@ module.exports = function (grunt) {
grunt.registerTask('docs-css', ['sass:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs']);
grunt.registerTask('lint-docs-js', ['jscs:assets']);
- grunt.registerTask('docs', ['copy:bs-docs-components', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
+ grunt.registerTask('docs', ['copy:bs-docs-components', 'copy:bs-docs-content', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']);
diff --git a/docs/content/.READONLY.txt b/docs/content/.READONLY.txt
new file mode 100644
index 00000000..c0a06422
--- /dev/null
+++ b/docs/content/.READONLY.txt
@@ -0,0 +1,6 @@
+DO NOT edit files in this folder.
+
+These files are copied using
+ grunt copy:bs-docs-content
+
+This is done to keep samples in sync with the upstream bs4.
diff --git a/docs/content/figures.md b/docs/content/figures.md
index 7b3df8bd..d5727051 100644
--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -20,6 +20,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
{% example html %}
- A caption for the above image.
+ A caption for the above image.
{% endexample %}
diff --git a/docs/content/images.md b/docs/content/images.md
index 1f9abc98..38a855a0 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -26,7 +26,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
{% callout warning %}
#### SVG images and IE 9-10
-In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
+In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
{% endcallout %}
## Image shapes
@@ -50,13 +50,13 @@ Add classes to an `` element to easily style images in any project.
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
-
-
+
+
{% highlight html %}
-
-
+
+
{% endhighlight %}
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
{% endhighlight %}
-
+
{% highlight html %}
-
+
{% endhighlight %}
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
new file mode 100644
index 00000000..9631a86b
--- /dev/null
+++ b/docs/content/reboot.md
@@ -0,0 +1,317 @@
+---
+layout: docs
+title: Reboot
+group: content
+redirect_from: "/content/"
+---
+
+Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
+
+Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `
` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Approach
+
+Here are our guidelines and reasons for choosing what to override in Reboot:
+
+- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
+- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
+- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
+- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
+
+## Page defaults
+
+The `` and `` elements are updated to provide better page-wide defaults. More specifically:
+
+- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- A base `font-size: 16px` is declared on the `` and `font-size: 1rem` on the `` for easy responsive type-scaling via media queryies.
+- The `` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
+- For safety, the `` has a declared `background-color`, defaulting to `#fff`.
+
+## Headings and paragraphs
+
+All heading elements—e.g., `
`—and `
` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
+
+
+{% markdown %}
+# h1 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+## h2 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+### h3 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+#### h4 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+##### h5 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+###### h6 heading
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+{% endmarkdown %}
+
+
+## Lists
+
+All lists—`
`, ``, and `
`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
+
+
+{% markdown %}
+* Lorem ipsum dolor sit amet
+* Consectetur adipiscing elit
+* Integer molestie lorem at massa
+* Facilisis in pretium nisl aliquet
+* Nulla volutpat aliquam velit
+ * Phasellus iaculis neque
+ * Purus sodales ultricies
+ * Vestibulum laoreet porttitor sem
+ * Ac tristique libero volutpat at
+* Faucibus porta lacus fringilla vel
+* Aenean sit amet erat nunc
+* Eget porttitor lorem
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+4. Facilisis in pretium nisl aliquet
+5. Nulla volutpat aliquam velit
+6. Faucibus porta lacus fringilla vel
+7. Aenean sit amet erat nunc
+8. Eget porttitor lorem
+{% endmarkdown %}
+
+
+For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `
`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
`s are **bolded**.
+
+
+{% markdown %}
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
+
Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
+{% endmarkdown %}
+
+
+## Preformatted text
+
+The `
` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+
+{% markdown %}
+
+.example-element {
+ margin-bottom: 1rem;
+}
+
+{% endmarkdown %}
+
+
+## Tables
+
+Tables are slightly adjusted to style `
`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
+
+
+
+
+ This is an example table, and this is its caption to describe the contents.
+
+
+
+
Table heading
+
Table heading
+
Table heading
+
Table heading
+
+
+
+
+
Table cell
+
Table cell
+
Table cell
+
Table cell
+
+
+
Table cell
+
Table cell
+
Table cell
+
Table cell
+
+
+
Table cell
+
Table cell
+
Table cell
+
Table cell
+
+
+
+
+
+## Forms
+
+Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
+
+- `
+
+
+## Misc elements
+
+### Address
+
+The `` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. ``s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with ` `.
+
+
+
+ Twitter, Inc.
+ 1355 Market St, Suite 900
+ San Francisco, CA 94103
+ P: (123) 456-7890
+
+
+
+ Full Name
+ first.last@example.com
+
+
+
+### Blockquote
+
+The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+### Inline elements
+
+The `` element receives basic styling to make it stand out amongst paragraph text.
+
+
+ Nulla attr vitae elit libero, a pharetra augue.
+
+
+## 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](http://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 IE9-10, the explicit declaration in our CSS gets around that problem.
+
+{% highlight html %}
+
+{% endhighlight %}
+
+{% callout warning %}
+#### jQuery incompatibility
+
+`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+{% endcallout %}
+
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead.
+
+## Click delay optimization for touch
+
+Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive.
+
+Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are currently iOS Safari (and any other iOS WebView-based browser) – though this is likely to change in iOS 10, see [WebKit bug #150604](https://bugs.webkit.org/show_bug.cgi?id=150604) – and IE11 on Windows Phone 8.1.
+
+On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here.
+
+To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.
+
+In the case of iOS, the currently suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.
+
+For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).