Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 11, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 59 additions & 35 deletions docs/markdown/intro/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
```
Expand All @@ -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
Expand All @@ -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.

Expand All @@ -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
Expand Down
22 changes: 10 additions & 12 deletions src/components/popover/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
20 changes: 8 additions & 12 deletions src/components/tooltip/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down