Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

121 lines (116 sloc) 6.32 KB
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Internal CSS -->
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Vootstrap Library</title>
</head>
<body>
<div id="app" v-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{{ logo.text }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li :class="['nav-item', {'active': currentSection === sections.main }]" v-if="sections.main.isAvailable">
<a class="nav-link" href="#" @click="currentSection = sections.main">Home</a>
</li>
<li :class="['nav-item', {'active': currentSection === sections.button }]" v-if="sections.button.isAvailable">
<a class="nav-link" href="#" @click="currentSection = sections.button">Buttons</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid slight-margin-from-top">
<div id="main-section" v-if="currentSection === sections.main">
<h1>Incredible Vootstrap</h1>
<p>
Vootstrap is a collection of <a href="https://vuejs.org">Vue.js</a> components with <a href="https://getbootstrap.com">Bootstrap</a> under the hood.
</p>
<p>
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 🎉
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
<div id="button-section" v-else-if="currentSection === sections.button">
<h1>Amazing Buttons</h1>
<p>
<h3>Small</h3>
<vt-button-primary-small title="Primary Small"></vt-button-primary-small>
<vt-button-secondary-small title="Secondary Small"></vt-button-secondary-small>
<vt-button-success-small title="Success Small"></vt-button-success-small>
<vt-button-danger-small title="Danger Small"></vt-button-danger-small>
<vt-button-warning-small title="Warning Small"></vt-button-warning-small>
<vt-button-info-small title="Info Small"></vt-button-info-small>
<vt-button-light-small title="Light Small"></vt-button-light-small>
<vt-button-dark-small title="Dark Small"></vt-button-dark-small>
<vt-button-link-small title="Link Small"></vt-button-link-small>
</p>
<p>
<h3>Medium</h3>
<vt-button-primary title="Primary Medium"></vt-button-primary>
<vt-button-secondary title="Secondary Medium"></vt-button-secondary>
<vt-button-success title="Success Medium"></vt-button-success>
<vt-button-danger title="Danger Medium"></vt-button-danger>
<vt-button-warning title="Warning Medium"></vt-button-warning>
<vt-button-info title="Info Medium"></vt-button-info>
<vt-button-light title="Light Medium"></vt-button-light>
<vt-button-dark title="Dark Medium"></vt-button-dark>
<vt-button-link title="Link Medium"></vt-button-link>
</p>
<p>
<h3>Large</h3>
<vt-button-primary-large title="Primary Large"></vt-button-primary-large>
<vt-button-secondary-large title="Secondary Large"></vt-button-secondary-large>
<vt-button-success-large title="Success Large"></vt-button-success-large>
<vt-button-danger-large title="Danger Large"></vt-button-danger-large>
<vt-button-warning-large title="Warning Large"></vt-button-warning-large>
<vt-button-info-large title="Info Large"></vt-button-info-large>
<vt-button-light-large title="Light Large"></vt-button-light-large>
<vt-button-dark-large title="Dark Large"></vt-button-dark-large>
<vt-button-link-large title="Link Large"></vt-button-link-large>
</p>
<p>
<h3>Outline</h3>
<vt-button-primary-outline title="Primary Outline"></vt-button-primary-outline>
<vt-button-secondary-outline title="Secondary Outline"></vt-button-secondary-outline>
<vt-button-success-outline title="Success Outline"></vt-button-success-outline>
<vt-button-danger-outline title="Danger Outline"></vt-button-danger-outline>
<vt-button-warning-outline title="Warning Outline"></vt-button-warning-outline>
<vt-button-info-outline title="Info Outline"></vt-button-info-outline>
<vt-button-light-outline title="Light Outline"></vt-button-light-outline>
<vt-button-dark-outline title="Dark Outline"></vt-button-dark-outline>
<vt-button-link-outline title="Link Outline"></vt-button-link-outline>
</p>
</div>
<div id="undefined-section" v-else>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- Vootstrap -->
<script type="text/javascript" src="../vootstrap.js"></script>
<!-- Internal JS -->
<script type="text/javascript" src="js/view-model.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You can’t perform that action at this time.