Permalink
Browse files

feat(docs): prepare for 1.0.0-beta

  • Loading branch information...
pi0 committed Aug 11, 2017
1 parent dc8d238 commit 8e465526ae44c4ae3326a9c5526534285fdccb3d
@@ -29,64 +29,17 @@
</p>
> [Bootstrap 4](https://v4-alpha.getbootstrap.com/) components for [Vue.js 2](https://vuejs.org/)
> [Bootstrap 4](https://getbootstrap.com/docs/4.0) components for [Vue.js](https://vuejs.org)
# Links
- 📘 [Documentation](https://bootstrap-vue.js.org)
- ▶ [Playground](https://bootstrap-vue.js.org/play)
- 🔥 [Release Notes](https://github.com/bootstrap-vue/bootstrap-vue/releases)
- 🔨 [Change Log](https://bootstrap-vue.js.org/docs/changelog)
- 💬 [Slack Community](https://bootstrap-vue.now.sh)
# Quick Start
Please refer to [Official Documentation](https://bootstrap-vue.github.io) for setup guide, examples and documentation.
1. Download dependencies:
```bash
yarn add bootstrap-vue
yarn add bootstrap@4.0.0-alpha.6
yarn add -D style-loader
```
2. Register BootstrapVue in your app entrypoint:
```js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
```
3. Import styles using style-loader:
```js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
```
##### For users of Webpack or Webpack-Simple from `vue-cli` follow these instructions:
1. Download the dependencies:
```bash
yarn add bootstrap-vue
yarn add bootstrap@4.0.0-alpha.6
yarn add -D style-loader
```
2. In `src/main.js`, add the following lines, in priority order:
```js
import Vue from 'vue'
/* ( there may be other imports here ) */
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'
/* ( there may be other imports here ) */
Vue.use(BootstrapVue)
```
#### Note on style-loader:
If you are unable or do not want to add style-loader as a developer dependency, you have to
manually include both [Bootstrap's](https://v4-alpha.getbootstrap.com/getting-started/download/)
and [BootstrapVue's](https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css) CSS files
in your bundle or reference them from `static/` via `index.html`.
Please refer to [Official Documentation](https://bootstrap-vue.js.org) for setup guide, examples and documentation.
# License
MIT
@@ -1,21 +1,122 @@
# Introduction
# Quick start
> **Bootstrap** is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
### Nuxt.js
You can use official [Nuxt.js](https://nuxtjs.org) module to add BootstrapVue support. ([module docs](https://github.com/nuxt-community/modules/tree/master/modules/bootstrap-vue))
>**Vue.js** is a library that focuses heavily on the ViewModel—the two-way data bindings that tie what we see and interact with on the screen with the application's data mode.
- Add `@nuxtjs/bootstrap-vue` dependency using yarn or npm to your project
- Add `@nuxtjs/bootstrap-vue` to modules section of **nuxt.config.js**
>This library, **BootstrapVue**, helps you quickly integrate Bootstrap 4 components with Vue.js 2.
```js
{
modules: [
'@nuxtjs/bootstrap-vue',
## Setup
To get started use [Quick Start](/docs/setup) guide.
// Or if you have custom bootstrap CSS...
['@nuxtjs/bootstrap-vue', { css: false }],
]
}
```
### Webpack
If you are using module bundlers such as Webpack, Rollup, Laravel elixir/mix, etc you may prefer directly include package
into your project. To get started use yarn or npm to get latest version first:
```bash
yarn add bootstrap-vue # or npm i bootstrap-vue
```
Then, register BootstrapVue plugin in your app entry point:
```js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
```
And import styles: (needs `style-loader`)
```js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
```
**Note:** If you are unable or do not want to add style-loader as a dev dependency, you have to
manually include both [Bootstrap](https://v4-alpha.getbootstrap.com/getting-started/download/)
and [BootstrapVue](https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css) CSS files
in your bundle or reference them from `static/` via `index.html`.
### vue-cli
Download the dependencies:
```bash
yarn add --dev bootstrap-vue style-loader
```
In `src/main.js`, add the following lines, in priority order:
```js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
/* ...there may be other imports here */
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'
Vue.use(BootstrapVue)
```
### Individual components and directives
If for any reason just want to use a specific component, you can do this by directly importing that component.
This is not recommended as entire package gzipped size is ~15Kb!
```js
import { bAlert, bBtn, bCollapse } from 'bootstrap-vue/lib/components'
import { bToggle, bScrollspy } from 'bootstrap-vue/lib/directives'
new Vue({
// ...
components: {
bAlert,
bBtn,
bCollapse
},
directives: {
bToggle,
bScrollspy
},
// ...
})
```
### Browser
```html
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
```
## Build variants
Choosing the best variant for your build environment / packager helps less bundle sizes.
If your bundler supports es modules, it will automatically prefer it over commonjs.
| Variant | Environments | Package path
| -------------- | -------------------- | -----------------------------------
| **ES Module** | Webpack 2 / Rollup | `dist/bootstrap-vue.esm.js`
| commonjs2 | Webpack 1 / ... | `dist/bootstrap-vue.common.js`
| UMD | Browser | `dist/bootstrap-vue.js`
## 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 your project:
- remove the bootstrap.js file from your page scripts or build pipeline
- if Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue **does not** depend on jQuery
- don't forget to include the `bootstrap-vue.css` file!
- Remove the bootstrap.js file from your page scripts or build pipeline
- If Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue **does not** depend on jQuery
- Don't forget to include the `bootstrap-vue.css` file!
## Browsers Support
@@ -34,5 +135,5 @@ If you want to support older IE, Android and IOS devices, you may want to use
**IE 11**
You'll need babel-polyfill for BootstrapVue to work properly. In order to support this browser:
- npm install babel-polyfill --save
- `npm install babel-polyfill`
- Import it in your app main entry point with `import 'babel-polyfill'`

This file was deleted.

Oops, something went wrong.
@@ -9,9 +9,9 @@ export default {
title: 'BootstrapVue',
slug: '',
pages: [
{title: 'Quick Start', slug: 'setup'},
{title: 'Quick Start', slug: '/'},
{title: 'Contributing', slug: 'contributing'},
{title: 'Change Log', slug: 'changelog'}
{title: 'Release Notes', slug: 'changelog'}
]
},
{

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -9,12 +9,9 @@
transform: scale(1.01);
}
body, .nav-link {
font-family: 'Open Sans', sans-serif;
}
.hljs {
font-family: "Inconsolata", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-size: 17px;
overflow-x: auto;
position: relative;
background-color: #f9f9f9;
@@ -32,16 +29,6 @@ code {
color: #795da3;
}
.bd-masthead {
color: white;
background-image: none !important;
background-color: #4fc08d;
}
.bd-masthead .lead {
color: white;
}
blockquote {
font-size: 1.25rem;
font-weight: 300;
@@ -56,10 +43,6 @@ blockquote {
z-index: 100 !important;
}
.vue-example {
margin: 20px;
}
pre.editable:after {
content: '(double click to edit)';
position: absolute;
@@ -83,3 +66,11 @@ pre.editable:hover:after {
pre.editable.live:after {
content: 'Live';
}
.bd-footer {
padding: 4rem 0;
margin-top: 4rem;
font-size: 85%;
text-align: center;
background-color: #f7f7f7;
}
Oops, something went wrong.

0 comments on commit 8e46552

Please sign in to comment.