https://github.com/simplisticated/vootstrap
Great combination of Vue and Bootstrap
https://github.com/simplisticated/vootstrap
bootstrap frontend hybrid-app javascript vue
Last synced: 10 months ago
JSON representation
Great combination of Vue and Bootstrap
- Host: GitHub
- URL: https://github.com/simplisticated/vootstrap
- Owner: simplisticated
- License: apache-2.0
- Created: 2019-05-21T20:12:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-24T20:18:05.000Z (almost 7 years ago)
- Last Synced: 2025-05-08T19:46:26.535Z (11 months ago)
- Topics: bootstrap, frontend, hybrid-app, javascript, vue
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 39
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue + Bootstrap = Vootstrap
## 👓 At a Glance
`Vootstrap` is a collection of [Vue.js](https://vuejs.org) components with [Bootstrap](https://getbootstrap.com) under the hood.
While `Vootstrap` is a carefully thought-out combination of `Vue` and `Bootstrap` frameworks, it gives you an incredible simplicity and makes your frontend programming experience much more enjoyable 🎉
It works well for both websites and hybrid mobile apps. You can use popular components from `Bootstrap` filled with the power of reactive programming given by `Vue`.
The main advantage of `Vootstrap` is the syntax. The entire library is built with keeping in mind the idea of unbelievable flexibility. It's easy enough for beginners and helpful for experienced developers.
## 🚀 How to Get Started
Copy [vootstrap.js](vootstrap.js) to your project.
## ✔ Requirements
- [Vue.js](https://vuejs.org)
- [Bootstrap](https://getbootstrap.com)
## ⌨ Usage
Each `Vootstrap` component is actually an HTML tag that you can simply put into your layout.
**For now, [Button](#buttons) is the only component supported by `Vootstrap`. New components will be supported soon.**
Also, take a look at [demo app](demo/index.html) which gives the base understanding of amazing `Vootstrap` principles.
### Buttons
Simple primary button:
```html
```
The same button outlined:
```html
```
You can also change the size:
```html
```
One of the fundamental `Vootstrap` features is ability to swap tag name components. All the examples below are correct:
```html
```
So you don't need to use CSS classes like `btn-primary`, `btn-lg`, etc. Just put button's style information into the tag and use it like a regular button.
## âš– License
`Vootstrap` is available under the Apache 2.0 license. See the [LICENSE](./LICENSE) file for more info.