Vue + Bootstrap = Vootstrap
👓 At a Glance
Vootstrap is a carefully thought-out combination of
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
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 to your project.
Vootstrap component is actually an HTML tag that you can simply put into your layout.
For now, Button is the only component supported by
Vootstrap. New components will be supported soon.
Also, take a look at demo app which gives the base understanding of amazing
Simple primary button:
<vt-button-primary title="My button"></vt-button-primary>
The same button outlined:
<vt-button-primary-outline title="My button"></vt-button-primary-outline>
You can also change the size:
<vt-button-success-outline-small title="Small button"></vt-button-success-outline-small> <vt-button-warning-outline-large title="Large button"></vt-button-warning-outline-large>
One of the fundamental
Vootstrap features is ability to swap tag name components. All the examples below are correct:
<vt-button-primary-outline-large title="My button"></vt-button-primary-outline-large> <vt-button-primary-large-outline title="My button"></vt-button-primary-large-outline> <vt-button-outline-primary-large title="My button"></vt-button-outline-primary-large> <vt-button-primary-large title="My button"></vt-button-primary-large> <vt-button-large-primary title="My button"></vt-button-large-primary>
So you don't need to use CSS classes like
btn-lg, etc. Just put button's style information into the tag and use it like a regular button.
Vootstrap is available under the Apache 2.0 license. See the LICENSE file for more info.