chore(docs): fix some heading levels and remove necessary blockquote sections that are not the lead in paragraph (#3081)

tmorehouse · web-flow · commit 85cadacda99d · 2019-04-10T22:35:32.000-03:00
diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
@@ -8,7 +8,7 @@
   <code>{{ bootstrapVersion }}</code> SCSS/CSS
 - jQuery is **not** required
 
-## General
+## Using module bundlers
 
 If you are using module bundlers like [webpack](https://webpack.js.org/),
 [rollup.js](https://rollupjs.org), etc you may prefer to directly include the package into your
@@ -257,7 +257,43 @@ For additional configuration for Vue CLI 3 for using project relative paths for
 various BootstrapVue components, refer to the Vue CLI 3 section of the
 [Image Src Resolving](/docs/reference/images#vue-cli-3-support) reference page.
 
-## Individual components and directives
+## Selective component and directive inclusion in module bundlers
+
+When using a module bundler you can optionally import only specific components groups, components
+and/or directives.
+
+### Component groups and Directives as Vue plugins
+
+You can import component groups and directives as Vue plugins by importing the component group
+or directive directory:
+
+<!-- eslint-disable import/first, import/no-duplicates -->
+
+```js
+// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
+import { Layout } from 'bootstrap-vue/es/components'
+Vue.use(Layout)
+
+// This imports <b-modal> as well as the v-b-modal directive as a plugin:
+import { Modal } from 'bootstrap-vue/es/components'
+Vue.use(Modal)
+
+// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
+import { Card } from 'bootstrap-vue/es/components'
+Vue.use(Card)
+
+// This imports directive v-b-scrollspy as a plugin:
+import { Scrollspy } from 'bootstrap-vue/es/directives'
+Vue.use(Scrollspy)
+```
+
+When importing as plugins, all subcomponents and related directives are imported in most cases. i.e.
+When importing `<b-nav>`, all the `<nav-*>` sub components are also included, as well all dropdown
+sub components. Component shorthand aliases (if any) are also included in the plugin.
+
+Refer to the component and directive documentation for details.
+
+### Individual components and directives
 
 If you would like to only pull in a specific component or set of components, you can do this by
 directly importing those components.
@@ -299,37 +335,6 @@ Vue.directive('b-modal', BModalDirective)
 Vue and ES2015 allow for various syntaxes here, so feel free to utilize kebab-casing (shown),
 camelCasing, PascalCasing, and/or object property shorthand.
 
-### Component groups and Directives as Vue plugins
-
-You can also import component groups and directives as Vue plugins by importing the component group
-or directive directory:
-
-<!-- eslint-disable import/first, import/no-duplicates -->
-
-```js
-// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
-import { Layout } from 'bootstrap-vue/es/components'
-Vue.use(Layout)
-
-// This imports <b-modal> as well as the v-b-modal directive as a plugin:
-import { Modal } from 'bootstrap-vue/es/components'
-Vue.use(Modal)
-
-// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
-import { Card } from 'bootstrap-vue/es/components'
-Vue.use(Card)
-
-// This imports directive v-b-scrollspy as a plugin:
-import { Scrollspy } from 'bootstrap-vue/es/directives'
-Vue.use(Scrollspy)
-```
-
-When importing as plugins, all subcomponents and related directives are imported in most cases. i.e.
-When importing `<b-nav>`, all the `<nav-*>` sub components are also included, as well all dropdown
-sub components. Component shorthand aliases (if any) are also included in the plugin.
-
-Refer to the component and directive documentation for details.
-
 ### webpack + Babel
 
 When importing components/directives individually, you must configure your app to properly build the
@@ -363,16 +368,28 @@ module.exports = {
 
 ## Browser
 
+Add the Boostrap and BootstrapVue CSS URLs in your HTML `<head>` section, followed by the
+required JavaScript files.
+
+When supporting older browsers (see [Browser Support](#browser-support) below), you will need
+to include a polyfill for handling modern JavaScript features before loading Vue and
+BoostrapVue JavaScript files.
+
 ```html
 <!-- Add this to <head> -->
+
+<!-- Load required Bootstrap and BootstrapVue CSS -->
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
 <link
   type="text/css"
   rel="stylesheet"
   href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
 />
 
+<!-- Load a polyfill to support older browsers -->
 <script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
+
+<!-- Load Vue followed by BootstrapVue -->
 <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
 <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
 ```
@@ -384,11 +401,15 @@ bundler supports es modules, it will automatically prefer it over commonjs.
 
 | Variant        | Environments          | Package path                                                           |
 | -------------- | --------------------- | ---------------------------------------------------------------------- |
-| **ES Module**  | webpack 2 / rollup.js | `es/index.js`                                                          |
+| **ES Modules** | webpack 2 / rollup.js | `es/index.js`                                                          |
 | **ESM Module** | webpack 2 / rollup.js | `dist/bootstrap-vue.esm.js` _or_ `dist/bootstrap-vue.esm.min.js`       |
 | commonjs2      | webpack 1 / ...       | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` |
 | UMD            | Browser               | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js`               |
 
+BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), and
+`vue-functional-data-merge` (for functional components). These two dependencies are included in
+the `commonjs2` and `UMD` bundles.
+
 ## Migrating a project already using Bootstrap
 
 If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to
@@ -403,7 +424,7 @@ your project:
 
 ### CSS
 
-BootstrapVue is to be used with Bootstrap 4 CSS/SCSS. Please see
+BootstrapVue is to be used with Bootstrap 4.3 CSS/SCSS. Please see
 [Browsers and devices](https://getbootstrap.com/docs/4.3/getting-started/browsers-devices) for more
 information about browsers currently supported by Bootstrap 4.
 
@@ -418,6 +439,9 @@ If you want to support older IE, Android and IOS devices, you may want to use
 - `npm install @babel/polyfill`
 - Import it in your app main entry point with `import '@babel/polyfill'`
 
+Or use [Polyfill.io](https://polyfill.io/) to dynamically serve browser specific polyfills via `<script>`
+tags in the HTML `<head>` section.
+
 ## Tooling Support
 
 ### VS Code + Vetur
diff --git a/src/components/popover/README.md b/src/components/popover/README.md
@@ -38,12 +38,12 @@ The target element **must** exist in the document before `<b-popover>` is mounte
 element is not found during mount, the popover will never open. Always place your `<b-popover>`
 component lower in the DOM than your target element.
 
-> **Note:** _When using slots for content and/or title, `<b-popover>` transfers the rendered DOM
-> from those slots into the popover's markup when shown, and returns them back to the `<b-popover>`
-> component when hidden. This may cause some issues in rare circumstances, so please test your
-> implementation accordingly! The `title` and `content` props do not have this behavior. For simple
-> popovers, we recommend using the `v-b-popover` directive and enable the `html` modifier if
-> needed._
+**Note:** _When using slots for content and/or title, `<b-popover>` transfers the rendered DOM
+from those slots into the popover's markup when shown, and returns them back to the `<b-popover>`
+component when hidden. This may cause some issues in rare circumstances, so please test your
+implementation accordingly! The `title` and `content` props do not have this behavior. For simple
+popovers, we recommend using the `v-b-popover` directive and enable the `html` modifier if
+needed._
 
 ## Positioning
 
@@ -777,10 +777,8 @@ event.
 
 These events work for both the component **and** directive versions of popover.
 
-> **Note:** _The **trigger element** must exist in the DOM and be in a visible state in order for
-> the popover to instantiate and show._
-
-## Disabling and enabling popovers via \$root events
+**Note:** _The **trigger element** must exist in the DOM and be in a visible state in order for
+the popover to instantiate and show._
 
 ### Disabling and enabling popovers via \$root events
 
@@ -808,8 +806,8 @@ To enable all popovers simultaneously, omit the `id` argument when emitting the
 
 These events work for both the component and directive versions of popover.
 
-> **Note:** _The **trigger element** must exist in the DOM in order for the popover to be enabled or
-> disabled._
+**Note:** _The **trigger element** must exist in the DOM in order for the popover to be enabled or
+disabled._
 
 ### Listening to popover changes via \$root events
 
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -27,7 +27,7 @@ Things to know when using tooltip component:
   white-space: nowrap; on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
 - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
 
-The `<b-tooltip` component inserts a hidden (`display:none`) `<div>` intermediate container element
+The `<b-tooltip>` component inserts a hidden (`display:none`) `<div>` intermediate container element
 at the point in the DOM where the `<b-tooltip>` component is placed. This may affect layout and/or
 styling of components such as `<b-button-group>`, `<b-button-toolbar>`, and `<b-input-group>`. To
 avoid these possible layout issues, place the `<b-tooltip>` component **outside** of these types of
@@ -291,9 +291,9 @@ long as you have provided the `.sync` prop modifier.
 <!-- b-tooltip-disable.vue -->
 ```
 
-> **Note:** _In the above example, since we are using the default tooltip triggers of `focus hover`,
-> the tooltip will close before it is disabled due to loosing focus (and hover) to the toggle
-> button._
+**Note:** _In the above example, since we are using the default tooltip triggers of `focus hover`,
+the tooltip will close before it is disabled due to loosing focus (and hover) to the toggle
+button._
 
 You can also emit `$root` events to trigger disabling and enabling of tooltip(s). See the
 **Disabling and enabling tooltips via \$root events** section below for details.
@@ -331,8 +331,6 @@ markup:
 Refer to the [`v-b-tooltip` documentation](/docs/directives/tooltip) for more information and
 features of the directive format.
 
-## Hiding and showing tooltips via \$root events
-
 ## 'Global' \$root instance events
 
 Using `$root` instance it is possible to emit and listen events somewhere out of a component, where
@@ -366,10 +364,8 @@ event.
 
 These events work for both the component **and** directive versions of tooltip.
 
-> **Note:** _the **trigger element** must exist in the DOM and be in a visible state in order for
-> the tooltip to show._
-
-## Disabling and enabling tooltips via \$root events
+**Note:** _the **trigger element** must exist in the DOM and be in a visible state in order for
+the tooltip to show._
 
 ### Disabling and enabling tooltips via \$root events
 
@@ -397,8 +393,8 @@ To enable all tooltips simultaneously, omit the `id` argument when emitting the
 
 These events work for both the component **and** directive versions of tooltip.
 
-> **Note:** _The **trigger element** must exist in the DOM in order for the tooltip to be enabled or
-> disabled._
+**Note:** _The **trigger element** must exist in the DOM in order for the tooltip to be enabled or
+disabled._
 
 ### Listening to tooltip changes via \$root events
 
